azkaban-aplcache

diff --git a/build.xml b/build.xml
index 86db40b..4b81f6d 100644
--- a/build.xml
+++ b/build.xml
@@ -4,6 +4,8 @@
 	<property file="build.properties" />
 	<property name="base.dir" value="${basedir}" />
 	<property name="dist.jar.dir" value="${basedir}/dist/jars" />
+	<property name="dist.dust.dir" value="${basedir}/dist/dust" />
+	<property name="dist.less.dir" value="${basedir}/dist/less" />
 	<property name="dist.classes.dir" value="${basedir}/dist/classes" />
 	<property name="dist.packages.dir" value="${basedir}/dist/packages" />
 	<property name="dist.web.package.dir" value="${dist.packages.dir}/azkaban-web-server" />
@@ -19,6 +21,8 @@
 	<property name="lib.dir" value="${basedir}/lib" />
 	<property name="bin.dir" value="${basedir}/bin" />
 	<property name="java.src.dir" value="${basedir}/src/java" />
+	<property name="dust.src.dir" value="${basedir}/src/tl" />
+	<property name="less.src.dir" value="${basedir}/src/less" />
 	<property name="web.src.dir" value="${basedir}/src/web" />
 	<property name="sql.src.dir" value="${basedir}/src/sql" />
 	
@@ -48,6 +52,10 @@
 	<target name="build" description="Compile main source tree java files">
 		<delete dir="${dist.classes.dir}" />
 		<mkdir dir="${dist.classes.dir}" />
+		<delete dir="${dist.dust.dir}" />
+		<mkdir dir="${dist.dust.dir}" />
+		<delete dir="${dist.less.dir}" />
+		<mkdir dir="${dist.less.dir}" />
 		
 		<!-- copy non-java files to classes dir to load from classpath -->
 		<copy todir="${dist.classes.dir}">
@@ -61,6 +69,33 @@
 			<src path="${java.src.dir}" />
 			<classpath refid="main.classpath" />
 		</javac>
+
+		<!-- Compile dustjs templates -->
+		<!-- Note: Because apply does not support multiple srcfile and targetfile
+				 elements, and for and foreach requires ant-contrib, we use targetfile 
+				 for the template name parameter and then redirect the output of dustc
+				 to the final output file -->
+		<echo message="Compiling Dust templates." />
+		<apply dir="${dust.src.dir}" executable="dustc" relative="true">
+			<mapper type="glob" from="*.tl" to="*" />
+			<targetfile prefix="--name=" />
+			<srcfile />
+			<fileset dir="${dust.src.dir}" includes="*.tl" />
+			<redirector>
+				<outputmapper id="out" type="glob" from="*.tl" to="${dist.dust.dir}/*.js" />
+			</redirector>
+		</apply>
+
+		<!-- Compile LESS to CSS -->
+		<echo message="Compiling LESS style sheets." />
+		<apply dir="${less.src.dir}" executable="lessc" relative="true">
+			<mapper type="glob" from="*.less" to="*.css" />
+			<srcfile />
+			<fileset dir="${less.src.dir}" includes="*.less" />
+			<redirector>
+				<outputmapper id="out" type="glob" from="*.less" to="${dist.less.dir}/*.css" />
+			</redirector>
+		</apply>
 	</target>
 	
 	<target name="jars" depends="build" description="Create azkaban jar">
@@ -147,17 +182,27 @@
 		</copy>
 		
 		<!-- Copy bin files for web server only-->
-		<copy todir="${dist.web.package.dir}/bin" >
+		<copy todir="${dist.web.package.dir}/bin">
 			<fileset dir="${web.package.dir}/bin"/>
 		</copy>
 		
 		<!-- Copy web files -->
-		<copy todir="${dist.web.package.dir}/web" >
+		<copy todir="${dist.web.package.dir}/web">
 			<fileset dir="${web.src.dir}" />
 		</copy>
+
+		<!-- Copy compiled dust templates -->
+		<copy todir="${dist.web.package.dir}/web/js">
+			<fileset dir="${dist.dust.dir}" />
+		</copy>
+
+		<!-- Copy compiled less CSS -->
+		<copy todir="${dist.web.package.dir}/web/css">
+			<fileset dir="${dist.less.dir}" />
+		</copy>
 		
 		<!-- Copy conf create table scripts -->
-		<copy todir="${dist.web.package.dir}/conf" >
+		<copy todir="${dist.web.package.dir}/conf">
 			<fileset dir="${web.package.dir}/conf" />
 		</copy>
 		
@@ -241,6 +286,16 @@
 			<fileset dir="${web.src.dir}" />
 		</copy>
 		
+		<!-- Copy compiled dust templates -->
+		<copy todir="${dist.solo.package.dir}/web/js">
+			<fileset dir="${dist.dust.dir}" />
+		</copy>
+		
+		<!-- Copy compiled less CSS -->
+		<copy todir="${dist.solo.package.dir}/web/css">
+			<fileset dir="${dist.less.dir}" />
+		</copy>
+		
 		<!-- Copy sql files -->
 		<copy todir="${dist.solo.package.dir}/sql" >
 			<fileset dir="${sql.src.dir}" />
@@ -259,4 +314,8 @@
 	
 	<target name="package-all" depends="package-exec-server, package-web-server, package-solo-server, package-sql-scripts" description="Create all packages">
 	</target>
+
+	<target name="package" depends="package-all" description="Create all packages">
+	</target>
+
 </project>

diff --git a/ISSUES b/ISSUES
new file mode 100644
index 0000000..3c6c0f0
--- /dev/null
+++ b/ISSUES
@@ -0,0 +1,8 @@
+ Azkaban 3 UI Issues
+ ===================
+ 
+ - Make log view fit screen size
+ - Make graph view fit screen size
+ - Unify error messages.
+ - Change chevron on My Projects list to proper expanders.
+ - Fix dependency hovering for job list on flows page

diff --git a/src/java/azkaban/scheduler/ScheduleManager.java b/src/java/azkaban/scheduler/ScheduleManager.java
index 81c5c29..f0325af 100644
--- a/src/java/azkaban/scheduler/ScheduleManager.java
+++ b/src/java/azkaban/scheduler/ScheduleManager.java
@@ -104,7 +104,6 @@ public class ScheduleManager implements TriggerAgent {
 	
 	// only do this when using external runner
 	public synchronized void updateLocal() throws ScheduleManagerException {
-
 		List<Schedule> updates = loader.loadUpdatedSchedules();
 		for(Schedule s : updates) {
 			if(s.getStatus().equals(TriggerStatus.EXPIRED.toString())) {
@@ -157,15 +156,15 @@ public class ScheduleManager implements TriggerAgent {
 	 * @param id
 	 * @return
 	 * @throws ScheduleManagerException 
-	*/
+	 */
 //	public Set<Schedule> getSchedules(int projectId, String flowId) throws ScheduleManagerException {
 //		updateLocal();
 //		return scheduleIdentityPairMap.get(new Pair<Integer,String>(projectId, flowId));
 //	}
 	public Schedule getSchedule(int projectId, String flowId) throws ScheduleManagerException {
-	updateLocal();
-	return scheduleIdentityPairMap.get(new Pair<Integer,String>(projectId, flowId));
-}
+		updateLocal();
+		return scheduleIdentityPairMap.get(new Pair<Integer,String>(projectId, flowId));
+	}
 
 	/**
 	 * Returns the scheduled flow for the scheduleId

diff --git a/src/java/azkaban/utils/LogSummary.java b/src/java/azkaban/utils/LogSummary.java
new file mode 100644
index 0000000..c9e5495
--- /dev/null
+++ b/src/java/azkaban/utils/LogSummary.java
@@ -0,0 +1,349 @@
+package azkaban.utils;
+
+import azkaban.utils.FileIOUtils.LogData;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
+
+public class LogSummary {
+	private static final String HIVE_PARSING_START = "Parsing command: ";
+	private static final String HIVE_PARSING_END = "Parse Completed";
+	private static final String HIVE_NUM_MAP_REDUCE_JOBS_STRING = "Total MapReduce jobs = ";
+	private static final String HIVE_MAP_REDUCE_JOB_START = "Starting Job";
+	private static final String HIVE_MAP_REDUCE_JOBS_SUMMARY = "MapReduce Jobs Launched:";
+	
+	// Regex to search for URLs to job details pages.
+	private static final Pattern jobTrackerUrl = Pattern.compile(
+			"https?://" + // http(s)://
+			"[-\\w\\.]+" + // domain
+			"(?::\\d+)?" + // port
+			"/[\\w/\\.]*" + // path
+			// query string
+			"\\?\\S+" + 
+			"(job_\\d{12}_\\d{4,})" + // job id
+			"\\S*"
+	);
+	
+	private String jobType = null;
+	private List<Pair<String,String>> commandProperties = new ArrayList<Pair<String,String>>();
+	
+	private String[] pigStatTableHeaders = null;
+	private List<String[]> pigStatTableData = new ArrayList<String[]>();
+	
+	private String[] pigSummaryTableHeaders = null;
+	private List<String[]> pigSummaryTableData = new ArrayList<String[]>();
+	
+	private List<String> hiveQueries = new ArrayList<String>();
+	
+	// Each element in hiveQueryJobs contains a list of the jobs for a query.
+	// Each job contains a list of strings of the job summary values.
+	private List<List<List<String>>> hiveQueryJobs = new ArrayList<List<List<String>>>();
+	
+	public LogSummary(LogData log) {
+		if (log != null) {
+			parseLogData(log.getData());
+		}
+	}
+	
+	private void parseLogData(String data) {
+		// Filter out all the timestamps
+		data = data.replaceAll("(?m)^.*? - ", "");
+		String[] lines = data.split("\n");
+		
+		if (parseCommand(lines)) {
+			jobType = parseJobType(lines);
+			
+			if (jobType.contains("pig")) {
+				parsePigJobSummary(lines);
+				parsePigJobStats(lines);
+			} else if (jobType.contains("hive")) {
+				parseHiveQueries(lines);
+			}
+		}
+	}
+
+	private String parseJobType(String[] lines) {
+		Pattern p = Pattern.compile("Building (\\S+) job executor");
+		
+		for (String line : lines) {
+			Matcher m = p.matcher(line);
+			if (m.find()) {
+				return m.group(1);
+			}
+		}
+		
+		return null;
+	}
+	
+	private boolean parseCommand(String[] lines) {
+		int commandStartIndex = -1;
+		for (int i = 0; i < lines.length; i++) {
+			if (lines[i].startsWith("Command: ")) {
+				commandStartIndex = i;
+				break;
+			}
+		}
+		
+		if (commandStartIndex != -1) {
+			String command = lines[commandStartIndex].substring(9);
+			commandProperties.add(new Pair<String,String>("Command", command));
+			
+			// Parse classpath
+			Pattern p = Pattern.compile("(?:-cp|-classpath)\\s+(\\S+)");
+			Matcher m = p.matcher(command);
+			StringBuilder sb = new StringBuilder();
+			if (m.find()) {
+				sb.append(StringUtils.join((Collection<String>)Arrays.asList(m.group(1).split(":")), "<br/>"));
+				commandProperties.add(new Pair<String,String>("Classpath", sb.toString()));
+			}
+			
+			// Parse environment variables
+			p = Pattern.compile("-D(\\S+)");
+			m = p.matcher(command);
+			sb = new StringBuilder();
+			while (m.find()) {
+				sb.append(m.group(1) + "<br/>");
+			}
+			if (sb.length() > 0) {
+				commandProperties.add(new Pair<String,String>("-D", sb.toString()));
+			}
+			
+			// Parse memory settings
+			p = Pattern.compile("(-Xm\\S+)");
+			m = p.matcher(command);
+			sb = new StringBuilder();
+			while (m.find()) {
+				sb.append(m.group(1) + "<br/>");
+			}
+			if (sb.length() > 0) {
+				commandProperties.add(new Pair<String,String>("Memory Settings", sb.toString()));
+			}
+			
+			// Parse Pig params
+			p = Pattern.compile("-param\\s+(\\S+)");
+			m = p.matcher(command);
+			sb = new StringBuilder();
+			while (m.find()) {
+				sb.append(m.group(1) + "<br/>");
+			}
+			if (sb.length() > 0) {
+				commandProperties.add(new Pair<String,String>("Params", sb.toString()));
+			}
+			
+			return true;
+		}
+		
+		return false;
+	}
+	
+	private void parsePigJobSummary(String[] lines) {
+		int jobSummaryStartIndex = -1;
+		for (int i = 0; i < lines.length; i++) {
+			if (lines[i].startsWith("HadoopVersion")) {
+				jobSummaryStartIndex = i;
+				break;
+			}
+		}
+		
+		if (jobSummaryStartIndex != -1) {
+			String headerLine = lines[jobSummaryStartIndex];
+			pigSummaryTableHeaders = headerLine.split("\t");
+			
+			int tableRowIndex = jobSummaryStartIndex + 1;
+			String line;
+			while (!(line = lines[tableRowIndex]).equals("")) {
+				pigSummaryTableData.add(line.split("\t"));
+				tableRowIndex++;
+			}
+		}
+	}
+	
+	/**
+	 * Parses the Pig Job Stats table that includes the max/min mapper and reduce times.
+	 * Adds links to the job details pages on the job tracker.
+	 * @param lines
+	 */
+	private void parsePigJobStats(String[] lines) {
+		int jobStatsStartIndex = -1;
+		
+		Map<String, String> jobDetailUrls = new HashMap<String, String>();
+
+		
+		
+		for (int i = 0; i < lines.length; i++) {
+			String line = lines[i];
+			Matcher m = jobTrackerUrl.matcher(line);
+			
+			if (m.find()) {
+				jobDetailUrls.put(m.group(1), m.group(0));
+			}
+			else if (line.startsWith("Job Stats (time in seconds):")) {
+				jobStatsStartIndex = i+1;
+				break;
+			}
+		}
+		
+		if (jobStatsStartIndex != -1) {
+			String headerLine = lines[jobStatsStartIndex];
+			pigStatTableHeaders = headerLine.split("\t");
+			
+			int tableRowIndex = jobStatsStartIndex + 1;
+			String line;
+			while (!(line = lines[tableRowIndex]).equals("")) {
+				String[] stats = line.split("\t");
+				if (jobDetailUrls.containsKey(stats[0])) {
+					stats[0] = "<a href=\"" + jobDetailUrls.get(stats[0]) + "\">" + stats[0] + "</a>";
+				}
+				pigStatTableData.add(stats);
+				tableRowIndex++;
+			}
+		}
+	}
+	
+	private void parseHiveQueries(String[] lines) {
+		for (int i = 0; i < lines.length;) {
+			String line = lines[i];
+			int parsingCommandIndex = line.indexOf(HIVE_PARSING_START);
+			if (parsingCommandIndex != -1) {
+				// parse query text
+				int queryStartIndex = parsingCommandIndex + HIVE_PARSING_START.length();
+				StringBuilder query = new StringBuilder(line.substring(queryStartIndex) + "\n");
+				
+				i++;
+				while (i < lines.length && !(line = lines[i]).contains(HIVE_PARSING_END)) {
+					query.append(line + "\n");
+					i++;
+				}
+				String queryString = query.toString().trim().replaceAll("\n","<br/>");
+				hiveQueries.add(queryString);
+				i++;
+				
+				// parse the query's Map-Reduce jobs, if any.
+				int numMRJobs = 0;
+				List<String> jobTrackerUrls = new ArrayList<String>();
+				while (i < lines.length) {
+					line = lines[i];
+					if (line.contains(HIVE_NUM_MAP_REDUCE_JOBS_STRING)) {
+						// query involves map reduce jobs
+						numMRJobs = Integer.parseInt(line.substring(HIVE_NUM_MAP_REDUCE_JOBS_STRING.length()));
+						i++;
+						
+						// get the job tracker URLs
+						String lastUrl = "";
+						int numJobsSeen = 0;
+						while (numJobsSeen < numMRJobs && i < lines.length) {
+							line = lines[i];
+							if (line.contains(HIVE_MAP_REDUCE_JOB_START)) {
+								Matcher m = jobTrackerUrl.matcher(line);
+								if (m.find() && !lastUrl.equals(m.group(1))) {
+									jobTrackerUrls.add(m.group(0));
+									lastUrl = m.group(1);
+									numJobsSeen++;
+								}
+							}
+							i++;
+						}
+						
+						// get the map reduce jobs summary
+						while (i < lines.length) {
+							line = lines[i];
+							if (line.contains(HIVE_MAP_REDUCE_JOBS_SUMMARY)) {
+								// job summary table found
+								i++;
+								
+								List<List<String>> queryJobs = new ArrayList<List<String>>();
+								
+								Pattern p = Pattern.compile(
+									"Job (\\d+): Map: (\\d+)  Reduce: (\\d+)   HDFS Read: (\\d+) HDFS Write: (\\d+)"
+								);
+								
+								int previousJob = -1;
+								numJobsSeen = 0;
+								while (numJobsSeen < numMRJobs && i < lines.length) {
+									line = lines[i];
+									Matcher m = p.matcher(line);
+									if (m.find()) {
+										int currJob = Integer.parseInt(m.group(1));
+										if (currJob == previousJob) {
+											i++;
+											continue;
+										}
+										
+										List<String> job = new ArrayList<String>();
+										job.add("<a href=\"" + jobTrackerUrls.get(currJob) +
+												"\">" + currJob + "</a>");
+										job.add(m.group(2));
+										job.add(m.group(3));
+										job.add(m.group(4));
+										job.add(m.group(5));
+										queryJobs.add(job);
+										previousJob = currJob;
+										numJobsSeen++;
+									}
+									i++;
+								}
+								
+								if (numJobsSeen == numMRJobs) {
+									hiveQueryJobs.add(queryJobs);
+								}
+								
+								break;
+							}
+							i++;
+						} 
+						break;
+					}
+					else if (line.contains(HIVE_PARSING_START)) {
+						if (numMRJobs == 0) {
+							hiveQueryJobs.add(null);
+						}
+						break;
+					}
+					i++;
+				}
+				continue;
+			}
+			
+			i++;
+		}
+		return;
+	}
+	
+	public String[] getPigStatTableHeaders() {
+		return pigStatTableHeaders;
+	}
+
+	public List<String[]> getPigStatTableData() {
+		return pigStatTableData;
+	}
+
+	public String[] getPigSummaryTableHeaders() {
+		return pigSummaryTableHeaders;
+	}
+
+	public List<String[]> getPigSummaryTableData() {
+		return pigSummaryTableData;
+	}
+	
+	public String getJobType() {
+		return jobType;
+	}
+	
+	public List<Pair<String,String>> getCommandProperties() {
+		return commandProperties;
+	}
+
+	public List<String> getHiveQueries() {
+		return hiveQueries;
+	}
+
+	public List<List<List<String>>> getHiveQueryJobs() {
+		return hiveQueryJobs;
+	}
+}

diff --git a/src/java/azkaban/webapp/AzkabanWebServer.java b/src/java/azkaban/webapp/AzkabanWebServer.java
index df2c02a..c24ea11 100644
--- a/src/java/azkaban/webapp/AzkabanWebServer.java
+++ b/src/java/azkaban/webapp/AzkabanWebServer.java
@@ -758,6 +758,7 @@ public class AzkabanWebServer extends AzkabanServer {
 		root.addServlet(staticServlet, "/css/*");
 		root.addServlet(staticServlet, "/js/*");
 		root.addServlet(staticServlet, "/images/*");
+		root.addServlet(staticServlet, "/fonts/*");
 		root.addServlet(staticServlet, "/favicon.ico");
 		
 		root.addServlet(new ServletHolder(new ProjectManagerServlet()),"/manager");

diff --git a/src/java/azkaban/webapp/servlet/AbstractAzkabanServlet.java b/src/java/azkaban/webapp/servlet/AbstractAzkabanServlet.java
index f7a5184..8ac470e 100644
--- a/src/java/azkaban/webapp/servlet/AbstractAzkabanServlet.java
+++ b/src/java/azkaban/webapp/servlet/AbstractAzkabanServlet.java
@@ -55,7 +55,7 @@ public abstract class AbstractAzkabanServlet extends HttpServlet {
 	public static final String XML_MIME_TYPE = "application/xhtml+xml";
 	public static final String JSON_MIME_TYPE = "application/json";
 
-	private static final WebUtils utils = new WebUtils();
+	protected static final WebUtils utils = new WebUtils();
 	
 	private AzkabanServer application;
 	private String name;

diff --git a/src/java/azkaban/webapp/servlet/ExecutorServlet.java b/src/java/azkaban/webapp/servlet/ExecutorServlet.java
index 95847a1..ad572ed 100644
--- a/src/java/azkaban/webapp/servlet/ExecutorServlet.java
+++ b/src/java/azkaban/webapp/servlet/ExecutorServlet.java
@@ -44,6 +44,7 @@ import azkaban.user.Permission;
 import azkaban.user.User;
 import azkaban.user.Permission.Type;
 import azkaban.utils.FileIOUtils.LogData;
+import azkaban.utils.LogSummary;
 import azkaban.webapp.AzkabanWebServer;
 import azkaban.webapp.session.Session;
 
@@ -71,7 +72,7 @@ public class ExecutorServlet extends LoginAbstractAzkabanServlet {
 		}
 		else if (hasParam(req, "execid")) {
 			if (hasParam(req, "job")) {
-				handleExecutionJobPage(req, resp, session);
+				handleExecutionJobDetailsPage(req, resp, session);
 			}
 			else {
 				handleExecutionFlowPage(req, resp, session);
@@ -82,8 +83,8 @@ public class ExecutorServlet extends LoginAbstractAzkabanServlet {
 		}
 	}
 	
-	private void handleExecutionJobPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException, IOException {
-		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/joblogpage.vm");
+	private void handleExecutionJobDetailsPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException, IOException {
+		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/jobdetailspage.vm");
 		User user = session.getUser();
 		int execId = getIntParam(req, "execid");
 		String jobId = getParam(req, "job");
@@ -96,7 +97,7 @@ public class ExecutorServlet extends LoginAbstractAzkabanServlet {
 		try {
 			flow = executorManager.getExecutableFlow(execId);
 			if (flow == null) {
-				page.add("errorMsg", "Error loading executing flow " + execId + " not found.");
+				page.add("errorMsg", "Error loading executing flow " + execId + ": not found.");
 				page.render();
 				return;
 			}
@@ -262,6 +263,9 @@ public class ExecutorServlet extends LoginAbstractAzkabanServlet {
 				else if (ajaxName.equals("fetchExecJobLogs")) {
 					ajaxFetchJobLogs(req, resp, ret, session.getUser(), exFlow);
 				}
+				else if (ajaxName.equals("fetchExecJobSummary")) {
+					ajaxFetchJobSummary(req, resp, ret, session.getUser(), exFlow);
+				}
 				else if (ajaxName.equals("retryFailedJobs")) {
 					ajaxRestartFailed(req, resp, ret, session.getUser(), exFlow);
 				}
@@ -442,6 +446,53 @@ public class ExecutorServlet extends LoginAbstractAzkabanServlet {
 			throw new ServletException(e);
 		}
 	}
+	
+	/**
+	 * Gets the job summary.
+	 * 
+	 * @param req
+	 * @param resp
+	 * @param user
+	 * @param exFlow
+	 * @throws ServletException
+	 */
+	private void ajaxFetchJobSummary(HttpServletRequest req, HttpServletResponse resp, HashMap<String, Object> ret, User user, ExecutableFlow exFlow) throws ServletException {
+		Project project = getProjectAjaxByPermission(ret, exFlow.getProjectId(), user, Type.READ);
+		if (project == null) {
+			return;
+		}
+		
+		String jobId = this.getParam(req, "jobId");
+		resp.setCharacterEncoding("utf-8");
+
+		try {
+			ExecutableNode node = exFlow.getExecutableNode(jobId);
+			if (node == null) {
+				ret.put("error", "Job " + jobId + " doesn't exist in " + exFlow.getExecutionId());
+				return;
+			}
+			
+			int attempt = this.getIntParam(req, "attempt", node.getAttempt());
+			LogData data = executorManager.getExecutionJobLog(exFlow, jobId, 0, Integer.MAX_VALUE, attempt);
+			
+			LogSummary summary = new LogSummary(data);
+			ret.put("commandProperties", summary.getCommandProperties());
+			
+			String jobType = summary.getJobType();
+			
+			if (jobType.contains("pig")) {
+				ret.put("summaryTableHeaders", summary.getPigSummaryTableHeaders());
+				ret.put("summaryTableData", summary.getPigSummaryTableData());
+				ret.put("statTableHeaders", summary.getPigStatTableHeaders());
+				ret.put("statTableData", summary.getPigStatTableData());
+			} else if (jobType.contains("hive")) {
+				ret.put("hiveQueries", summary.getHiveQueries());
+				ret.put("hiveQueryJobs", summary.getHiveQueryJobs());
+			}
+		} catch (ExecutorManagerException e) {
+			throw new ServletException(e);
+		}
+	}
 
 	private void ajaxFetchFlowInfo(HttpServletRequest req, HttpServletResponse resp, HashMap<String, Object> ret, User user, String projectName, String flowId) throws ServletException {
 		Project project = getProjectAjaxByPermission(ret, projectName, user, Type.READ);

diff --git a/src/java/azkaban/webapp/servlet/LoginAbstractAzkabanServlet.java b/src/java/azkaban/webapp/servlet/LoginAbstractAzkabanServlet.java
index d9d039a..b48e2c9 100644
--- a/src/java/azkaban/webapp/servlet/LoginAbstractAzkabanServlet.java
+++ b/src/java/azkaban/webapp/servlet/LoginAbstractAzkabanServlet.java
@@ -64,6 +64,10 @@ public abstract class LoginAbstractAzkabanServlet extends AbstractAzkabanServlet
 		contextType.put(".jpeg", "image/jpeg");
 		contextType.put(".gif", "image/gif");
 		contextType.put(".jpg", "image/jpeg");
+		contextType.put(".eot", "application/vnd.ms-fontobject");
+		contextType.put(".svg", "image/svg+xml");
+		contextType.put(".ttf", "application/octet-stream");
+		contextType.put(".woff", "application/x-font-woff");
 	}
 	
 	private File webResourceDirectory = null;
@@ -121,10 +125,10 @@ public abstract class LoginAbstractAzkabanServlet extends AbstractAzkabanServlet
 		String prefix = req.getContextPath() + req.getServletPath();
 		String path = req.getRequestURI().substring(prefix.length());
 		int index = path.lastIndexOf('.');
-		if (index == -1 ) {
+		if (index == -1) {
 			return false;
 		}
-		
+
 		String extension = path.substring(index);
 		if (contextType.containsKey(extension)) {
 			File file = new File(webResourceDirectory, path);
@@ -291,9 +295,10 @@ public abstract class LoginAbstractAzkabanServlet extends AbstractAzkabanServlet
 			return true;
 		}
 		
-		for(String roleName: user.getRoles()) {
+		for (String roleName: user.getRoles()) {
 			Role role = userManager.getRole(roleName);
-			if (role.getPermission().isPermissionSet(type) || role.getPermission().isPermissionSet(Permission.Type.ADMIN)) {
+			if (role.getPermission().isPermissionSet(type) || 
+					role.getPermission().isPermissionSet(Permission.Type.ADMIN)) {
 				return true;
 			}
 		}

diff --git a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
index 61d3258..c05b38d 100644
--- a/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
+++ b/src/java/azkaban/webapp/servlet/ProjectManagerServlet.java
@@ -30,6 +30,7 @@ import java.util.Comparator;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.HashSet;
 import java.util.Set;
 
 import javax.servlet.ServletConfig;
@@ -116,9 +117,6 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 			else if (hasParam(req, "permissions")) {
 				handlePermissionPage(req, resp, session);
 			}
-			else if (hasParam(req, "staging")) {
-				handleFlowStagingPage(req, resp, session);
-			}
 			else if (hasParam(req, "prop")) {
 				handlePropertyPage(req, resp, session);
 			}
@@ -199,6 +197,11 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 			if (handleAjaxPermission(project, user, Type.READ, ret)) {
 				ajaxFetchFlow(project, ret, req, resp);
 			}
+    }
+		else if (ajaxName.equals("fetchflowdetails")) {
+			if (handleAjaxPermission(project, user, Type.READ, ret)) {
+				ajaxFetchFlowDetails(project, ret, req);
+			}
 		}
 		else if (ajaxName.equals("fetchflowgraph")) {
 			if (handleAjaxPermission(project, user, Type.READ, ret)) {
@@ -305,7 +308,38 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		
 		ret.put("logData", eventData);
 	}
+
+  private List<String> getFlowJobTypes(Flow flow) {
+    Set<String> jobTypeSet = new HashSet<String>();
+    for (Node node : flow.getNodes()) {
+      jobTypeSet.add(node.getType());
+    }
+    List<String> jobTypes = new ArrayList<String>();
+    jobTypes.addAll(jobTypeSet);
+    return jobTypes;
+  }
 	
+	private void ajaxFetchFlowDetails(Project project, 
+      HashMap<String, Object> ret, HttpServletRequest req) 
+      throws ServletException {
+		String projectName = getParam(req, "project");
+		String flowName = getParam(req, "flow");
+
+		Flow flow = null;
+		try {
+      flow = project.getFlow(flowName);
+      if (flow == null) {
+        ret.put("error", "Flow " + flowName + " not found.");
+        return;
+      }
+
+      ret.put("jobTypes", getFlowJobTypes(flow));
+		}
+		catch (AccessControlException e) {
+			ret.put("error", e.getMessage());
+		}
+  }
+
 	private void ajaxFetchFlowExecutions(Project project, HashMap<String, Object> ret, HttpServletRequest req) throws ServletException {
 		String flowId = getParam(req, "flow");
 		int from = Integer.valueOf(getParam(req, "start"));
@@ -369,7 +403,8 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 					break;
 				}
 			}
-		} catch (ScheduleManagerException e) {
+		} 
+    catch (ScheduleManagerException e) {
 			// TODO Auto-generated catch block
 			throw new ServletException(e);
 		}
@@ -398,7 +433,8 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		//project.info("Project removing by '" + user.getUserId() + "'");
 		try {
 			projectManager.removeProject(project, user);
-		} catch (ProjectManagerException e) {
+		} 
+    catch (ProjectManagerException e) {
 			this.setErrorMessageInCookie(resp, e.getMessage());
 			resp.sendRedirect(req.getRequestURI() + "?project=" + projectName);
 			return;
@@ -730,21 +766,49 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 	
 	private void handleProjectLogsPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException, IOException {
 		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/projectlogpage.vm");
-
 		String projectName = getParam(req, "project");
-		
-		Project project = projectManager.getProject(projectName);
-		if (project == null) {
-			page.add("errorMsg", "Project " + projectName + " doesn't exist.");
+
+		User user = session.getUser();
+		Project project = null;
+		try {
+			project = projectManager.getProject(projectName);
+			if (project == null) {
+				page.add("errorMsg", "Project " + projectName + " doesn't exist.");
+			}
+			else {
+				if (!hasPermission(project,user,Type.READ)) {
+					throw new AccessControlException( "No permission to view project " + projectName + ".");
+				}
+				
+				page.add("project", project);
+				page.add("admins", Utils.flattenToString(project.getUsersWithPermission(Type.ADMIN), ","));
+				Permission perm = this.getPermissionObject(project, user, Type.ADMIN);
+				page.add("userpermission", perm);
+	
+				boolean adminPerm = perm.isPermissionSet(Type.ADMIN);
+				if (adminPerm) {
+					page.add("admin", true);
+				}
+				// Set this so we can display execute buttons only to those who have access.
+				if (perm.isPermissionSet(Type.EXECUTE) || adminPerm) {
+					page.add("exec", true);
+				}
+				else {
+					page.add("exec", false);
+				}
+			}
+		}
+		catch (AccessControlException e) {
+			page.add("errorMsg", e.getMessage());
 		}
-		page.add("projectName", projectName);
+
 		//page.add("projectManager", projectManager);
 		//int bytesSkip = 0;
 		int numBytes = 1024;
 
-		// Really sucks if we do a lot of these because it'll eat up memory fast. But it's expected
-		// that this won't be a heavily used thing. If it is, then we'll revisit it to make it more stream
-		// friendly.
+		// Really sucks if we do a lot of these because it'll eat up memory fast. 
+		// But it's expected that this won't be a heavily used thing. If it is, 
+		// then we'll revisit it to make it more stream friendly.
 		StringBuffer buffer = new StringBuffer(numBytes);
 		page.add("log", buffer.toString());
 
@@ -894,97 +958,95 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		Flow flow = null;
 		try {
 			project = projectManager.getProject(projectName);
-			
 			if (project == null) {
 				page.add("errorMsg", "Project " + projectName + " not found.");
+        page.render();
+        return;
 			}
-			else {
-				if (!hasPermission(project, user, Type.READ)) {
-					throw new AccessControlException( "No permission to view project " + projectName + ".");
-				}
-				
-				page.add("project", project);
-				
-				flow = project.getFlow(flowName);
-				if (flow == null) {
-					page.add("errorMsg", "Flow " + flowName + " not found.");
-				}
-				else {
-					page.add("flowid", flow.getId());
-					
-					Node node = flow.getNode(jobName);
-					
-					if (node == null) {
-						page.add("errorMsg", "Job " + jobName + " not found.");
-					}
-					else {
-						Props prop = projectManager.getProperties(project, node.getJobSource());
-						Props overrideProp = projectManager.getJobOverrideProperty(project, jobName);
-						if(overrideProp == null) {
-							overrideProp = new Props();
-						}
-						Props comboProp = new Props(prop);
-						for(String key : overrideProp.getKeySet()) {
-							comboProp.put(key, overrideProp.get(key));
-						}
-						page.add("jobid", node.getId());
-						page.add("jobtype", node.getType());
-						
-						ArrayList<String> dependencies = new ArrayList<String>();
-						Set<Edge> inEdges = flow.getInEdges(node.getId());
-						if (inEdges != null) {
-							for ( Edge dependency: inEdges ) {
-								dependencies.add(dependency.getSourceId());
-							}
-						}
-						if (!dependencies.isEmpty()) {
-							page.add("dependencies", dependencies);
-						}
-						
-						ArrayList<String> dependents = new ArrayList<String>();
-						Set<Edge> outEdges = flow.getOutEdges(node.getId());
-						if (outEdges != null) {
-							for ( Edge dependent: outEdges ) {
-								dependents.add(dependent.getTargetId());
-							}
-						}
-						if (!dependents.isEmpty()) {
-							page.add("dependents", dependents);
-						}
-						
-						// Resolve property dependencies
-						ArrayList<String> source = new ArrayList<String>(); 
-						String nodeSource = node.getPropsSource();
-						if(nodeSource != null) {
-							source.add(nodeSource);
-							FlowProps parent = flow.getFlowProps(nodeSource);
-							while(parent.getInheritedSource() != null) {
-								source.add(parent.getInheritedSource());
-								parent = flow.getFlowProps(parent.getInheritedSource()); 
-							}
-						}
-						if(!source.isEmpty()) {
-							page.add("properties", source);
-						}
-						
-						ArrayList<Pair<String,String>> parameters = new ArrayList<Pair<String, String>>();
-						// Parameter
-						for (String key : comboProp.getKeySet()) {
-							String value = comboProp.get(key);
-							parameters.add(new Pair<String,String>(key, value));
-						}
-						
-						page.add("parameters", parameters);
-					}
-				}
-			}
+      if (!hasPermission(project, user, Type.READ)) {
+        throw new AccessControlException( "No permission to view project " + projectName + ".");
+      }
+      
+      page.add("project", project);
+      flow = project.getFlow(flowName);
+      if (flow == null) {
+        page.add("errorMsg", "Flow " + flowName + " not found.");
+        page.render();
+        return;
+      }
+
+      page.add("flowid", flow.getId());
+      Node node = flow.getNode(jobName);
+      if (node == null) {
+        page.add("errorMsg", "Job " + jobName + " not found.");
+        page.render();
+        return;
+      }
+
+      Props prop = projectManager.getProperties(project, node.getJobSource());
+      Props overrideProp = projectManager.getJobOverrideProperty(project, jobName);
+      if (overrideProp == null) {
+        overrideProp = new Props();
+      }
+      Props comboProp = new Props(prop);
+      for (String key : overrideProp.getKeySet()) {
+        comboProp.put(key, overrideProp.get(key));
+      }
+      page.add("jobid", node.getId());
+      page.add("jobtype", node.getType());
+      
+      ArrayList<String> dependencies = new ArrayList<String>();
+      Set<Edge> inEdges = flow.getInEdges(node.getId());
+      if (inEdges != null) {
+        for (Edge dependency: inEdges) {
+          dependencies.add(dependency.getSourceId());
+        }
+      }
+      if (!dependencies.isEmpty()) {
+        page.add("dependencies", dependencies);
+      }
+      
+      ArrayList<String> dependents = new ArrayList<String>();
+      Set<Edge> outEdges = flow.getOutEdges(node.getId());
+      if (outEdges != null) {
+        for (Edge dependent: outEdges) {
+          dependents.add(dependent.getTargetId());
+        }
+      }
+      if (!dependents.isEmpty()) {
+        page.add("dependents", dependents);
+      }
+      
+      // Resolve property dependencies
+      ArrayList<String> source = new ArrayList<String>(); 
+      String nodeSource = node.getPropsSource();
+      if (nodeSource != null) {
+        source.add(nodeSource);
+        FlowProps parent = flow.getFlowProps(nodeSource);
+        while (parent.getInheritedSource() != null) {
+          source.add(parent.getInheritedSource());
+          parent = flow.getFlowProps(parent.getInheritedSource()); 
+        }
+      }
+      if (!source.isEmpty()) {
+        page.add("properties", source);
+      }
+      
+      ArrayList<Pair<String,String>> parameters = new ArrayList<Pair<String, String>>();
+      // Parameter
+      for (String key : comboProp.getKeySet()) {
+        String value = comboProp.get(key);
+        parameters.add(new Pair<String,String>(key, value));
+      }
+      
+      page.add("parameters", parameters);
 		}
 		catch (AccessControlException e) {
 			page.add("errorMsg", e.getMessage());
-		} catch (ProjectManagerException e) {
+		}
+		catch (ProjectManagerException e) {
 			page.add("errorMsg", e.getMessage());
 		}
-		
 		page.render();
 	}
 	
@@ -1000,68 +1062,65 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		Flow flow = null;
 		try {
 			project = projectManager.getProject(projectName);
-			
 			if (project == null) {
 				page.add("errorMsg", "Project " + projectName + " not found.");
+        page.render();
+        return;
 			}
-			else {
-				if (!hasPermission(project,user,Type.READ)) {
-					throw new AccessControlException( "No permission to view project " + projectName + ".");
-				}
-				
-				page.add("project", project);
-				
-				flow = project.getFlow(flowName);
-				if (flow == null) {
-					page.add("errorMsg", "Flow " + flowName + " not found.");
-				}
-				else {
-					page.add("flowid", flow.getId());
-					
-					Node node = flow.getNode(jobName);
-					
-					if (node == null) {
-						page.add("errorMsg", "Job " + jobName + " not found.");
-					}
-					else {
-						Props prop = projectManager.getProperties(project, propSource);
-						
-						page.add("property", propSource);
-						
-						page.add("jobid", node.getId());
-						
-						// Resolve property dependencies
-						ArrayList<String> inheritProps = new ArrayList<String>(); 
-						FlowProps parent = flow.getFlowProps(propSource);
-						while(parent.getInheritedSource() != null) {
-							inheritProps.add(parent.getInheritedSource());
-							parent = flow.getFlowProps(parent.getInheritedSource()); 
-						}
-						if(!inheritProps.isEmpty()) {
-							page.add("inheritedproperties", inheritProps);
-						}
-						
-						ArrayList<String> dependingProps = new ArrayList<String>(); 
-						FlowProps child = flow.getFlowProps(flow.getNode(jobName).getPropsSource());
-						while(!child.getSource().equals(propSource)) {
-							dependingProps.add(child.getSource());
-							child = flow.getFlowProps(child.getInheritedSource()); 
-						}
-						if(!dependingProps.isEmpty()) {
-							page.add("dependingproperties", dependingProps);
-						}
-						
-						ArrayList<Pair<String,String>> parameters = new ArrayList<Pair<String, String>>();
-						// Parameter
-						for (String key : prop.getKeySet()) {
-							String value = prop.get(key);
-							parameters.add(new Pair<String,String>(key, value));
-						}
-						
-						page.add("parameters", parameters);
-					}
-				}
-			}
+
+      if (!hasPermission(project,user,Type.READ)) {
+        throw new AccessControlException( "No permission to view project " + projectName + ".");
+      }
+      page.add("project", project);
+      
+      flow = project.getFlow(flowName);
+      if (flow == null) {
+        page.add("errorMsg", "Flow " + flowName + " not found.");
+        page.render();
+        return;
+      }
+
+      page.add("flowid", flow.getId());
+      Node node = flow.getNode(jobName);
+      if (node == null) {
+        page.add("errorMsg", "Job " + jobName + " not found.");
+        page.render();
+        return;
+      }
+
+      Props prop = projectManager.getProperties(project, propSource);
+      page.add("property", propSource);
+      page.add("jobid", node.getId());
+      
+      // Resolve property dependencies
+      ArrayList<String> inheritProps = new ArrayList<String>(); 
+      FlowProps parent = flow.getFlowProps(propSource);
+      while (parent.getInheritedSource() != null) {
+        inheritProps.add(parent.getInheritedSource());
+        parent = flow.getFlowProps(parent.getInheritedSource()); 
+      }
+      if (!inheritProps.isEmpty()) {
+        page.add("inheritedproperties", inheritProps);
+      }
+      
+      ArrayList<String> dependingProps = new ArrayList<String>(); 
+      FlowProps child = flow.getFlowProps(flow.getNode(jobName).getPropsSource());
+      while (!child.getSource().equals(propSource)) {
+        dependingProps.add(child.getSource());
+        child = flow.getFlowProps(child.getInheritedSource()); 
+      }
+      if (!dependingProps.isEmpty()) {
+        page.add("dependingproperties", dependingProps);
+      }
+      
+      ArrayList<Pair<String,String>> parameters = new ArrayList<Pair<String, String>>();
+      // Parameter
+      for (String key : prop.getKeySet()) {
+        String value = prop.get(key);
+        parameters.add(new Pair<String,String>(key, value));
+      }
+      
+      page.add("parameters", parameters);
 		}
 		catch (AccessControlException e) {
 			page.add("errorMsg", e.getMessage());
@@ -1082,66 +1141,23 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		Flow flow = null;
 		try {
 			project = projectManager.getProject(projectName);
-			
 			if (project == null) {
 				page.add("errorMsg", "Project " + projectName + " not found.");
+        page.render();
+        return;
 			}
-			else {
-				if (!hasPermission(project, user, Type.READ)) {
-					throw new AccessControlException( "No permission Project " + projectName + ".");
-				}
-				
-				page.add("project", project);
-				
-				flow = project.getFlow(flowName);
-				if (flow == null) {
-					page.add("errorMsg", "Flow " + flowName + " not found.");
-				}
-				
-				page.add("flowid", flow.getId());
-			}
-		}
-		catch (AccessControlException e) {
-			page.add("errorMsg", e.getMessage());
-		}
-		
-		page.render();
-	}
 
-	private void handleFlowStagingPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException {
-		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/flowstagingpage.vm");
-		String projectName = getParam(req, "project");
-		String flowName = getParam(req, "flow");
-		
-		String retryFlow = null;
-		if (hasParam(req, "retry")) {
-			retryFlow = getParam(req, "retry");
-		}
-		
-		User user = session.getUser();
-		Project project = null;
-		Flow flow = null;
-		try {
-			project = projectManager.getProject(projectName);
-			
-			if (project == null) {
-				page.add("errorMsg", "Project " + projectName + " not found.");
-			}
-			else {
-				if (!hasPermission(project, user, Type.EXECUTE)) {
-					throw new AccessControlException( "No permission Project " + projectName + " to Execute.");
-				}
-				
-				page.add("project", project);
-				
-				flow = project.getFlow(flowName);
-				if (flow == null) {
-					page.add("errorMsg", "Flow " + flowName + " not found.");
-				}
-				
-				page.add("flowid", flow.getId());
-				page.add("retry", retryFlow);
-			}
+      if (!hasPermission(project, user, Type.READ)) {
+        throw new AccessControlException( "No permission Project " + projectName + ".");
+      }
+      
+      page.add("project", project);
+      flow = project.getFlow(flowName);
+      if (flow == null) {
+        page.add("errorMsg", "Flow " + flowName + " not found.");
+      }
+      
+      page.add("flowid", flow.getId());
 		}
 		catch (AccessControlException e) {
 			page.add("errorMsg", e.getMessage());
@@ -1149,7 +1165,7 @@ public class ProjectManagerServlet extends LoginAbstractAzkabanServlet {
 		
 		page.render();
 	}
-	
+
 	private void handleProjectPage(HttpServletRequest req, HttpServletResponse resp, Session session) throws ServletException {
 		Page page = newPage(req, resp, session, "azkaban/webapp/servlet/velocity/projectpage.vm");
 		String projectName = getParam(req, "project");

diff --git a/src/java/azkaban/webapp/servlet/ScheduleServlet.java b/src/java/azkaban/webapp/servlet/ScheduleServlet.java
index 566437d..c373608 100644
--- a/src/java/azkaban/webapp/servlet/ScheduleServlet.java
+++ b/src/java/azkaban/webapp/servlet/ScheduleServlet.java
@@ -102,19 +102,21 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 		if (ajaxName.equals("slaInfo")) {
 			ajaxSlaInfo(req, ret, session.getUser());
 		}
-		else if(ajaxName.equals("setSla")) {
+		else if (ajaxName.equals("setSla")) {
 			ajaxSetSla(req, ret, session.getUser());
-		} else
-		if(ajaxName.equals("loadFlow")) {
+		} else if(ajaxName.equals("loadFlow")) {
 			ajaxLoadFlows(req, ret, session.getUser());
 		}
-		else if(ajaxName.equals("loadHistory")) {
+		else if (ajaxName.equals("loadHistory")) {
 			ajaxLoadHistory(req, resp, session.getUser());
 			ret = null;
 		}
-		else if(ajaxName.equals("scheduleFlow")) {
+		else if (ajaxName.equals("scheduleFlow")) {
 			ajaxScheduleFlow(req, ret, session.getUser());
 		}
+    else if (ajaxName.equals("fetchSchedule")) {
+      ajaxFetchSchedule(req, ret, session.getUser());
+    }
 
 		if (ret != null) {
 			this.writeJSON(resp, ret);
@@ -123,9 +125,7 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 
 	private void ajaxSetSla(HttpServletRequest req, HashMap<String, Object> ret, User user) {
 		try {
-			
 			int scheduleId = getIntParam(req, "scheduleId");
-			
 			Schedule sched = scheduleManager.getSchedule(scheduleId);
 			
 			Project project = projectManager.getProject(sched.getProjectId());
@@ -231,14 +231,38 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 		int min = Integer.parseInt(duration.split(":")[1]);
 		return Minutes.minutes(min+hour*60).toPeriod();
 	}
-
+  
+  private void ajaxFetchSchedule(HttpServletRequest req, 
+      HashMap<String, Object> ret, User user) throws ServletException {
+		
+		int projectId = getIntParam(req, "projectId");
+	  String flowId = getParam(req, "flowId");	
+		try {
+      Schedule schedule = scheduleManager.getSchedule(
+					projectId, flowId);
+    
+			if (schedule != null) {
+				Map<String, String> jsonObj = new HashMap<String, String>();
+				jsonObj.put("scheduleId", Integer.toString(schedule.getScheduleId()));
+				jsonObj.put("submitUser", schedule.getSubmitUser());
+				jsonObj.put("firstSchedTime", 
+						utils.formatDateTime(schedule.getFirstSchedTime()));
+				jsonObj.put("nextExecTime", 
+						utils.formatDateTime(schedule.getNextExecTime()));
+				jsonObj.put("period", utils.formatPeriod(schedule.getPeriod()));
+				ret.put("schedule", jsonObj);
+			}
+		}
+    catch (ScheduleManagerException e) {
+      ret.put("error", e);
+		}
+	}
+	
 	private void ajaxSlaInfo(HttpServletRequest req, HashMap<String, Object> ret, User user) {
 		int scheduleId;
 		try {
 			scheduleId = getIntParam(req, "scheduleId");
-			
 			Schedule sched = scheduleManager.getSchedule(scheduleId);
-			
 			Project project = getProjectAjaxByPermission(ret, sched.getProjectId(), user, Type.READ);
 			if (project == null) {
 				ret.put("error", "Error loading project. Project " + sched.getProjectId() + " doesn't exist");
@@ -300,7 +324,6 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 		} catch (ScheduleManagerException e) {
 			ret.put("error", e);
 		}
-		
 	}
 
 	protected Project getProjectAjaxByPermission(Map<String, Object> ret, int projectId, User user, Permission.Type type) {
@@ -318,7 +341,7 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 		
 		return null;
 	}
-	
+
 	private void handleGetAllSchedules(HttpServletRequest req, HttpServletResponse resp,
 			Session session) throws ServletException, IOException{
 		
@@ -371,7 +394,7 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 				if (action.equals("scheduleFlow")) {
 					ajaxScheduleFlow(req, ret, session.getUser());
 				}
-				else if(action.equals("removeSched")){
+				else if (action.equals("removeSched")){
 					ajaxRemoveSched(req, ret, session.getUser());
 				}
 			}
@@ -384,9 +407,8 @@ public class ScheduleServlet extends LoginAbstractAzkabanServlet {
 			this.writeJSON(resp, ret);
 		}
 	}
-
+	
 	private void ajaxLoadFlows(HttpServletRequest req, HashMap<String, Object> ret, User user) throws ServletException {
-		
 		List<Schedule> schedules;
 		try {
 			schedules = scheduleManager.getSchedules();

diff --git a/src/java/azkaban/webapp/servlet/velocity/alerts.vm b/src/java/azkaban/webapp/servlet/velocity/alerts.vm
new file mode 100644
index 0000000..d75fe4d
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/alerts.vm
@@ -0,0 +1,21 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+	#if ($error_message != "null")
+			<div class="alert alert-danger">$error_message</div>
+	#elseif ($success_message != "null")
+			<div class="alert alert-success">$success_message</div>
+	#end

diff --git a/src/java/azkaban/webapp/servlet/velocity/errormsg.vm b/src/java/azkaban/webapp/servlet/velocity/errormsg.vm
new file mode 100644
index 0000000..d19f6e5
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/errormsg.vm
@@ -0,0 +1,20 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+			<div class="alert alert-danger">
+        <h4>Error</h4>
+        $errorMsg
+      </div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
index 5c4f1d4..4842f61 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executingflowpage.vm
@@ -15,26 +15,23 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<script type="text/javascript" src="${context}/js/moment.min.js"></script>
+		<script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.common.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.job.status.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.exflow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.job.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.svg.graph.view.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.exflow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -47,128 +44,146 @@
 			var flowId = "${flowid}";
 			var execId = "${execid}";
 		</script>
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
+		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban-svg.css">
+		<link rel="stylesheet" type="text/css" href="${context}/css/bootstrap-datetimepicker.css" />
 	</head>
 	<body>
-#set($current_page="all")
-#set($show_schedule="false")
-
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
-		<div class="content">
-#if($errorMsg)
-				<div class="box-error-message">$errorMsg</div>
+
+#set ($current_page="all")
+#set ($show_schedule="false")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-				<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-				<div class="box-success-message">$success_message</div>
-#end
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
 
-				<div id="all-jobs-content">
-					<div class="section-hd flow-header">
-						<h2><a href="${context}/executor?execid=${execid}">Flow Execution <span>$execid</span></a></h2>
-						<div class="section-sub-hd">
-							<h4><a href="${context}/manager?project=${projectName}">Project <span>$projectName</span></a></h4>
-							<h4 class="separator">&gt;</h4>
-							<h4><a href="${context}/manager?project=${projectName}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
-							<h4 class="separator">&gt;</h4>
-							<h4><a href="${context}/executor?execid=${execid}">Execution <span>$execid</span></a></h4>
-						</div>
-					</div>
-					
-					<div id="headertabs" class="headertabs">
-						<ul>
-							<li><a id="graphViewLink" href="#graph">Graph</a></li>
-							<li class="lidivider">|</li>
-							<li><a id="jobslistViewLink" href="#jobslist">Job List</a></li>
-							<li class="lidivider">|</li>
-							<li><a id="flowLogViewLink" href="#log">Flow Log</a></li>
-						</ul>
-						<ul id="actionsBtns" class="buttons">
-							<li><div id="pausebtn" class="btn2">Pause</div></li>
-							<li><div id="resumebtn" class="btn2">Resume</div></li>
-							<li><div id="cancelbtn" class="btn6">Cancel</div></li>
-							<li><div id="retrybtn" class="btn1">Retry Failed</div></li>
-							<li><div id="executebtn" class="btn1">Prepare Execution</div></li>
-						</ul>
-					</div>
-					<div id="graphView">
-						<div class="relative">
-							<div id="jobList" class="jobList">
-								<div id="filterList" class="filterList">
-									<input id="filter" class="filter" placeholder="  Job Filter" />
-								</div>
-								<div id="list" class="list">
-								</div>
-								<div id="resetPanZoomBtn" class="btn5 resetPanZoomBtn" >Reset Pan Zoom</div>
-							</div>
-							<div id="svgDiv" class="svgDiv">
-								<svg id="svgGraph" class="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed" >
-								</svg>
+
+	## Page header
+
+		<div class="az-page-header">
+			<div class="container" id="flow-status">
+        <div class="row">
+          <div class="col-lg-7">
+            <h1>
+              <a href="${context}/executor?execid=${execid}">
+                Flow Execution <small>$execid <span id="flowStatus">-</span></small>
+              </a>
+            </h1>
+          </div>
+          <div class="col-lg-5">
+            <div class="az-exflow-stats">
+              <div class="col-md-5">
+                <p><strong>Submit User</strong> <span id="submitUser">-</span></p>
+                <p><strong>Duration</strong> <span id="duration">-</span></p>
+              </div>
+              <div class="col-md-7">
+                <p><strong>Start Time</strong> <span id="startTime">-</span></p>
+                <p><strong>End Time</strong> <span id="endTime">-</span></p>
+              </div>
+            </div>
+            <div class="clearfix"></div>
+          </div>
+        </div>
+			</div>
+		</div>
+
+		<div class="container">
+
+	## Breadcrumb
+
+			<ol class="breadcrumb">
+				<li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
+				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+				<li class="active"><strong>Execution</strong> $execid</li>
+			</ol>
+		
+	## Tabs and buttons.
+
+			<ul class="nav nav-tabs" id="headertabs">
+				<li id="graphViewLink"><a href="#graph">Graph</a></li>
+				<li id="jobslistViewLink"><a href="#jobslist">Job List</a></li>
+				<li id="flowLogViewLink"><a href="#log">Flow Log</a></li>
+				<li class="nav-button pull-right"><button type="button" id="pausebtn" class="btn btn-primary">Pause</button></li>
+				<li class="nav-button pull-right"><button type="button" id="resumebtn" class="btn btn-primary">Resume</button></li>
+				<li class="nav-button pull-right"><button type="button" id="cancelbtn" class="btn btn-danger">Cancel</button></li>
+				<li class="nav-button pull-right"><button type="button" id="retrybtn" class="btn btn-success">Retry Failed</button></li>
+				<li class="nav-button pull-right"><button type="button" id="executebtn" class="btn btn-success">Prepare Execution</button></li>
+			</ul>
+
+	## Graph View
+
+	#parse ("azkaban/webapp/servlet/velocity/flowgraphview.vm")
+	
+	## Job List View
+
+			<div class="row" id="jobListView">
+				<div class="col-lg-12">
+					<table class="table table-striped table-bordered table-condensed table-hover executions-table">
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th class="timeline">Timeline</th>
+								<th class="date">Start Time</th>
+								<th class="date">End Time</th>
+								<th class="elapse">Elapsed</th>
+								<th class="status">Status</th>
+								<th class="logs">Details</th>
+							</tr>
+						</thead>
+						<tbody id="executableBody">
+						</tbody>
+					</table>
+				</div>
+			</div>
+
+	## Flow Log View
+
+			<div class="row" id="flowLogView">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<div class="pull-right">
+								<button type="button" id="updateLogBtn" class="btn btn-xs btn-info">Refresh</button>
 							</div>
+							Flow log
 						</div>
-					</div>
-					<div id="jobListView" class="executionInfo">
-						<table>
-							<thead>
-								<tr>
-									<th>Name</th>
-									<th class="timeline">Timeline</th>
-									<th class="date">Start Time</th>
-									<th class="date">End Time</th>
-									<th class="elapse">Elapsed</th>
-									<th class="status">Status</th>
-									<th class="logs">Logs</th>
-								</tr>
-							</thead>
-							<tbody id="executableBody">
-							</tbody>
-						</table>
-					</div>
-					<div id="flowLogView" class="logView">
-						<div class="logHeader"><div class="logButtonRow"><div id="updateLogBtn" class="btn7">Refresh</div></div></div>
-						<div class="logViewer">
-							<pre id="logSection" class="log"></pre>
+						<div class="panel-body log-viewer">
+							<pre id="logSection"></pre>
 						</div>
 					</div>
 				</div>
-				
-				<div id="flow-status">
-					<table class="status">
-						<tr><td class="first">Status</td><td id="flowStatus">-</td></tr>
-						<tr><td class="first">Submit User</td><td id="submitUser">-</td></tr>
-					</table>
-					<table class="time">
-						<tr><td class="first">Start Time</td><td id="startTime">-</td></tr>
-						<tr><td class="first">End Time</td><td id="endTime">-</td></tr>
-						<tr><td class="first">Duration</td><td id="duration">-</td></tr>
-					</table>
+			</div>
+	
+	## Error message message dialog.
+
+			<div class="modal" id="messageDialog">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header" id="messageTitle">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Error</h4>
+						</div>
+						<div class="modal-body" id="messageDiv">
+							<p id="messageBox"></p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" data-dismiss="modal">Dismiss</button>
+						</div>
+					</div>
 				</div>
+			</div>
 
-#parse( "azkaban/webapp/servlet/velocity/flowexecutionpanel.vm" )
-#end
-		</div>
+      <div id="contextMenu"></div>
 
-		
-		<div id="messageDialog" class="modal">
-			<h3 id="messageTitle">Error</h3>
-			<div class="messageDiv">
-				<p id="messageBox"></p>
-			</div>
-		</div>
-		
-		<div id="invalid-session" class="modal">
-			<h3>Invalid Session</h3>
-			<p>Session has expired. Please re-login.</p>
-			<div class="actions">
-				<a class="yes btn2" id="login-btn" href="#">Re-login</a>
-			</div>
-		</div>
-		
-		<div id="contextMenu">
+	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+	#parse ("azkaban/webapp/servlet/velocity/flowexecutionpanel.vm")
+	#parse ("azkaban/webapp/servlet/velocity/messagedialog.vm")
+#end
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		</div>
-		#parse( "azkaban/webapp/servlet/velocity/messagedialog.vm" )
 	</body>
 </html>
-

diff --git a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
index f416d20..c13dd91 100644
--- a/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/executionspage.vm
@@ -15,16 +15,13 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse("azkaban/webapp/servlet/velocity/style.vm")
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+	
+		<script type="text/javascript" src="${context}/js/azkaban.executions.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -34,103 +31,126 @@
 		</script>
 	</head>
 	<body>
-		#set($current_page="executing")
-#parse("azkaban/webapp/servlet/velocity/nav.vm")
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2>Executing Flows</h2>
-				</div>
+#set ($current_page="executing")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+		</div>
+
+## Page header.
+
+		<div class="az-page-header">
+			<div class="container">
+        <h1><a href="${context}/executor">Executing Flows</a></h1>
 			</div>
-			
-			<h3 class="subhead">Currently Running Jobs</h3>
-			<div class="executionInfo">
-				<table id="executingJobs">
-					<thead>
-						<tr>
-							<th class="execid">Execution Id</th>
-							<th>Flow</th>
-							<th>Project</th>
-							<th class="user">User</th>
-							<th class="user">Proxy User</th>
-							<th class="date">Start Time</th>
-							<th class="date">End Time</th>
-							<th class="elapse">Elapsed</th>
-							<th class="status">Status</th>
-							<th class="action">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-#if($runningFlows)
-	#foreach($flow in $runningFlows)
-						<tr class="row" >
-							<td class="tb-name">
-								<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
-							</td>
-							<td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
-							<td>
-								<a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
-							</td>
-							<td>${flow.submitUser}</td>
-							<td>${flow.proxyUsers}</td>
-							<td>$utils.formatDate(${flow.startTime})</td>
-							<td>$utils.formatDate(${flow.endTime})</td>
-							<td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
-							<td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
-							<td></td>
-						</tr>
+		</div>
+
+## Page Content
+
+		<div class="container">
+      <ul class="nav nav-tabs" id="header-tabs">
+        <li id="currently-running-view-link"><a href="#currently-running">Currently Running</a></li>
+        <li id="recently-finished-view-link"><a href="#recently-finished">Recently Finished</a></li>
+      </ul>
+
+			<div class="row" id="currently-running-view">
+				<div class="col-lg-12">
+          <table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
+            <thead>
+              <tr>
+                <th class="execid">Execution Id</th>
+                <th>Flow</th>
+                <th>Project</th>
+                <th class="user">User</th>
+                <th class="user">Proxy User</th>
+                <th class="date">Start Time</th>
+                <th class="date">End Time</th>
+                <th class="elapse">Elapsed</th>
+                <th class="status">Status</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+#if ($runningFlows)
+	#foreach ($flow in $runningFlows)
+              <tr>
+                <td class="tb-name">
+                  <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
+                </td>
+                <td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
+                <td>
+                  <a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
+                </td>
+                <td>${flow.submitUser}</td>
+                <td>${flow.proxyUsers}</td>
+                <td>$utils.formatDate(${flow.startTime})</td>
+                <td>$utils.formatDate(${flow.endTime})</td>
+                <td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
+                <td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
+                <td></td>
+              </tr>
 	#end
 #else
-						<tr><td></td><td class="last">No Executing Flows</td></tr>
+              <tr>
+                <td colspan="10">No Executing Flows</td>
+              </tr>
 #end
-					</tbody>
-				</table>
-			</div>
-			<h3 class="subhead">Recently Finished Jobs</h3>
-			<div class="executionInfo">
-				<table id="recentlyFinished">
-					<thead>
-						<tr>
-							<th class="execid">Execution Id</th>
-							<th>Flow</th>
-							<th>Project</th>
-							<th class="user">User</th>
-							<th class="user">Proxy User</th>
-							<th class="date">Start Time</th>
-							<th class="date">End Time</th>
-							<th class="elapse">Elapsed</th>
-							<th class="status">Status</th>
-							<th class="action">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-#if($recentlyFinished.isEmpty())
-	#foreach($flow in $recentlyFinished)
-						<tr class="row" >
-							<td class="tb-name execId">
-								<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
-							</td>
-							<td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
-							<td>
-								<a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
-							</td>
-							<td>${flow.submitUser}</td>
-							<td>${flow.proxyUsers}</td>
-							<td>$utils.formatDate(${flow.startTime})</td>
-							<td>$utils.formatDate(${flow.endTime})</td>
-							<td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
-							<td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
-							<td></td>
-						</tr>
+            </tbody>
+          </table>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
+
+			<div class="row" id="recently-finished-view">
+				<div class="col-lg-12">
+          <table id="recentlyFinished" class="table table-striped table-bordered table-hover table-condensed executions-table">
+            <thead>
+              <tr>
+                <th class="execid">Execution Id</th>
+                <th>Flow</th>
+                <th>Project</th>
+                <th class="user">User</th>
+                <th class="user">Proxy User</th>
+                <th class="date">Start Time</th>
+                <th class="date">End Time</th>
+                <th class="elapse">Elapsed</th>
+                <th class="status">Status</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+#if ($recentlyFinished.isEmpty())
+	#foreach ($flow in $recentlyFinished)
+              <tr>
+                <td class="tb-name execId">
+                  <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
+                </td>
+                <td><a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})&flow=${flow.flowId}">${flow.flowId}</a></td>
+                <td>
+                  <a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
+                </td>
+                <td>${flow.submitUser}</td>
+                <td>${flow.proxyUsers}</td>
+                <td>$utils.formatDate(${flow.startTime})</td>
+                <td>$utils.formatDate(${flow.endTime})</td>
+                <td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
+                <td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
+                <td></td>
+              </tr>
 	#end
 #else
-						<tr><td></td><td class="last">No Recently Finished</td></tr>
+              <tr>
+                <td colspan="10">No Recently Finished</td>
+              </tr>
 #end	
-					</tbody>
-				</table>
-			</div>
-		</div>
+            </tbody>
+          </table>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
+		
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
index f338e2d..2863c89 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowexecutionpanel.vm
@@ -14,172 +14,209 @@
  * the License.
 *#
 
-<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
-<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
-<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
-<script type="text/javascript" src="${context}/js/azkaban.common.utils.js"></script>
-<script type="text/javascript" src="${context}/js/azkaban.svg.graph.view.js"></script>
-<script type="text/javascript" src="${context}/js/azkaban.flow.execute.view.js"></script>
-
-<div id="modalBackground" class="modalBackground2">
-<div id="execute-flow-panel" class="modal modalContainer2">
-	<h3 id="execute-flow-panel-title"></h3>
-	<a title="Close" class="modal-close closeExecPanel">x</a>
-	<div id="execute-message" class="message">
-	</div>
-	
-	<div class="panel">
-		<div id="executionGraphOptions">
-			<div id="graphOptions" class="sideMenu">
-				<h3 id="flowOption" viewpanel="svgDivCustom">Flow View</h3>
-				<div>
-					<p>Right click on the jobs to disable and enable jobs in the flow.</p>
-				</div>
-				<h3 viewpanel="notificationPanel">Notification</h3>
-				<div>
-					<p>Change the addresses where success and failure emails will be sent.</p>
-				</div>
-				<h3 viewpanel="failureOptions">Failure Options</h3>
-				<div>
-					<p>Select flow behavior when a failure is detected.</p>
-				</div>
-				<h3 viewpanel="concurrentPanel">Concurrent</h3>
-				<div>
-					<p>Change the behavior of the flow if it is already running.</p>
-				</div>
-				<h3 viewpanel="flowParametersPanel">Flow Parameters</h3>
-				<div>
-					<p>Add temporary flow parameters that are used to override global properties for each job.</p>
-				</div>
-			</div>
-		</div>
-		<div id="executionGraphOptionsPanel" class="rightPanel">
-			<div id="svgDivCustom" class="svgDiv sidePanel" >
-				<svg class="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed" >
-				</svg>
-			</div>
-			<div id="notificationPanel" class="sidePanel">
-				<div>
-					<h4>Notify on Failure</h4>
-					<p>On a job failure, notify on either the first failure, and/or when the failed flow finishes.</p>
-					<input id="notifyFailureFirst" class="checkbox" type="checkbox" name="notify" value="first" checked /> <label for="notify">First Failure</label>
-					<input id="notifyFailureLast" class="checkbox" type="checkbox" name="notify" value="last"></input> <label for="notify">Flow Finished</label>
-					
-
-					<h4>Failure Emails</h4>
-					<div>
-						<input id="overrideFailureEmails" type="checkbox" name="overrideFailureEmails" value="overrideFailureEmails" />
-						<label for="overrideFailureEmails">Override flow email settings</label>
-					</div>
-					<p>Notify these addresses on failure. Comma, space or semi-colon delimited list.</p>
-					<textarea id="failureEmails"></textarea>
-				</div>
-			
-				<div>
-					<h4>Success Emails</h4>
-					<div>
-						<input id="overrideSuccessEmails" type="checkbox" name="overrideSuccessEmails" value="overrideSuccessEmails" />
-						<label for="overrideSuccessEmails">Override flow email settings</label>
-					</div>
-					<p>Notify when the flow finishes successfully. Comma, space or semi-colon delimited list.</p>
-					<textarea id="successEmails"></textarea>
-				</div>
-			</div> 
-			<div id="failureOptions" class="failureOptions sidePanel">
-				<h4>Failure Options</h4>
-				<p>When a failure first occurs in the flow, select the execution behavior.</p>
-				<ul>
-					<li><span class="bold">Finish Current Running</span> finishes only the currently running jobs. It will not start any new jobs.</p></li>
-					<li><span class="bold">Cancel All</span> immediately kills all jobs and fails the flow.</p></li>
-					<li><span class="bold">Finish All Possible</span> will keep executing jobs as long as its dependencies are met.</p></li>
-				</ul>
-
-				<select id="failureAction" name="failureAction">
-					<option value="finishCurrent">Finish Current Running</option>
-					<option value="cancelImmediately">Cancel All</option>
-					<option value="finishPossible">Finish All Possible</option>
-				</select>
-			</div>
-			<div id="concurrentPanel" class="sidePanel">
-				<h4>Concurrent Execution Options</h4>
-				<p>If the flow is currently running, these are the options that can be set.</p>
-
-				<input id="skip" class="radio" type="radio" name="concurrent" value="skip" checked /><label for="skip">Skip Execution</label>
-				<p>Do not run flow if it is already running.</p>
-				
-				<input id="ignore" class="radio" type="radio" name="concurrent" value="ignore" checked /><label for="ignore">Run Concurrently</label>
-				<p>Run the flow anyways. Previous execution is unaffected.</p>
-
-				<input id="pipeline" class="radio" type="radio" name="concurrent" value="pipeline" /><label for="pipeline">Pipeline</label>
-				<select id="pipelineLevel" name="pipelineLevel">
-					<option value="1">Level 1</option>
-					<option value="2">Level 2</option>
-				</select>
-				<p>Pipeline the flow, so the current execution will not be overrun.</p>
-				<ul>
-					<li>Level 1: block job A until the previous flow job A has completed.</li>
-					<li>Level 2: block job A until the previous flow job A's children have completed.</li>
-				</ul>
-				<!--
-				<input id="queue" class="radio" type="radio" name="concurrent" value="queue" /><label for="queue">Queue Job</label>
-				<select id="queueLevel" name="queueLevel">
-					<option value="1">1</option>
-					<option value="2">2</option>
-				</select>
-				<p>Queue up to 2. Wait until the previous execution has completed before running.</p>
-				-->
-			</div>
-			<div id="flowParametersPanel" class="sidePanel">
-				<h4>Flow Property Override</h4>
-				<div id="editTable" class="tableDiv">
-					<table>
-						<thead>
-							<tr>
-								<th>Name</th>
-								<th>Value</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr id="addRow" class="addRow"><td id="addRow-col" colspan="2"><span class="addIcon"></span><a>Add Row</a></td></tr>
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-	</div>
-	
-	<div class="actions">
-		#if(!$show_schedule || $show_schedule == 'true') 
-		<a class="btn2" id="schedule-btn">Schedule</a>
-		#end
-		
+			<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
+			<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
+			<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
+			<script type="text/javascript" src="${context}/js/azkaban.common.utils.js"></script>
+			<script type="text/javascript" src="${context}/js/azkaban.svg.graph.view.js"></script>
+			<script type="text/javascript" src="${context}/js/azkaban.flow.execute.view.js"></script>
+
+			<div class="modal modal-wide" id="execute-flow-panel">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="execute-flow-panel-title"></h4>
+						</div><!-- /modal-header -->
+						<div class="modal-body row">
+							<div class="col-md-4">
+								<ul class="nav nav-pills nav-stacked" id="graph-options">
+									<li id="flow-option" viewpanel="svg-div-custom">
+										<a href="#">Flow View</a>
+										<div class="menu-caption">Right click on the jobs to disable and enable jobs in the flow.</div>
+									</li>
+									<li viewpanel="notification-panel">
+										<a href="#">Notification</a>
+										<div class="menu-caption">Change the address where success and failure emails will be sent.</div>
+									</li>
+									<li viewpanel="failure-options">
+										<a href="#">Failure Options</a>
+										<div class="menu-caption">Select flow behavior when a failure is detected.</div>
+									</li>
+									<li viewpanel="concurrent-panel">
+										<a href="#">Concurrent</a>
+										<div class="menu-caption">Change the behavior of the flow if it is already running.</div>
+									</li>
+									<li viewpanel="flow-parameters-panel">
+										<a href="#">Flow Parameters</a>
+										<div class="menu-caption">Add temporary flow parameters that are used to override global settings for each job.</div>
+									</li>
+								</ul>
+							</div><!-- /col-md-4 -->
+							<div class="col-md-8">
+								<div id="execution-graph-options-panel">
+
+## SVG graph panel.
+
+									<div id="svg-div-custom" class="side-panel">
+										<svg id="flow-executing-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
+										</svg>
+									</div>
+
+## Notification panel.
+
+									<div id="notification-panel" class="side-panel">
+										<h4>Notify on failure</h4>
+										<p>On a job failure, notify on either the first failure, and/or when the failed flow finishes.</p>
+										<hr>
+										<label class="checkbox-inline">
+											<input id="notify-failure-first" type="checkbox" name="notify" value="first">First failure
+										</label>
+										<label class="checkbox-inline">
+											<input id="notify-failure-last" type="checkbox" name="notify" value="last">Flow finished
+										</label>
+
+										<h4>Failure Emails</h4>
+										<div class="checkbox">
+											<label>
+												<input type="checkbox" id="override-failure-emails" name="overrideFailureEmails" value="overrideFailureEmails">
+												Override flow email settings.
+											</label>
+										</div>
+										<label>Notify these addresses on failure. Comma, space, or semi-colon delimited list.</label>
+										<textarea class="form-control" rows="3" id="failure-emails"></textarea>
+
+										<h4>Success Emails</h4>
+										<div class="checkbox">
+											<label>
+												<input type="checkbox" name="overrideSuccessEmails" value="overrideSuccessEmails">
+												Override flow email settings.
+											</label>
+										</div>
+										<label>Notify when the flow finishes successfully. Comma, space, or semi-colon delimited list.</label>
+										<textarea class="form-control" rows="3" id="success-emails"></textarea>
+									</div>
+
+## Failure options panel.
+
+									<div id="failure-options" class="side-panel">
+										<h4>Failure Options</h4>
+										<p>When a failure first occurs in the flow, select the execution behavior.</p>
+										<hr>
+										<ul>
+											<li><strong>Finish Current Running</strong> finishes only the currently running job. It will not start any new jobs.</li>
+											<li><strong>Cancel All</strong> immediately kills all jobs and fails the flow.</li>
+											<li><strong>Finish All Possible</strong> will keep executing jobs as long as its dependencies are met.</li>
+										</ul>
+										<select id="failure-action" name="failureAction">
+											<option value="finishCurrent">Finish Current Running</option>
+											<option value="cancelImmediately">Cancel All</option>
+											<option value="finishPossible">Finish All Possible</option>
+										</select>
+									</div>
+
+## Concurrent execution options panel.
+
+									<div id="concurrent-panel" class="side-panel">
+										<h4>Concurrent Execution Options</h4>
+										<p>If the flow is currently running, these are the options that can be set.</p>
+										<hr>
+										<div class="radio">
+											<label>
+												<input type="radio" id="skip" name="concurrent" value="skip" checked="checked">
+												Skip Execution
+											</label>
+											<span class="help-block">Do not run flow if it is already running.</span>
+										</div>
+
+										<div class="radio">
+											<label>
+												<input type="radio" id="ignore" name="concurrent" value="ignore">
+												Run Concurrently
+											</label>
+											<span class="help-block">Do not run flow if it is already running.</span>
+										</div>
+
+										<div class="radio">
+											<label>
+												<input type="radio" id="pipeline" name="concurrent" value="pipeline">
+												Pipeline
+											</label>
+											<select id="pipelineLevel" name="pipelineLevel">
+												<option value="1">Level 1</option>
+												<option value="2">Level 2</option>
+											</select>
+											<span class="help-block">
+												Pipeline the flow, so the current execution will not be overrun.
+												<ul>
+													<li>Level 1: block job A until the previous flow job A has completed.</li>
+													<li>Level 2: block job A until the previous flow job A's children have completed.</li>
+												</li>
+											</span>
+										</div>
+									</div>
+
+## Flow parameters panel
+
+									<div id="flow-parameters-panel" class="side-panel">
+										<h4>Flow Property Override</h4>
+										<hr>
+										<div id="editTable">
+											<table class="table table-striped">
+												<thead>
+													<tr>
+														<th>Name</th>
+														<th>Value</th>
+													</tr>
+												</thead>
+												<tbody>
+													<tr id="addRow" class="addRow">
+														<td id="addRow-col" colspan="2">
+															<button type="button" class="btn btn-success btn-xs">Add Row</button>
+														</td>
+													</tr>
+												</tbody>
+											</table>
+										</div>
+									</div>
+
+								</div><!-- /execution-graph-options-panel -->
+							</div><!-- /col-md-8 -->
+						</div><!-- /modal-body -->
+
+						<div class="modal-footer">
+#if (!$show_schedule || $show_schedule == 'true') 
+              <div class="pull-left">
+                <button type="button" class="btn btn-success" id="schedule-btn">Schedule</button>
+              </div>
+#end
 #*
-		#if( $triggerPlugins.size() > 0 ) 
-			#foreach( $triggerPlugin in $triggerPlugins )
-			<a class="btn2" id=set-$triggerPlugin.pluginName>$triggerPlugin.pluginName</a>
-			#end
-		#end
+#if ($triggerPlugins.size() > 0)
+	#foreach ($triggerPlugin in $triggerPlugins)
+							<button type="button" class="btn btn-default" id=set-$triggerPlugin.pluginName>$triggerPlugin.pluginName</button>
+	#end
+#end
 *#
-		<a class="yes btn1" id="execute-btn">Execute</a>
-		<a class="no simplemodal-close btn3 closeExecPanel">Cancel</a>
-	</div>
-</div>
-</div>
-
-#if(!$show_schedule || $show_schedule == 'true') 
-#parse( "azkaban/webapp/servlet/velocity/schedulepanel.vm" )
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success" id="execute-btn">Execute</button>
+						</div><!-- /modal-footer -->
+					</div><!-- /modal-content -->
+				</div><!-- /modal-dialog -->
+			</div><!-- /modal -->
+
+#if (!$show_schedule || $show_schedule == 'true') 
+	#parse ("azkaban/webapp/servlet/velocity/schedulepanel.vm")
 #end
 
 #*
-#if( $triggerPlugins.size() > 0 ) 
-	#foreach( $triggerPlugin in $triggerPlugins )
-		#set ($prefix = $triggerPlugin.pluginName )
-		#set ($webpath = $triggerPlugin.pluginPath )
-		#parse( $triggerPlugin.inputPanelVM )
+#if ($triggerPlugins.size() > 0)
+	#foreach ($triggerPlugin in $triggerPlugins)
+		#set ($prefix = $triggerPlugin.pluginName)
+		#set ($webpath = $triggerPlugin.pluginPath)
+		#parse ($triggerPlugin.inputPanelVM)
 	#end
 #end
 *#
 
-<div id="contextMenu">
-	
-</div>
+			<div id="contextMenu"></div>
+

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
new file mode 100644
index 0000000..5954e96
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/flowgraphview.vm
@@ -0,0 +1,38 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+
+ 	## Graph view.
+ 
+			<div class="row" id="graphView">
+				<div class="col-lg-4">
+					<div class="panel panel-default" id="jobList">
+						<div class="panel-heading">
+							<input id="filter" type="text" placeholder="Job Filter" class="form-control">
+						</div>
+						<div id="list" class="list-group"></div>
+						<div class="panel-footer">
+							<button type="button" class="btn btn-sm btn-default" id="resetPanZoomBtn">Reset Pan Zoom</button>
+						</div>
+					</div>
+				</div>
+				<div class="col-lg-8">
+					<div id="svgDiv" class="well well-clear well-sm">
+						<svg id="flow-graph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed">
+						</svg>
+					</div>
+				</div>
+			</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
index cde432c..332761d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/flowpage.vm
@@ -15,25 +15,25 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<script type="text/javascript" src="${context}/js/moment.min.js"></script>
+		<script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
 		
+    <script type="text/javascript" src="${context}/js/dust-core-2.2.2.min.js"></script>
+		<script type="text/javascript" src="${context}/js/flowsummary.js"></script>
+
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.common.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.layout.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.flow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.job.view.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.flow.graph.view.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.flow.view.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -47,107 +47,103 @@
 			var flowId = "${flowid}";
 			var execId = null;
 		</script>
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
+		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban-svg.css" />
+		<link rel="stylesheet" type="text/css" href="${context}/css/bootstrap-datetimepicker.css" />
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
-		<div class="content">
-#if($errorMsg)
-				<div class="box-error-message">$errorMsg</div>
+
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-				<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-				<div class="box-success-message">$success_message</div>
-#end
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+	
+	## Page header.
 
-				<div id="all-jobs-content">
-					<div class="section-hd flow-header">
-						<h2><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <span>$flowid</span></a></h2>
-						<div class="section-sub-hd">
-							<h4><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h4>
-							<h4 class="separator">&gt;</h4>
-							<h4><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
-						</div>
-						
-						<div id="executebtn" class="btn1">Schedule / Execute Flow</div>
-					</div>
-					
-					<div id="headertabs" class="headertabs">
-						<ul>
-							<li><a id="graphViewLink" href="#graph">Graph</a></li>
-							<li class="lidivider">|</li>
-							<li><a id="executionsViewLink" href="#executions">Executions</a></li>
-						</ul>
-					</div>
-					<div id="graphView">
-						<div class="relative">
-							<div id="jobList" class="jobList">
-								<div id="filterList" class="filterList">
-									<input id="filter" class="filter" placeholder="  Job Filter" />
-								</div>
-								<div id="list" class="list">
-								</div>
-								<div id="resetPanZoomBtn" class="btn5 resetPanZoomBtn" >Reset Pan Zoom</div>
-							</div>
-							<div id="svgDiv" class="svgDiv">
-								<svg id="svgGraph" class="svgGraph" xmlns="http://www.w3.org/2000/svg" version="1.1" shape-rendering="optimize-speed" text-rendering="optimize-speed" >
-								</svg>
-							</div>
-						</div>
+		<div class="az-page-header">
+			<div class="container">
+				<div class="row">
+					<div class="col-lg-6">
+						<h1><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <small>$flowid</small></a></h1>
 					</div>
-					<div id="executionsView">
-						<div id="executionDiv" class="all-jobs executionInfo">
-							<table id="execTable">
-								<thead>
-									<tr>
-										<th>Execution Id</th>
-										<th>User</th>
-										<th class="date">Start Time</th>
-										<th class="date">End Time</th>
-										<th class="elapse">Elapsed</th>
-										<th class="status">Status</th>
-										<th class="action">Action</th>
-									</tr>
-								</thead>
-								<tbody id="execTableBody">
-								</tbody>
-							</table>
-						</div>
-					
-						<div id="pageSelection">
-							<ul>
-								<li id="previous" class="first"><a><span class="arrow">&larr;</span>Previous</a></li>
-								<li id="page1"><a href="#page1">1</a></li>
-								<li id="page2"><a href="#page2">2</a></li>
-								<li id="page3"><a href="#page3">3</a></li>
-								<li id="page4"><a href="#page4">4</a></li>
-								<li id="page5"><a href="#page5">5</a></li>
-								<li id="next"><a>Next<span class="arrow">&rarr;</span></a></li>
-							</ul>
+					<div class="col-lg-6">
+						<div class="pull-right az-page-header-form">
+							<button type="button" class="btn btn-sm btn-success" id="executebtn">Schedule / Execute Flow</button>
 						</div>
+						<div class="clearfix"></div>
 					</div>
 				</div>
-		<!-- modal content -->
+			</div>
+		</div>
 
-				<div id="invalid-session" class="modal">
-					<h3>Invalid Session</h3>
-						<p>Session has expired. Please re-login.</p>
-						<div class="actions">
-							<a class="yes btn3" id="login-btn" href="#">Re-login</a>
-						</div>
+	## Breadcrumbs and tabs
+
+		<div class="container">
+      <ol class="breadcrumb">
+        <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+        <li class="active"><strong>Flow</strong> $flowid</li>
+      </ol>
+
+			<ul class="nav nav-tabs" id="headertabs">
+				<li id="graphViewLink"><a href="#graph">Graph</a></li>
+				<li id="executionsViewLink"><a href="#executions">Executions</a></li>
+				<li id="summaryViewLink"><a href="#summary">Summary</a></li>
+			</ul>
+					
+	## Graph view.
+
+	#parse ("azkaban/webapp/servlet/velocity/flowgraphview.vm")
+
+	## Executions view.
+
+			<div class="row" id="executionsView">
+				<div class="col-lg-12">
+					<table class="table table-striped table-bordered table-condensed table-hover" id="execTable">
+						<thead>
+							<tr>
+								<th>Execution Id</th>
+								<th>User</th>
+								<th class="date">Start Time</th>
+								<th class="date">End Time</th>
+								<th class="elapse">Elapsed</th>
+								<th class="status">Status</th>
+								<th class="action">Action</th>
+							</tr>
+						</thead>
+						<tbody id="execTableBody">
+						</tbody>
+					</table>
+					<ul id="pageSelection" class="pagination">
+						<li id="previous" class="first"><a><span class="arrow">&larr;</span>Previous</a></li>
+						<li id="page1"><a href="#page1">1</a></li>
+						<li id="page2"><a href="#page2">2</a></li>
+						<li id="page3"><a href="#page3">3</a></li>
+						<li id="page4"><a href="#page4">4</a></li>
+						<li id="page5"><a href="#page5">5</a></li>
+						<li id="next"><a>Next<span class="arrow">&rarr;</span></a></li>
+					</ul>
 				</div>
+			</div>
+
+	## Summary view.
+
+			<div class="row" id="summaryView">
+			</div><!-- /#summaryView -->
 
-#parse( "azkaban/webapp/servlet/velocity/flowexecutionpanel.vm" )
+			<div id="contextMenu">
+			</div>
 
+	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+	#parse ("azkaban/webapp/servlet/velocity/flowexecutionpanel.vm")
+	#parse ("azkaban/webapp/servlet/velocity/messagedialog.vm")
 #end
 
-		</div>
-		<div id="contextMenu">
-		</div>
-		#parse( "azkaban/webapp/servlet/velocity/messagedialog.vm" )
+#parse("azkaban/webapp/servlet/velocity/footer.vm")
+		</div><!-- /.container -->
 	</body>
-</html>
-
+</body>

diff --git a/src/java/azkaban/webapp/servlet/velocity/footer.vm b/src/java/azkaban/webapp/servlet/velocity/footer.vm
new file mode 100644
index 0000000..cf3f9e5
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/footer.vm
@@ -0,0 +1,20 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+			<hr>
+			<footer>
+				<p>Azkaban</p>
+			</footer>

diff --git a/src/java/azkaban/webapp/servlet/velocity/historypage.vm b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
index 8c833d2..8c02855 100644
--- a/src/java/azkaban/webapp/servlet/velocity/historypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/historypage.vm
@@ -15,103 +15,111 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>		
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<link rel="stylesheet" type="text/css" href="${context}/css/bootstrap-datetimepicker.css" />
+
+		<script type="text/javascript" src="${context}/js/moment.min.js"></script>
+		<script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.history.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
 			var timezone = "${timezone}";
 		</script>
-		
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-timepicker-addon.css" />
 	</head>
 	<body>
-		#set($current_page="history")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
-
-		#if($errorMsg)
-					<div class="box-error-message">$errorMsg</div>
-		#else
-			#if($error_message != "null")
-	                <div class="box-error-message">$error_message</div>
-			#elseif($success_message != "null")
-        	        <div class="box-success-message">$success_message</div>
-			#end
-		#end	
 		
+#set ($current_page="history")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2>History</h2>
-					<a id="adv-filter-btn" class="btn1 "  href="#">Advanced Filter</a>
-					<form id="search-form" method="get">
-						<input type="hidden" name="search" value="true">
-						<input type="submit" value="Quick Search" class="search-btn">
-						<input id="searchtextbox" type="text" placeholder="flow name containing ..." value=#if($search_term) ${search_term} #else "" #end class="search-input" name="searchterm">
-					</form>
-				</div>
-			</div>
-			
-			<div class="executionInfo">
-				<table id="executingJobs">
-					<thead>
-						<tr>
-							<th class="execid">Execution Id</th>
-							<th>Flow</th>
-							<th>Project</th>
-							<th>User</th>
-							<th class="date">Start Time</th>
-							<th class="date">End Time</th>
-							<th class="elapse">Elapsed</th>
-							<th class="status">Status</th>
-							<th class="action">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-#if(!$flowHistory.isEmpty())
-	#foreach($flow in $flowHistory)
-						<tr class="row" >
-							<td class="tb-name execId">
-								<a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
-							</td>
-							<td class="tb-name">
-								<a href="${context}/executor?execid=${flow.executionId}">${flow.flowId}</a>
-							</td>
-							<td>
-								<a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
-							</td>
-							<td>${flow.submitUser}</td>
-							<td>$utils.formatDate(${flow.startTime})</td>
-							<td>$utils.formatDate(${flow.endTime})</td>
-							<td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
-							<td><div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div></td>
-							<td></td>
-						</tr>
-	#end
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-						<tr><td class="last" colspan="9">No History Results Found</td></tr>
-#end
-					</tbody>
-				</table>
-				
-				<div id="pageSelection" class="nonjavascript">
-					<ul>
-		
-						#if($search)
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+  ## Page header.
+
+		<div class="az-page-header">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-6">
+            <h1><a href="${context}/history">History</a></h1>
+          </div>
+          <div class="col-lg-6">
+            <form id="search-form" method="get" class="form-inline az-page-header-form" role="form">
+              <input type="hidden" name="search" value="true">
+              <div class="form-group">
+                <div class="input-group">
+                  <input type="text" id="searchtextbox" placeholder="flow name containing ..." value=#if($search_term) ${search_term} #else "" #end class="form-control input-sm" name="searchterm">
+                  <span class="input-group-btn">
+                    <button class="btn btn-primary btn-sm">Quick Search</button>
+                    <button type="button" class="btn btn-success btn-sm" id="adv-filter-btn">Advanced Filter</button>
+                  </span>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+			</div>
+		</div>
+
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-12">
+          <table id="executingJobs" class="table table-striped table-bordered table-hover table-condensed executions-table">
+            <thead>
+              <tr>
+                <th class="execid">Execution Id</th>
+                <th>Flow</th>
+                <th>Project</th>
+                <th>User</th>
+                <th class="date">Start Time</th>
+                <th class="date">End Time</th>
+                <th class="elapse">Elapsed</th>
+                <th class="status">Status</th>
+                <th class="action">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+  #if (!$flowHistory.isEmpty())
+    #foreach ($flow in $flowHistory)
+              <tr>
+                <td class="tb-name execId">
+                  <a href="${context}/executor?execid=${flow.executionId}">${flow.executionId}</a>
+                </td>
+                <td class="tb-name">
+                  <a href="${context}/executor?execid=${flow.executionId}">${flow.flowId}</a>
+                </td>
+                <td>
+                  <a href="${context}/manager?project=$vmutils.getProjectName(${flow.projectId})">$vmutils.getProjectName(${flow.projectId})</a>
+                </td>
+                <td>${flow.submitUser}</td>
+                <td>$utils.formatDate(${flow.startTime})</td>
+                <td>$utils.formatDate(${flow.endTime})</td>
+                <td>$utils.formatDuration(${flow.startTime}, ${flow.endTime})</td>
+                <td>
+                  <div class="status ${flow.status}">$utils.formatStatus(${flow.status})</div>
+                </td>
+                <td></td>
+              </tr>
+    #end
+  #else
+              <tr>
+                <td class="last" colspan="9">No History Results Found</td>
+              </tr>
+  #end
+            </tbody>
+          </table>
+					<ul class="pagination" id="pageSelection">
+  #if ($search)
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}&search=true&searchterm=${search_term}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}&search=true&searchterm=${search_term}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}&search=true&searchterm=${search_term}">${page2.page}</a></li>
@@ -119,7 +127,7 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}&search=true&searchterm=${search_term}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}&search=true&searchterm=${search_term}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}&search=true&searchterm=${search_term}">Next<span class="arrow">&rarr;</span></a></li>
-						#elseif($advfilter)
+  #elseif($advfilter)
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page2.page}</a></li>
@@ -127,7 +135,7 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}&advfilter=true&projcontain=${projcontain}&flowcontain=${flowcontain}&usercontain=${usercontain}&status=${status}&begin=${begin}&end=${end}">Next<span class="arrow">&rarr;</span></a></li>
-						#else
+  #else
 						<li id="previous" class="first"><a href="${context}/history?page=${previous.page}&size=${previous.size}"><span class="arrow">&larr;</span>Previous</a></li>
 						<li id="page1" #if($page1.selected) class="selected" #end><a href="${context}/history?page=${page1.page}&size=${page1.size}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #end><a href="${context}/history?page=${page2.page}&size=${page2.size}">${page2.page}</a></li>
@@ -135,67 +143,84 @@
 						<li id="page4" #if($page4.selected) class="selected" #end><a href="${context}/history?page=${page4.page}&size=${page4.size}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #end><a href="${context}/history?page=${page5.page}&size=${page5.size}">${page5.page}</a></li>
 						<li id="next"><a href="${context}/history?page=${next.page}&size=${next.size}">Next<span class="arrow">&rarr;</span></a></li>
-						#end
-						
+  #end
 					</ul>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
+
+  ## Advanced Filter Modal.
+
+			<div class="modal" id="adv-filter">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Advanced Filter</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="adv-filter-error-msg">$error_msg</div>
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+									<label for="projcontain" class="col-sm-2 control-label">Project</label>
+									<div class="col-sm-10">
+										<input id="projcontain" type="text" placeholder="Project name containing ..." value="" class="form-control" name="projcontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="flowcontain" class="col-sm-2 control-label">Flow</label>
+									<div class="col-sm-10">
+										<input id="flowcontain" type="text" placeholder="Flow name containing ..." value="" class="form-control" name="flowcontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="usercontain" class="col-sm-2 control-label">User</label>
+									<div class="col-sm-10">
+										<input id="usercontain" type="text" placeholder="User name containing ..." value="" class="form-control" name="usercontain">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="status" class="col-sm-2 control-label">Status</label>
+									<div class="col-sm-10">
+										<select id="status" class="form-control">
+											<option value=0>All Status</option>
+											<option value=10>Ready</option>
+											<option value=20>Preapring</option>
+											<option value=30>Running</option>
+											<option value=40>Paused</option>
+											<option value=50>Succeed</option>
+											<option value=60>Killed</option>
+											<option value=70>Failed</option>
+											<option value=80>Failed Finishing</option>
+											<option value=90>Skipped</option>
+											<option value=100>Disabled</option>
+											<option value=110>Queued</option>
+										</select>
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="datetimebegin" class="col-sm-2 control-label">Between</label>
+									<div class="col-sm-4">
+										<input type="text" id="datetimebegin" value="" class="ui-datetime-container form-control"> 
+									</div>
+									<label for="datetimeend" class="col-sm-2 control-label control-label-center">and</label>
+									<div class="col-sm-4">
+										<input type="text" id="datetimeend" value="" class="ui-datetime-container form-control"> 
+									</div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button class="btn btn-success" id="filter-btn">Filter</button>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-		
-		<!-- modal content -->
-		<div id="adv-filter" class="modal">
-			<h3>Advanced Filter</h3>
-			<div id="errorMsg" class="box-error-message">$errorMsg</div>
 			
-			<div class="message">
-				<fieldset>
-					<dl>
-						<dt><label for="path" >Project Name</label></dt>
-						<dd><input id="projcontain" type="text" placeholder="project name containing ..." value = ""  class="filter-input" name="projcontain"/></dd>
-						<dt><label for="path">Flow Name</label></dt>
-						<dd><input id="flowcontain" type="text" placeholder="flow name containing ..." value = ""  class="filter-input" name="flowcontain"/></dd>
-						<dt><label for="path">User Name</label></dt>
-						<dd><input id="usercontain" type="text" placeholder="user name containing ..." value = ""  class="filter-input" name="usercontain"/></dd>
-						<dt><label for="path">Status</label></dt>
-						<!--dd><input id="status" type="text" placeholder="Flow status is ..." value = ""  class="filter-input" name="status"/></dd-->
-						<dd>
-							<select id="status">
-								<option value=0>All Status</option>
-								<option value=10>Ready</option>
-								<option value=20>Preapring</option>
-								<option value=30>Running</option>
-								<option value=40>Paused</option>
-								<option value=50>Succeed</option>
-								<option value=60>Killed</option>
-								<option value=70>Failed</option>
-								<option value=80>Failed Finishing</option>
-								<option value=90>Skipped</option>
-								<option value=100>Disabled</option>
-								<option value=110>Queued</option>
-							</select>
-						</dd>
-						<dt>Date between</dt>
-						<dd><div class="ui-datetime-container"> 
-					 		<input type="text" name="basic_example_1" id="datetimebegin" value="" /> 
-						</div></dd>	
-						<!--dd><input type="text" class="ui-datetime-container" id="datetimebegin" value=""/></dd-->
-						<dt>and</dt>
-						<dd><input type="text" class="ui-datetime-container" id="datetimeend" value=""/></dd>
-					</dl>
-				</fieldset>
-			</div>
-			<div class="actions">
-				<a class="yes btn2" id="filter-btn" href="#">Filter</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-			</div>
-			<div id="invalid-session" class="modal">
-				<h3>Invalid Session</h3>
-				<p>Session has expired. Please re-login.</p>
-				<div class="actions">
-					<a class="yes btn2" id="login-btn" href="#">Re-login</a>
-				</div>
-			</div>
-		</div>
-		
+  #parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+#end
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
-</html>
+<html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/index.vm b/src/java/azkaban/webapp/servlet/velocity/index.vm
index bf83de8..424cfbe 100644
--- a/src/java/azkaban/webapp/servlet/velocity/index.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/index.vm
@@ -15,16 +15,13 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
+
 #parse("azkaban/webapp/servlet/velocity/style.vm")
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.main.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -35,111 +32,144 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#parse("azkaban/webapp/servlet/velocity/nav.vm")
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-			#if($error_message != "null")
-				<div class="box-error-message">$error_message</div>
-			#elseif($success_message != "null")
-				<div class="box-success-message">$success_message</div>
-			#end
-			<div id="all-jobs-content">
-				<div class="section-hd">
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+## Page Header and project search form.
+
+		<div class="az-page-header">
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-6">
 #if ($allProjects)
-					<h2>All Projects</h2>
-					<div class="section-sub-hd">
-						<h4><a href="${context}/index">My Projects</a></h4>
-					</div>
+            <h1><a href="${context}/index">All Projects</a></h1>
 #else
-					<h2>My Projects</h2>
-					<div class="section-sub-hd">
-						<h4><a href="${context}/index?all">All Projects</a></h4>
-					</div>
+            <h1><a href="${context}/index">My Projects</a></h1>
 #end
-					<form id="search-form" method="get">
-						<input type="hidden" name="doaction" value="search">
-						<input type="submit" value="Quick Search" class="search-btn">
+          </div>
+          <div class="col-lg-6">
+            <form id="search-form" method="get" class="form-inline az-page-header-form" role="form">
+              <input type="hidden" name="doaction" value="search">
 #if ($allProjects)
-						<input type="hidden" name="all" value="true">			
-#end			
-						<input id="searchtextbox" type="text" placeholder="project name containing ..." value=#if($search_term) ${search_term} #else "" #end class="search-input" name="searchterm">
-					</form>
-
+              <input type="hidden" name="all" value="true">				
+#end
+              <div class="form-group col-md-9">
+                <div class="input-group">
+                  <input id="search-textbox" type="text" placeholder="Project name containing..." value=#if($search_term) ${search_term} #else "" #end class="form-control input-sm" name="searchterm">
+                  <span class="input-group-btn">
+                    <button class="btn btn-sm btn-primary">Quick Search</button>
+                  </span>
+                </div>
+              </div>
 #if (!$hideCreateProject)
-					<a id="create-project-btn" class="btn1 " href="#">Create Project</a>
+              <div class="form-group col-md-3" id="create-project">
+## Note: The Create Project button is not completely flush to the right because
+## form-group has padding.
+                <div class="pull-right">
+                  <button type="button" id="create-project-btn" class="btn btn-sm btn-success"><span class="glyphicon glyphicon-plus"></span> Create Project</button>
+                </div>
+              </div>
 #end
-				</div><!-- end .section-hd -->
+            </form>
+          </div>
+        </div>
 			</div>
-			<table id="all-jobs" class="all-jobs job-table project-table">
-				<thead>
-					<tr>
-						<th class="tb-name">Name</th>
-						<th class="tb-up-date">Modified Date</th>
-						<th class="tb-owner">Modified By</th>
-					</tr>
-				</thead>
-				<tbody>
+		</div>
+
+## Table of projects.
+
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-12">
+          <table class="table table-condensed table-striped table-bordered table-hover" id="all-jobs">
+            <thead>
+              <tr>
+                <th class="tb-name">Name</th>
+                <th class="tb-up-date">Modified Date</th>
+                <th class="tb-owner">Modified By</th>
+              </tr>
+            </thead>
+            <tbody>
 #if(!$projects.isEmpty())
 	#foreach($project in $projects)
-					<tr class="row">
-						<td class="tb-name expand project-expand" id="${project.name}">
-							<span class="state-icon"></span>
-							<a href="${context}/manager?project=${project.name}">$project.name</a>
-						</td>
-						<td class="tb-up-date">$utils.formatDate($project.lastModifiedTimestamp)</td>
-						<td class="tb-owner">$project.lastModifiedUser</td>
-					</tr>
-					<tr class="childrow" id="${project.name}-child" style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr><th class="tb-name">Flows</th></tr>
-								</thead>
-								<tbody id="${project.name}-tbody">
-								</tbody>
-							</table>
-						</td>
-					</tr>
+              <tr class="az-project-row">
+                <td id="${project.name}" class="tb-name project-expand expanded">
+                  <span class="glyphicon glyphicon-chevron-down az-expander"></span>
+                  <a href="${context}/manager?project=${project.name}">$project.name</a>
+                </td>
+                <td class="tb-up-date">$utils.formatDate($project.lastModifiedTimestamp)</td>
+                <td class="tb-owner">$project.lastModifiedUser</td>
+              </tr>
+              <tr class="childrow collapse" id="${project.name}-child">
+                <td colspan="3">
+                  <table class="table table-bordered">
+                    <thead>
+                      <tr>
+                        <th class="tb-name">Flows</th>
+                      </tr>
+                    </thead>
+                    <tbody id="${project.name}-tbody">
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
 	#end
 #else
-					<tr><td class="last">No viewable projects found.</td></tr>
+              <tr>
+                <td colspan="3">No viewable projects found.</td>
+              </tr>
 #end
-				</tbody>
-			</table>
-		</div>
-
-		<!-- modal content -->
-		<div id="create-project" class="modal">
-			<h3>Create Project</h3>
-			<div id="errorMsg" class="box-error-message">$errorMsg</div>
-			
-			<div class="message">
-				<fieldset>
-					<dl>
-						<dt><label for="path">Project Name</label></dt>
-						<dd><input id="path" name="project" type="text" size="20" title="The project name."/></dd>
-						<dt>Description</dt>
-						<dd><textarea id="description" name="description" rows="2" cols="40"></textarea></dd>
-					
-						<input name="action" type="hidden" value="create" />
-						<input name="redirect" type="hidden" value="$!context/" />
-					</dl>
-				</fieldset>
-			</div>
-			<div class="actions">
-				<a class="yes btn2" id="create-btn" href="#">Create Project</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
+            </tbody>
+          </table>
+				</div>
 			</div>
-			<div id="invalid-session" class="modal">
-				<h3>Invalid Session</h3>
-				<p>Session has expired. Please re-login.</p>
-				<div class="actions">
-					<a class="yes btn2" id="login-btn" href="#">Re-login</a>
+
+## Modal dialog to be displayed to create a new project.
+
+			<div class="modal" id="create-project-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Create Project</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="modal-error-msg">$error_msg</div>
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+									<label for="path" class="col-sm-2 control-label">Name</label>
+									<div class="col-sm-10">
+										<input id="path" name="project" type="text" class="form-control" placeholder="Project name">
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="description" class="col-sm-2 control-label">Description</label>
+									<div class="col-sm-10">
+										<textarea id="description" name="description" rows="2" cols="40" class="form-control" placeholder="Project description"></textarea>
+									</div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<input name="action" type="hidden" value="create">
+							<input name="redirect" type="hidden" value="$!context/">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-primary" id="create-btn">Create Project</button>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
+
+#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
 </html>
 

diff --git a/src/java/azkaban/webapp/servlet/velocity/invalidsessionmodal.vm b/src/java/azkaban/webapp/servlet/velocity/invalidsessionmodal.vm
new file mode 100644
index 0000000..6f0651d
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/invalidsessionmodal.vm
@@ -0,0 +1,34 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+	## Modal dialog to be displayed when the user sesion is invalid.
+			
+			<div class="modal" id="invalid-session-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Invalid Session</h4>
+						</div>
+						<div class="modal-body">
+							<p>Session has expired. Please re-login.</p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" id="login-btn">Re-login</button>
+						</div>
+					</div>
+				</div>
+			</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/javascript.vm b/src/java/azkaban/webapp/servlet/velocity/javascript.vm
new file mode 100644
index 0000000..40b35fd
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/javascript.vm
@@ -0,0 +1,22 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
+		<script type="text/javascript" src="${context}/js/bootstrap.min.js"></script>    
+		<script type="text/javascript" src="${context}/js/bootstrap-fileinput.js"></script>    
+		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
+		<script type="text/javascript" src="${context}/js/namespace.js"></script>
+		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>

diff --git a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
index ba299db..cbddd02 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jmxpage.vm
@@ -15,14 +15,12 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+		
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.jmx.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -33,148 +31,178 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#set($counter=0)
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-#if($errorMsg)
-<div class="box-error-message"><pre>$errorMsg</pre></div>
+		
+#set ($current_page="all")
+#set ($counter = 0)
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+			
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #end
 
-		<div class="content">
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/jmx">Admin JMX Http Page</span></a></h2>
-				</div>
+		</div>
+
+		<div class="az-page-header">
+			<div class="container">
+				<h1>Admin JMX Http Page</h1>
 			</div>
-			<h3 class="subhead">Web Client JMX</h3>
+		</div>
+
+		<div class="container">
 
-			<table id="all-jobs" class="all-jobs job-table">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-#foreach($bean in $mbeans)
-				<tr>
-					<td>${bean.keyPropertyList.get("name")}</td>
-					<td>${bean.domain}</td>
-					<td>${bean.canonicalName}</td>
-					<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</div></td>
-				</tr>
+## Web Client JMX 
 
-				<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-					<td class="expandedFlow" colspan="3">
-						<table class="innerTable">
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Web Client JMX</div>
+						<table id="all-jmx" class="table table-condensed table-bordered table-striped table-hover">
 							<thead>
 								<tr>
-									<th>Attribute Name</th>
-									<th>Value</th>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
 								</tr>
 							</thead>
-							<tbody id="expandBtn-${counter}-tbody">
-							</tbody>
-						</table>
-					</td>
+							<tbody>
+#foreach ($bean in $mbeans)
+							<tr>
+								<td>${bean.keyPropertyList.get("name")}</td>
+								<td>${bean.domain}</td>
+								<td>${bean.canonicalName}</td>
+								<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.domain}" name="${bean.keyPropertyList.get("name")}">Query</button></td>
+							</tr>
 
-					<td>
-						<div class="btn4 collapse">Collapse</div>
-					</td>
-				</tr>
-#set($counter=$counter + 1)
+							<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+								<td class="expandedFlow" colspan="3">
+									<table class="table table-condensed table-bordered table-striped table-hover">
+										<thead>
+											<tr>
+												<th>Attribute Name</th>
+												<th>Value</th>
+											</tr>
+										</thead>
+										<tbody id="expandBtn-${counter}-tbody">
+										</tbody>
+									</table>
+								</td>
+
+								<td>
+									<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+								</td>
+							</tr>
+	#set ($counter = $counter + 1)
 #end
-				</tbody>
-			</table>
+							</tbody>
+						</table>
 
-#foreach($executor in $executorRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Executor JMX $executor.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $executor.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+					</div>
+				</div>
+			</div>
+			
+#foreach ($executor in $executorRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Executor JMX $executor.key</div>
+						<table class="remoteJMX table table-striped table-condensed table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $executor.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm query-btn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$executor.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
 #end
+			
+#foreach ($triggerserver in $triggerserverRemoteMBeans.entrySet())
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">Remote Trigger Server JMX $triggerserver.key</div>
+						<table class="remoteJMX table table-condensed table-striped table-bordered table-hover">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Domain</th>
+									<th>Canonical Name</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($bean in $triggerserver.value)
+								<tr>
+									<td>${bean.get("keyPropertyList").get("name")}</td>
+									<td>${bean.get("domain")}</td>
+									<td>${bean.get("canonicalName")}</td>
+									<td><button type="button" class="btn btn-default btn-sm querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</button></td>
+								</tr>
+								<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
+									<td class="expandedFlow" colspan="3">
+										<table class="table table-striped table-condensed table-bordered table-hover">
+											<thead>
+												<tr>
+													<th>Attribute Name</th>
+													<th>Value</th>
+												</tr>
+											</thead>
+											<tbody id="expandBtn-${counter}-tbody">
+											</tbody>
+										</table>
+									</td>
 
-#foreach($triggerserver in $triggerserverRemoteMBeans.entrySet())
-			<h3 class="subhead">Remote Trigger Server JMX $triggerserver.key</h3>
-			<table class="all-jobs job-table remoteJMX">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Domain</th>
-						<th>Canonical Name</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					#foreach($bean in $triggerserver.value)
-						<tr>
-							<td>${bean.get("keyPropertyList").get("name")}</td>
-							<td>${bean.get("domain")}</td>
-							<td>${bean.get("canonicalName")}</td>
-							<td><div class="btn4 querybtn" id="expandBtn-$counter" domain="${bean.get("domain")}" name="${bean.get("keyPropertyList").get("name")}" hostport="$triggerserver.key">Query</div></td>
-						</tr>
-					<tr class="childrow" id="expandBtn-${counter}-child"  style="display: none;">
-						<td class="expandedFlow" colspan="3">
-							<table class="innerTable">
-								<thead>
-									<tr>
-										<th>Attribute Name</th>
-										<th>Value</th>
-									</tr>
-								</thead>
-								<tbody id="expandBtn-${counter}-tbody">
-								</tbody>
-							</table>
-						</td>
+									<td>
+										<button type="button" class="btn btn-default btn-sm collapse-btn">Collapse</button>
+									</td>
+							</tr>
+		#set ($counter = $counter + 1)
+	#end 
+							</tbody>
+						</table>
 
-						<td>
-							<div class="btn4 collapse">Collapse</div>
-						</td>
-				</tr>
-				#set($counter=$counter + 1)
-					#end 
-				</tbody>
-			</table>
+					</div>
+				</div>
+			</div>
 #end
 
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		</div>
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
new file mode 100644
index 0000000..e429314
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/jobdetailspage.vm
@@ -0,0 +1,165 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+<!DOCTYPE html> 
+<html lang="en">
+	<head>
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.jobdetails.view.js"></script>
+		<script type="text/javascript">
+			var contextURL = "${context}";
+			var currentTime = ${currentTime};
+			var timezone = "${timezone}";
+			var errorMessage = null;
+			var successMessage = null;
+			
+			var projectName = "${projectName}";
+			var flowName = "${flowid}";
+			var execId = "${execid}";
+			var jobId = "${jobid}";
+			var attempt = ${attempt};
+		</script>
+	</head>
+	<body>
+
+#set ($current_page="executing")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
+#else
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+	## Page header.
+
+		<div class="az-page-header">
+			<div class="container">
+				<div class="row">
+					<div class="col-lg-6">
+						<h1><a href="${context}/executor?execid=${execid}&job=${jobid}">Job Execution <small>$jobid</small></a></h1>
+					</div>
+					<div class="col-lg-6">
+						<div class="pull-right az-page-header-form">
+							<a href="${context}/manager?project=${projectName}&flow=${flowid}&job=$jobid" class="btn btn-info">Job Properties</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	
+	## Breadcrumb
+
+		<div class="container">
+			<ol class="breadcrumb">
+				<li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
+				<li><a href="${context}/manager?project=${projectName}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+				<li><a href="${context}/executor?execid=${execid}#jobslist"><strong>Execution</strong> $execid</a></li>
+        <li class="active"><strong>Job</strong> $jobid</li>
+			</ol>
+			
+			<ul class="nav nav-tabs" id="headertabs">
+				<li id="jobSummaryViewLink"><a href="#jobsummary">Summary</a></li>
+				<li id="jobLogViewLink"><a href="#joblog">Log</a></li>
+				<li><a href="${context}/pigvisualizer?execid=${execid}&jobid=${jobid}">Visualization</a></li>
+			</ul>
+
+	## Log content.
+
+			<div class="row" id="jobLogView">
+				<div class="col-lg-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<div class="pull-right">
+								<button type="button" id="updateLogBtn" class="btn btn-xs btn-default">Refresh</button>
+							</div>
+							Job Logs
+						</div>
+						<div class="panel-body log-viewer">
+              <pre id="logSection"></pre>
+						</div>
+					</div>
+				</div>
+			</div>
+
+	## Job Summary
+
+			<div id="jobSummaryView" class="row">
+				<div class="col-lg-12">
+					<table id="commandTable" class="table table-striped table-bordered table-hover">
+					</table>
+				
+					<div class="panel panel-default" id="jobsummary">
+						<div class="panel-heading">Job Summary</div>
+						<table class="table table-striped table-bordered table-hover">
+							<thead id="summaryHeader">
+							</thead>
+							<tbody id="summaryBody">
+							</tbody>
+						</table>
+					</div>
+				
+					<div class="panel panel-default" id="jobstats">
+						<div class="panel-heading">Job Stats</div>
+            <div class="panel-body panel-body-stats">
+              <table class="table table-striped table-bordered table-hover table-condensed">
+                <thead id="statsHeader">
+                </thead>
+                <tbody id="statsBody">
+                </tbody>
+              </table>
+            </div>
+					</div>
+					
+					<div class="panel panel-default" id="hiveTable">
+						<div class="panel-heading">Job Summary</div>
+						<table class="table table-striped table-bordered table-hover">
+							<thead id="hiveTableHeader">
+							</thead>
+							<tbody id="hiveTableBody">
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+			
+	## Error message message dialog.
+
+			<div class="modal" id="messageDialog">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header" id="messageTitle">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Error</h4>
+						</div>
+						<div class="modal-body" id="messageDiv">
+							<p id="messageBox"></p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+#end
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+		</div>
+	</body>
+</html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
index 05d4240..36f9359 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobhistorypage.vm
@@ -15,15 +15,12 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/d3.v3.min.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.jobhistory.view.js"></script>
@@ -59,91 +56,107 @@
 		</style>
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-#if($errorMsg)
-			<div class="box-error-message">$errorMsg</div>
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-	<div class="content">
-	#if($error_message != "null")
-			<div class="box-error-message">$error_message</div>
-	#elseif($success_message != "null")
-			<div class="box-success-message">$success_message</div>
-	#end
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/manager?project=${projectName}&job=${jobid}&history">Job History <span>$jobid</span></a></h2>
-					<div class="section-sub-hd">
-						<h4><a href="${context}/manager?project=${projectName}">Project <span>$projectName</span></a></h4>
-						<h4 class="separator">&gt;</h4>
-						<h4><a href="${context}/manager?project=${projectName}&job=${jobid}&history">Job History <span>$jobid</span></a></h4>
-					</div>
-				</div>
-			</div>
-			
-			<div id="timeGraph">
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+	
+	## Page header
+
+		<div class="az-page-header">
+			<div class="container">
+        <h1><a href="${context}/manager?project=${projectName}&job=${jobid}&history">Job History <small>$jobid</small></a></h1>
 			</div>
-			
-			<div class="executionInfo">
-				<table id="all-jobs" class="all-jobs job-table">
-					<thead>
-						<tr>
-							<th class="execid">Execution Id</th>
-							<th class="jobid">Job</th>
-							<th class="flowid">Flow</th>
-							<th class="date">Start Time</th>
-							<th class="date">End Time</th>
-							<th class="elapse">Elapse</th>		
-							<th class="status">Status</th>
-							<th class="logs">Logs</th>
-						</tr>
-					</thead>
-					<tbody>
-	#foreach($job in $history)
-						<tr>
-							<td class="first">
-								#if ($job.attempt > 0)
-								<a href="${context}/executor?execid=${job.execId}">${job.execId}.${job.attempt}</a>
-								#else
-								<a href="${context}/executor?execid=${job.execId}">${job.execId}</a>
-								#end
-							</td>
-							<td>
-								<a href="${context}/manager?project=${projectName}&flow=${job.flowId}&job=${jobid}">${jobid}</a>
-							</td>
-							<td>
-								<a href="${context}/manager?project=${projectName}&flow=${job.flowId}">${job.flowId}</a>
-							</td>
-							<td>$utils.formatDate(${job.startTime})</td>
-							<td>$utils.formatDate(${job.endTime})</td>
-							<td>$utils.formatDuration(${job.startTime}, ${job.endTime})</td>
-							<td><div class="status ${job.status}">$utils.formatStatus(${job.status})</div></td>
-							<td class="logLink">
-								<a href="${context}/executor?execid=${job.execId}&job=${jobid}&attempt=${job.attempt}">Logs</a>
-							</td>
-						</tr>
+		</div>
+
+		<div class="container">
+	
+  ## Breadcrumb
+
+      <ol class="breadcrumb">
+        <li><a href="${context}/manager?project=${projectName}"><strong>Project</strong> $projectName</a></li>
+        <li class="active"><strong>Job History</strong> $jobid</li>
+      </ol>
+
+			<div class="row">
+				<div class="col-lg-12">
+					<div class="well well-clear well-sm">
+            <div id="timeGraph"></div>
+          </div>
+
+          <table id="all-jobs" class="table table-striped table-bordered table-condensed table-hover">
+            <thead>
+              <tr>
+                <th class="execid">Execution Id</th>
+                <th class="jobid">Job</th>
+                <th class="flowid">Flow</th>
+                <th class="date">Start Time</th>
+                <th class="date">End Time</th>
+                <th class="elapse">Elapse</th>		
+                <th class="status">Status</th>
+                <th class="logs">Logs</th>
+              </tr>
+            </thead>
+            <tbody>
+	#if ($history)
+		#foreach ($job in $history)
+              <tr>
+                <td class="first">
+			#if ($job.attempt > 0)
+                  <a href="${context}/executor?execid=${job.execId}">${job.execId}.${job.attempt}</a>
+			#else
+                  <a href="${context}/executor?execid=${job.execId}">${job.execId}</a>
+			#end
+                </td>
+                <td>
+                  <a href="${context}/manager?project=${projectName}&flow=${job.flowId}&job=${jobid}">${jobid}</a>
+                </td>
+                <td>
+                  <a href="${context}/manager?project=${projectName}&flow=${job.flowId}">${job.flowId}</a>
+                </td>
+                <td>$utils.formatDate(${job.startTime})</td>
+                <td>$utils.formatDate(${job.endTime})</td>
+                <td>$utils.formatDuration(${job.startTime}, ${job.endTime})</td>
+                <td>
+                  <div class="status ${job.status}">
+                    $utils.formatStatus(${job.status})
+                  </div>
+                </td>
+                <td class="logLink">
+                  <a href="${context}/executor?execid=${job.execId}&job=${jobid}&attempt=${job.attempt}">Logs</a>
+                </td>
+              </tr>
+		#end
+	#else
+              <tr>
+                <td colspan="8">No history</td>
+              </tr>
 	#end
-					</tbody>
-				</table>
-				
-				<div id="pageSelection" class="nonjavascript">
-					<ul>
+            </tbody>
+          </table>
+
+					<ul class="pagination" id="pageSelection">
 						<li id="previous" class="first"><a href="${context}/manager?project=${projectId}&job=${jobid}&history&page=${previous.page}&size=${previous.size}"><span class="arrow">&larr;</span>Previous</a></li>
-				
 						<li id="page1" #if($page1.selected) class="selected" #elseif ($page1.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page1.nextPage}&size=${page1.size}">${page1.page}</a></li>
 						<li id="page2" #if($page2.selected) class="selected" #elseif ($page2.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page2.nextPage}&size=${page2.size}">${page2.page}</a></li>
 						<li id="page3" #if($page3.selected) class="selected" #elseif ($page3.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page3.nextPage}&size=${page3.size}">${page3.page}</a></li>
 						<li id="page4" #if($page4.selected) class="selected" #elseif ($page4.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page4.nextPage}&size=${page4.size}">${page4.page}</a></li>
 						<li id="page5" #if($page5.selected) class="selected" #elseif ($page5.disabled) class="disabled" #end><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${page5.nextPage}&size=${page5.size}">${page5.page}</a></li>
-	
 						<li id="next"><a href="${context}/manager?project=${projectName}&job=${jobid}&history&page=${next.page}&size=${next.size}">Next<span class="arrow">&rarr;</span></a></li>
 					</ul>
-				</div>
-			</div>
-	</div>
+
+				</div><!-- /.col-lg-12 -->
+			</div><!-- /.row -->
 
 #end
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+		</div>
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
index 8c19a53..b2da81d 100644
--- a/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/jobpage.vm
@@ -15,19 +15,13 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
-
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.jobedit.view.js"></script>
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -40,136 +34,181 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
+		
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
 
-#if($errorMsg)
-		<div class="box-error-message">$errorMsg</div>
-#else
-	<div class="content">
-	#if($error_message != "null")
-			<div class="box-error-message">$error_message</div>
-	#elseif($success_message != "null")
-			<div class="box-success-message">$success_message</div>
-	#end
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <span>$jobid</span></a></h2>
-					<div class="section-sub-hd">
-						<h4><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h4>
-						<h4 class="separator">&gt;</h4>
-						<h4><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
-						<h4 class="separator">&gt;</h4>
-						<h4><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <span>$jobid</span></a></h4>
-					</div>
-					
-					<a id="jobs-logs-btn" class="btn2" href="${context}/manager?project=${project.name}&job=$jobid&history">Job History</a>
-					<a id="edit-job-btn" class="btn1" onclick='jobEditView.show("${project.name}", "${flowid}", "${jobid}")'>Job Edit</a>
-				</div>
-			</div>
-			
-			<div id="job-summary">
-				<table class="summary-table">
-					<tr><td class="first">Type:</td><td>$jobtype</td></tr>
-					<tr><td class="first">Dependencies:</td><td>
-#if ($dependencies) 
-#foreach($dependency in $dependencies)
-	<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependency">$dependency</a>
-#end
-#else
-	<span>No Dependencies</span>
-#end
-					</td></tr>
-					<tr><td class="first">Dependents:</td><td>
-#if ($dependents) 
-#foreach($dependent in $dependents)
-						<span class="nowrap"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependent">$dependent</a></span>
-#end
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-						<span>No Dependencies</span>
-#end
-					</td></tr>
-					<tr><td class="first">Properties:</td><td>
-#if ($properties) 
-#foreach($property in $properties)
-						<!--a>$property</a><span>,</span-->
-						<span class="nowrap"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$property">$property</a></span>
-#end
-#else
-						<span>No Property Files For This Job</span>
-#end
-					</td></tr>
-				</table>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+	## Page header
+
+		<div class="az-page-header">
+			<div class="container">
+        <div class="row">
+          <div class="col-lg-6">
+            <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <small>$jobid</small></a></h1>
+          </div>
+          <div class="col-lg-6">
+            <div class="pull-right az-page-header-form">
+              <a href="${context}/manager?project=${project.name}&job=$jobid&history" class="btn btn-info btn-sm">History</a>
+            </div>
+            <div class="clearfix"></div>
+          </div>
+        </div>
 			</div>
-			
-			<table id="all-jobs" class="all-jobs job-table parameters">
-				<thead>
-					<tr>
-						<th class="tb-pname">Parameter Name</th>
-						<th class="tb-pvalue">Value</th>
-					</tr>
-				</thead>
-				<tbody>
-#foreach($parameter in $parameters)
-					<tr>
-						<td class="first">$parameter.first</td><td>$parameter.second</td>
-					</tr>
-#end
-				</tbody>
-			</table>
-	</div>
+		</div>
 
-#end
+		<div class="container">
+	
+  ## Breadcrumb
 
-		<!-- modal content -->
-
-		<div id="jobEditModalBackground" class="modalBackground2">
-			<div id="job-edit-pane" class="modal modalContainer2">
-				<a href='#' title='Close' class='modal-close'>x</a>
-					<h3>Job Description Edit</h3>					
-					<div class="optionsPane">
-						<div id="generalPanel" class="generalPanel panel">
-							<div id="mustHave">
-								<h4>Job Essentials</h4>
-								<dl>
-									<dt>Job Name</dt>
-									<dd>
-										<label id="jobName"></label>
-									</dd>
-									<dt>Job Type</dt>
-									<dd>
-										<label id="jobType"></label>
-									</dd>
-								</dl>
-							</div>
-							<br></br>
-							<!--div id="jobTypeSpecific">
-								<h4>Job Type Specific parameters</h4>
-							</div-->
-							<div id="generalJobSetting">
-								<h4>General Job Settings (Be Aware: A Job May Be Shared By Multiple Flows. The Change Will Be Global!)</h4>
-								<div class="tableDiv">
-									<table id="generalProps">
-										<thead>
-											<tr>
-												<th>Name</th>
-												<th>Value</th>
-											</tr>
-										</thead>
-										<tbody>
-											<tr id="addRow"><td id="addRow-col" colspan="2"><span class="addIcon"></span><a href="#">Add Row</a></td></tr>
-										</tbody>
-									</table>
-								</div>
+      <ol class="breadcrumb">
+        <li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+        <li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+        <li class="active"><strong>Job</strong> $jobid</li>
+      </ol>
+
+			<div class="row">
+				<div class="col-lg-8">
+	
+	## Job details table
+
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<div class="pull-right">
+								<button id="edit-job-btn" class="btn btn-xs btn-primary" onclick='jobEditView.show("${project.name}", "${flowid}", "${jobid}")'>Edit</button>
 							</div>
+							Job Properties
 						</div>
+
+						<table class="table table-striped table-bordered properties-table">
+							<thead>
+								<tr>
+									<th class="tb-pname">Parameter Name</th>
+									<th class="tb-pvalue">Value</th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($parameter in $parameters)
+								<tr>
+									<td class="property-key">$parameter.first</td>
+                  <td>$parameter.second</td>
+								</tr>
+	#end
+							</tbody>
+						</table>
+					</div>
+				</div><!-- /col-lg-8 -->
+				<div class="col-lg-4">
+					<div class="well" id="job-summary">
+						<h3>Job <small>$jobid</small></h3>
+						<p><strong>Job Type</strong> $jobtype</p>
 					</div>
-					<div class="actions">
-						<a class="yes btn1" id="set-btn" >Set/Change Job Description</a>
-						<a class="no simplemodal-close btn3" id="cancel-btn" >Cancel</a>
+
+	## Dependencies
+
+					<div class="panel panel-default">
+						<div class="panel-heading">Dependencies</div>
+						<ul class="list-group">
+	#if ($dependencies) 
+		#foreach($dependency in $dependencies)
+							<li class="list-group-item">
+								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependency">$dependency</a>
+							</li>
+		#end
+	#else
+							<li class="list-group-item">No Dependencies</li>
+	#end
+						</ul>
+					</div><!-- /panel -->
+
+	## Dependents
+
+					<div class="panel panel-default">
+						<div class="panel-heading">Dependents</div>
+						<ul class="list-group">
+	#if ($dependents) 
+		#foreach($dependent in $dependents)
+							<li class="list-group-item">
+								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=$dependent">$dependent</a>
+							</li>
+		#end
+	#else
+							<li class="list-group-item">No Dependencies</li>
+	#end
+
+						</ul>
+					</div><!-- /panel -->
+
+					<div class="panel panel-default">
+						<div class="panel-heading">Properties</div>
+						<ul class="list-group">
+	#if ($properties) 
+		#foreach($property in $properties)
+							<li class="list-group-item">
+								<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$property">$property</a>
+							</li>
+		#end
+	#else
+							<li class="list-group-item">No Property Files For This Job</li>
+	#end
+						</ul>
+					</div><!-- /panel -->
+				</div><!-- /col-lg-4 -->
+			</div><!-- /row -->
+
+## Edit job modal.
+
+			<div class="modal modal-wide" id="job-edit-pane">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Edit Job</h4>
+						</div>
+						<div class="modal-body">
+							<h4>Job Essentials</h4>
+							<dl class="dl-horizontal">
+								<dt>Job Name</dt>
+								<dd id="jobName"></dd>
+								<dt>Job Type</dt>
+								<dd id="jobType"></dd>
+							</dl>
+							<h4>General Job Settings</h4>
+							<p><strong>Be Aware:</strong> A job may be shared by multiple flows. The change will be global!</p>
+							<table id="generalProps" class="table table-striped table-bordered">
+								<thead>
+									<tr>
+										<th>Name</th>
+										<th>Value</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr id="addRow">
+										<td id="addRow-col" colspan="2">
+											<button type="button" class="btn btn-xs btn-success">Add Row</button>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-primary" id="set-btn">Set/Change Job Description</button>
+						</div>
 					</div>
+				</div>
 			</div>
-		</div>
+
+#end
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+		</div><!-- /container -->
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/login.vm b/src/java/azkaban/webapp/servlet/velocity/login.vm
index ec2b572..698581f 100644
--- a/src/java/azkaban/webapp/servlet/velocity/login.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/login.vm
@@ -13,51 +13,43 @@
  * License for the specific language governing permissions and limitations under
  * the License.
 *#
-<!DOCTYPE html> 
-<html>
+
+<!DOCTYPE html>
+<html lang="en">
   <head>
-    <head>
-    <title>#appname()</title>
-    <link rel="stylesheet" type="text/css" href="${context}/css/azkaban.css">    
-    <link rel="shortcut icon" href="${context}/favicon.ico" />
-	<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-	<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-	<script type="text/javascript" src="${context}/js/namespace.js"></script>
-	<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-	<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
 
     <script type="text/javascript" src="${context}/js/azkaban.login.js"></script>
-    #parse( "azkaban/webapp/servlet/velocity/style.vm" )
-	<script type="text/javascript">
-		var contextURL = "${context}";
-	</script>
+		<script type="text/javascript">
+			var contextURL = "${context}";
+		</script>
   </head>
   <body>
-    <div class="header">
-    #parse("azkaban/webapp/servlet/velocity/title.vm" )
-    </div>
-    
-    <div id="login" class="shadow-box">
-    	<div class="shadow-box-header">
-    		<div class="box-title">Login</div>
- 		</div>
-    	<br>
-    	<div id="errorMsg" class="box-error-message">$errorMsg</div>
-    	<div id="loginForm" class="login-form">
-    	    <div id="login-password">
-		    	<p class="login-label">Username</p>
-		    	<input id="username" type="text" name="username" class="login-textbox" ></input>
-	
-				<br/>
-		    	<p class="login-label">Password</p>
-		    	<input id="password" type="password" name="password" class="login-textbox"></input>
-			</div>
-
-	    	<div class="shadow-box-footer">
-	    	  <div id="loginSubmit" class="btn2 button1" class="login-submit">Login</div>
-	    	</div>
-    	</div>
-    </div>
+
+#set ($current_page = "all")
+#set ($navbar_disabled = 1)
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+      <div class="login">
+        <div class="alert alert-danger" id="error-msg"></div>
+        <div class="well">
+          <form id="login-form" role="form">
+            <fieldset>
+              <legend>Login</legend>
+              <input type="text" class="form-control" name="username" id="username" placeholder="Username">
+              <input type="password" class="form-control" name="password" id="password" placeholder="Password">
+              <button type="button" class="btn btn-primary btn-lg btn-block" id="login-submit">Login</button>
+            </fieldset>
+          </form>
+        </div><!-- /.well -->
+      </div><!-- /.login -->
+
+#parse("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
   </body>
 </html>
 

diff --git a/src/java/azkaban/webapp/servlet/velocity/message.vm b/src/java/azkaban/webapp/servlet/velocity/message.vm
new file mode 100644
index 0000000..13b989a
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/message.vm
@@ -0,0 +1,22 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+	## Alert message
+
+			<div class="alert alert-dismissable alert-messaging" id="messaging">
+				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+				<p id="messaging-message"></p>
+			</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/messagedialog.vm b/src/java/azkaban/webapp/servlet/velocity/messagedialog.vm
index e0aec19..3068df5 100644
--- a/src/java/azkaban/webapp/servlet/velocity/messagedialog.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/messagedialog.vm
@@ -14,12 +14,21 @@
  * the License.
 *#
 
-<script type="text/javascript" src="${context}/js/azkaban.message.dialog.view.js"></script>
-
-<div id="azkabanMessageDialog" class="modal">
-	<h3 id="azkabanMessageDialogTitle"></h3>
-	<div id="azkabanMessageDialogText"></div>
-	<div class="actions">
-		<a class="yes btn2 continueclass" id="continue-btn" href="#">Continue</a>
-	</div>
-</div>
+			<script type="text/javascript" src="${context}/js/azkaban.message.dialog.view.js"></script>
+			
+			<div class="modal" id="azkaban-message-dialog">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title" id="azkaban-message-dialog-title"></h4>
+						</div><!-- /modal-header -->
+						<div class="modal-body">
+							<p id="azkaban-message-dialog-text"></p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" data-dismiss="modal">Continue</button>
+						</div>
+					</div>
+				</div>
+			</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/nav.vm b/src/java/azkaban/webapp/servlet/velocity/nav.vm
index c2fef78..b0b89ac 100644
--- a/src/java/azkaban/webapp/servlet/velocity/nav.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/nav.vm
@@ -13,46 +13,54 @@
  * License for the specific language governing permissions and limitations under
  * the License.
 *#
-		<div id="header" class="header">
-#parse( "azkaban/webapp/servlet/velocity/title.vm" )
-			<script type="text/javascript">
-				function navMenuClick(url) {
-					window.location.href=url;
-				}
 
-			</script>
-
-			<ul id="nav" class="nav">
-				<li id="all-jobs-tab" #if($current_page == 'all')class="selected"#end onClick="navMenuClick('$!context/index')"><a href="$!context/index">Projects</a></li>
-				<li id="scheduled-jobs-tab" #if($current_page == 'schedule')class="selected"#end onClick="navMenuClick('$!context/schedule')"><a href="$!context/schedule">Scheduled</a></li>
-
-				<!--li id="triggers-tab" #if($current_page == 'triggers')class="selected"#end onClick="navMenuClick('$!context/triggers')"><a href="$!context/triggers">Triggers</a></li-->
-
-				<li id="executing-jobs-tab" #if($current_page == 'executing')class="selected"#end onClick="navMenuClick('$!context/executor')"><a href="$!context/executor">Executing</a></li>
-				<li id="history-jobs-tab" #if($current_page == 'history')class="selected"#end onClick="navMenuClick('$!context/history')"><a href="$!context/history">History</a></li>
-				
-				#foreach($viewer in $viewers)
-					#if(!$viewer.hidden)
-					<li #if($current_page == $viewer.pluginName) class="selected"#end onClick="navMenuClick('$!context/$viewer.pluginPath')">
-						<a href="$!context/$viewer.pluginPath">$viewer.pluginName</a>
-					</li>
-					#end
-				#end
-				
-				#foreach($triggerPlugin in $triggerPlugins)
-					#if(!$triggerPlugin.hidden)
-					<li #if($current_page == $triggerPlugin.pluginName) class="selected"#end onClick="navMenuClick('$!context/$triggerPlugin.pluginPath')">
-						<a href="$!context/$triggerPlugin.pluginPath">$triggerPlugin.pluginName</a>
-					</li>
-					#end
-				#end
-				
-			</ul>
-			
-			<div id="user-id">
-				<a>${user_id}<div id="user-down"></div></a>    
-				<div id="user-menu">
-					<ul><li><a id="logout" href="$!context?logout">logout</a></li></ul>
+    <div class="navbar navbar-inverse navbar-static-top">
+      <div class="container">
+        <div class="navbar-header">
+#if ($navbar_disabled != 1)
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+#end
+					<div class="navbar-logo">
+						<a href="${context}/">Azkaban</a>
+					</div>
+        </div>
+				<div class="navbar-left navbar-enviro">
+					<div class="navbar-enviro-name">${azkaban_name}</div>
+					<div class="navbar-enviro-server">${azkaban_label}</div>
 				</div>
-			</div>
-		</div>
+        <div class="navbar-collapse collapse">
+#if ($navbar_disabled != 1)
+          <ul class="nav navbar-nav">
+						<li#if($current_page == 'all') class="active"#end><a href="$!context/index">Projects</a></li>
+						<li#if($current_page == 'schedule') class="active"#end><a href="$!context/schedule">Scheduling</a></li>
+						<!--<li#if($current_page == 'triggers') class="active"#end><a href="$!context/triggers">Triggers</a></li>-->
+						<li#if($current_page == 'executing') class="active"#end><a href="$!context/executor">Executing</a></li>
+						<li#if($current_page == 'history') class="active"#end><a href="$!context/history">History</a></li>
+	#foreach ($viewer in $viewers)
+		#if (!$viewer.hidden)
+						<li#if($current_page == $viewer.pluginName) class="active"#end><a href="$!context/$viewer.pluginPath">$viewer.pluginName</a></li>
+		#end
+	#end
+
+	#foreach ($trigger in $triggerPlugins)
+		#if (!$trigger.hidden)
+						<li#if($current_page == $trigger.pluginName) class="active"#end><a href="$!context/$trigger.pluginPath">$trigger.pluginName</a></li>
+		#end
+	#end
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li class="dropdown">
+							<a href="#" class="dropdown-toggle" data-toggle="dropdown">${user_id} <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="$!context?logout">Logout</a></li>
+              </ul>
+            </li>
+          </ul>
+#end
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
index ff4613c..e477244 100644
--- a/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/permissionspage.vm
@@ -15,17 +15,14 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.permission.view.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.projectmodals.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -37,229 +34,316 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-			<div class="content">
-#if($errorMsg)
-				<div class="box-error-message">$errorMsg</div>
+#set ($current_page = "all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+	<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-				<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-				<div class="box-success-message">$success_message</div>
-#end
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
 
-				<div id="all-jobs-content">
-					<div class="section-hd">
-						<h2><a href="${context}/manager?project=${project.name}&permissions">Permissions</a></h2>
-						<div class="section-sub-hd">
-							<h4><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h4>
-						</div>
-					</div>
-				</div>
+	## Page header.
+	
+  #parse ("azkaban/webapp/servlet/velocity/projectpageheader.vm")
 
-				<div id="project-users">
-					<table class="user-table">
-						<tr><td class="first">Project Admins:</td><td>$admins</td></tr>
-						<tr><td class="first">Your Permissions:</td><td>$userpermission.toString()</td></tr>
-						
-						<tr><td class="first"></td></tr>
-					</table>
-					
-					#if($isAdmin)
-						<button id="addUser" class="btn1">Add User</button>
-						<button id="addGroup" class="btn1">Add Group</button>
-						<button id="addProxyUser" class="btn2">Add Proxy User</button>
-					#end
-				</div>
+  ## Page content.
 
-				<div id="project-summary">
-					<table class="summary-table">
-						<tr><td class="first">Name:</td><td>$project.name</td></tr>
-						<tr><td class="first">Created Date:</td><td>$utils.formatDate($project.lastModifiedTimestamp)</td></tr>
-						<tr><td class="first">Modified Date:</td><td>$utils.formatDate($project.createTimestamp)</td></tr>
-						<tr><td class="first">Last Modified by:</td><td>$project.lastModifiedUser</td></tr>
-						<tr><td class="first">Description:</td><td id="pdescription">$project.description</td>
-						</tr>
-					</table>
-				</div>
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-8">
+	
+	#set ($project_page = "permissions")
+	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
 
-		<table id="permissions-table" class="all-jobs permission-table">
-			<thead>
-				<tr>
-					<th class="tb-username">User</th>
-					<th class="tb-perm">Admin</th>
-					<th class="tb-read">Read</th>
-					<th class="tb-write">Write</th>
-					<th class="tb-execute">Execute</th>
-					<th class="tb-schedule">Schedule</th>					
-					#if($isAdmin)
-						<th class="tb-action"></th>
-					#end
-				</tr>
-			</thead>
-			<tbody>
-#if($permissions)
-#foreach($perm in $permissions)
-	<tr>
-		<td class="tb-username">#if($perm.first == $username) ${perm.first} <span class="sublabel">(you)</span> #else $perm.first #end</td>
-		#if ($perm.second.isPermissionNameSet("ADMIN")) 
-			<td><input id="${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled" checked="true"></input></td>
-			<td><input id="${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled" checked="true"></input></td>
-			<td><input id="${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" checked="true"></input></td>
-			<td><input id="${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" checked="true"></input></td>
-			<td><input id="${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" checked="true"></input></td>
-		#else
-			<td><input id="${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled"></input></td>
-			<td><input id="${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled"  #if ($perm.second.isPermissionNameSet("READ")) checked="true" #end></input></td>
-			<td><input id="${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" #if ($perm.second.isPermissionNameSet("WRITE")) checked="true" #end></input></td>
-			<td><input id="${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" #if ($perm.second.isPermissionNameSet("EXECUTE")) checked="true" #end></input></td>
-			<td><input id="${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" #if ($perm.second.isPermissionNameSet("SCHEDULE")) checked="true" #end></input></td>
-		#end
+	## User permissions table.
 
-		#if($isAdmin)
-			<td><button id="$perm.first" #if($perm.first == $username) disabled="disabled" class="change-btn btn-disabled" #else class="change-btn btn2" #end >Change</button></td>
-		#end
-	</tr>
-#end
-#else
-	<tr><td class="last">No Users Found.</td></tr>
-#end
-			</tbody>
-		</table>
+          <div class="panel panel-success">
+            <div class="panel-heading">
+              User
+  #if ($isAdmin)
+              <div class="pull-right">
+                <button id="addUser" class="btn btn-xs btn-success">Add</button>
+              </div>
+  #end
+            </div>
+            <table class="table table-striped permission-table" id="permissions-table">
+              <thead>
+                <tr>
+                  <th class="tb-username">User</th>
+                  <th class="tb-perm">Admin</th>
+                  <th class="tb-read">Read</th>
+                  <th class="tb-write">Write</th>
+                  <th class="tb-execute">Execute</th>
+                  <th class="tb-schedule">Schedule</th>					
+	#if ($isAdmin)
+                  <th class="tb-action"></th>
+  #end
+                </tr>
+              </thead>
+              <tbody>
 
-		<table id="group-permissions-table" class="all-jobs permission-table">
-			<thead>
-				<tr>
-					<th class="tb-username">Group</th>
-					<th class="tb-perm">Admin</th>
-					<th class="tb-read">Read</th>
-					<th class="tb-write">Write</th>
-					<th class="tb-execute">Execute</th>
-					<th class="tb-schedule">Schedule</th>
-					#if($isAdmin)
-						<th class="tb-action"></th>
-					#end
-				</tr>
-			</thead>
-			<tbody>
-#if($groupPermissions)
-#foreach($perm in $groupPermissions)
-	<tr>
-		<td class="tb-username">#if($perm.first == $username) ${perm.first} <span class="sublabel">(you)</span> #else $perm.first #end</td>
-		#if ($perm.second.isPermissionNameSet("ADMIN")) 
-			<td><input id="group-${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled" checked="true"></input></td>
-			<td><input id="group-${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled" checked="true"></input></td>
-			<td><input id="group-${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" checked="true"></input></td>
-			<td><input id="group-${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" checked="true"></input></td>
-			<td><input id="group-${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" checked="true"></input></td>
-		#else
-			<td><input id="group-${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled"></input></td>
-			<td><input id="group-${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled"  #if ($perm.second.isPermissionNameSet("READ")) checked="true" #end></input></td>
-			<td><input id="group-${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" #if ($perm.second.isPermissionNameSet("WRITE")) checked="true" #end></input></td>
-			<td><input id="group-${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" #if ($perm.second.isPermissionNameSet("EXECUTE")) checked="true" #end></input></td>
-			<td><input id="group-${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" #if ($perm.second.isPermissionNameSet("SCHEDULE")) checked="true" #end></input></td>
-		#end
+	#if ($permissions)
+		#foreach ($perm in $permissions)
+                <tr>
+                  <td class="tb-username">
+			#if ($perm.first == $username) 
+                    ${perm.first} <span class="sublabel">(you)</span> 
+			#else 
+                    $perm.first 
+			#end
+                  </td>
+			#if ($perm.second.isPermissionNameSet("ADMIN")) 
+                  <td><input id="${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled" checked="true"></input></td>
+                  <td><input id="${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled" checked="true"></input></td>
+                  <td><input id="${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" checked="true"></input></td>
+                  <td><input id="${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" checked="true"></input></td>
+                  <td><input id="${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" checked="true"></input></td>
+			#else
+                  <td><input id="${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled"></input></td>
+                  <td><input id="${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled"  #if ($perm.second.isPermissionNameSet("READ")) checked="true" #end></input></td>
+                  <td><input id="${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" #if ($perm.second.isPermissionNameSet("WRITE")) checked="true" #end></input></td>
+                  <td><input id="${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" #if ($perm.second.isPermissionNameSet("EXECUTE")) checked="true" #end></input></td>
+                  <td><input id="${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" #if ($perm.second.isPermissionNameSet("SCHEDULE")) checked="true" #end></input></td>
+			#end
 
-		#if($isAdmin)
-			<td><button id="group-$perm.first" class="change-btn btn2">Change</button></td>
+			#if ($isAdmin)
+                  <td><button id="$perm.first" #if($perm.first == $username) disabled="disabled" class="btn btn-xs btn-disabled" #else class="btn btn-xs btn-default" #end >Change</button></td>
+			#end
+                </tr>
 		#end
-	</tr>
-#end
-#else
-	<tr><td class="last">No Groups Found.</td></tr>
-#end
-			</tbody>
-		</table>
-		
-		<br/>
-		<table id="proxy-user-table" class="all-jobs permission-table">
-			<thead>
-				<tr>
-					<th class="tb-username">Proxy User</th>
-					#if($isAdmin)
-						<th class="tb-action"></th>
-					#end
-				</tr>
-			</thead>
-			<tbody>
-#if($proxyUsers)
-#foreach($proxyUser in $proxyUsers)
-	<tr>
-		<td class="tb-username">#if($proxyUser == $username) ${proxyUser} <span class="sublabel">(you)</span> #else $proxyUser #end</td>
-		#if($isAdmin)
-			<td><button id="proxy-${proxyUser}" name="${proxyUser}" class="remove-btn btn2">Remove</button></td>
-		#end
-	</tr>
-#end
-#else
-	<tr><td class="last">No Proxy User Found.</td></tr>
-#end
-			</tbody>
-		</table>
-#end
+	#else
+    #if ($isAdmin)
+                <tr><td colspan="7">No Users Found.</td></tr>
+    #else
+                <tr><td colspan="6">No Users Found.</td></tr>
+    #end
+	#end
+              </tbody>
+            </table>
+          </div>
 
-		</div>
-	
-		<div id="remove-proxy" class="modal">
-			<h3>Remove Proxy User</h3>
-			<div id="removeProxyErrorMsg" class="box-error-message"></div>
-			<p id="proxyRemoveMsg">Removing Proxy User </p>
-			<div class="actions">
-				<a class="yes btn2" id="remove-proxy-btn" href="#">Remove Proxy User</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-			</div>
-		</div>
+	## Group permissions table.
+							
+          <div class="panel panel-warning">
+            <div class="panel-heading">
+              Group
+  #if ($isAdmin)
+              <div class="pull-right">
+                <button id="addGroup" class="btn btn-xs btn-warning">Add</button>
+              </div>
+  #end
+            </div>
+            <table class="table table-striped permission-table" id="group-permissions-table">
+              <thead>
+                <tr>
+                  <th class="tb-username">Group</th>
+                  <th class="tb-perm">Admin</th>
+                  <th class="tb-read">Read</th>
+                  <th class="tb-write">Write</th>
+                  <th class="tb-execute">Execute</th>
+                  <th class="tb-schedule">Schedule</th>
+	#if ($isAdmin)
+                  <th class="tb-action"></th>
+	#end
+                </tr>
+              </thead>
+              <tbody>
+	#if ($groupPermissions)
+		#foreach ($perm in $groupPermissions)
+                <tr>
+                  <td class="tb-username">
+			#if ($perm.first == $username) 
+                    ${perm.first} <span class="sublabel">(you)</span> 
+			#else 
+                    $perm.first 
+			#end
+                  </td>
+			#if ($perm.second.isPermissionNameSet("ADMIN")) 
+                  <td><input id="group-${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled" checked="true"></input></td>
+                  <td><input id="group-${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled" checked="true"></input></td>
+                  <td><input id="group-${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" checked="true"></input></td>
+                  <td><input id="group-${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" checked="true"></input></td>
+                  <td><input id="group-${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" checked="true"></input></td>
+			#else
+                  <td><input id="group-${perm.first}-admin-checkbox" type="checkbox" name="admin" disabled="disabled"></input></td>
+                  <td><input id="group-${perm.first}-read-checkbox" type="checkbox" name="read" disabled="disabled"  #if ($perm.second.isPermissionNameSet("READ")) checked="true" #end></input></td>
+                  <td><input id="group-${perm.first}-write-checkbox" type="checkbox" name="write" disabled="disabled" #if ($perm.second.isPermissionNameSet("WRITE")) checked="true" #end></input></td>
+                  <td><input id="group-${perm.first}-execute-checkbox" type="checkbox" name="execute" disabled="disabled" #if ($perm.second.isPermissionNameSet("EXECUTE")) checked="true" #end></input></td>
+                  <td><input id="group-${perm.first}-schedule-checkbox" type="checkbox" name="schedule" disabled="disabled" #if ($perm.second.isPermissionNameSet("SCHEDULE")) checked="true" #end></input></td>
+			#end
+
+			#if ($isAdmin)
+                  <td><button id="group-$perm.first" class="btn btn-xs btn-default">Change</button></td>
+			#end
+                </tr>
+		#end
+	#else
+    #if ($isAdmin)
+                <tr><td colspan="7">No Groups Found.</td></tr>
+    #else
+                <tr><td colspan="6">No Groups Found.</td></tr>
+    #end
+	#end
+              </tbody>
+            </table>
+          </div>
 	
-		<div id="add-proxy" class="modal">
-			<h3 id="proxy-title">Add Proxy User</h3>
-			<div id="proxyErrorMsg" class="box-error-message"></div>
-			<dl>
-				<dt>Proxy</dt>
-				<dd><input id="proxy-user-box" name="proxyid" type="text" /></dd>
-			</dl>
-			<div class="actions">
-				<a class="yes btn2" id="add-proxy-btn" href="#">Add Proxy User</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-			</div>
-		</div>
+	## Proxy users table.
+							
+          <div class="panel panel-info">
+            <div class="panel-heading">
+              Proxy Users
+  #if ($isAdmin)
+              <div class="pull-right">                
+                <button id="addProxyUser" class="btn btn-xs btn-info">Add</button>
+              </div>
+	#end
+            </div>
+            <table class="table table-striped permission-table" id="proxy-user-table">
+              <thead>
+                <tr>
+                  <th class="tb-username">Proxy User</th>
+	#if ($isAdmin)
+                  <th class="tb-action"></th>
+	#end
+                </tr>
+              </thead>
+              <tbody>
+	#if ($proxyUsers)
+		#foreach ($proxyUser in $proxyUsers)
+                <tr>
+                  <td class="tb-username">#if($proxyUser == $username) ${proxyUser} <span class="sublabel">(you)</span> #else $proxyUser #end</td>
+			#if ($isAdmin)
+                  <td><button id="proxy-${proxyUser}" name="${proxyUser}" class="btn btn-xs btn-danger">Remove</button></td>
+			#end
+                </tr>
+		#end
+	#else
+    #if ($isAdmin)
+                <tr><td colspan="2">No Proxy User Found.</td></tr>
+    #else
+                <tr><td>No Proxy User Found.</td></tr>
+    #end
+	#end
+              </tbody>
+            </table>
+          </div>
 	
-		<div id="change-permission" class="modal">
-			<h3 id="change-title">Change Permissions</h3>
-			<div id="errorMsg" class="box-error-message"></div>
-			<div class="message">
-				<fieldset>
-					<dl>
-						<dt>User</dt>
-						<dd><input id="user-box" name="userid" type="text" /></dd>
-					<div id="otherCheckBoxes">
-						<dt class="nextline">Admin</dt>
-						<dd><input id="admin-change" name="admin" type="checkbox" /></dd>
-						<dt>Read</dt>
-					    <dd><input id="read-change" name="read" type="checkbox" /></dd>
-					    <dt>Write</dt>
-					    <dd><input id="write-change" name="write" type="checkbox" /></dd>
-					    <dt>Execute</dt>
-					    <dd><input id="execute-change" name="execute" type="checkbox" /></dd>
-					    <dt>Schedule</dt>
-					    <dd><input id="schedule-change" name="schedule" type="checkbox" /></dd>
+				</div><!-- /col-lg-8 -->
+				<div class="col-lg-4">
+	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
+				</div><!-- /col-lg-4 -->
+			</div><!-- /row -->
+
+## Remove proxy user modal dialog.
+
+			<div class="modal" id="remove-proxy">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Remove Proxy User</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="remove-proxy-error-msg"></div>
+              <p><strong>Warning:</strong> Removing Proxy User</p>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-danger" id="remove-proxy-btn">Remove Proxy User</a>
+						</div>
 					</div>
-					</dl>
-				</fieldset>
+				</div>
 			</div>
-			<div class="actions">
-				<a class="yes btn2" id="change-btn" href="#">Commit</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
+
+## Add proxy user modal dialog.
+
+			<div class="modal" id="add-proxy">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Add Proxy User</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="add-proxy-error-msg"></div>
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+									<label for="path" class="col-sm-2 control-label">Proxy</label>
+									<div class="col-sm-10">
+										<input type="text" name="proxyid" id="proxy-user-box" class="form-control">
+									</div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-primary" id="add-proxy-btn">Add Proxy User</button>
+						</div>
+					</div>
+				</div>
 			</div>
-		</div>
-		<div id="invalid-session" class="modal">
-			<h3>Invalid Session</h3>
-			<p>Session has expired. Please re-login.</p>
-			<div class="actions">
-				<a class="yes btn2" id="login-btn" href="#">Re-login</a>
+			
+## Change permissions modal dialog.
+
+			<div class="modal" id="change-permission">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Change Permissions</h4>
+						</div>
+						<div class="modal-body">
+							<div class="alert alert-danger" id="change-permission-error-msg"></div>
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+									<label for="path" class="col-sm-2 control-label">User</label>
+									<div class="col-sm-10">
+										<input type="text" name="userid" id="user-box" class="form-control">
+									</div>
+								</div>
+								<div class="form-group">
+                  <div class="col-sm-offset-2 col-sm-10">
+                    <label class="checkbox-inline">
+                      <input id="admin-change" name="admin" type="checkbox">
+                      Admin
+                    </label>
+                    <label class="checkbox-inline">
+                      <input id="read-change" name="read" type="checkbox">
+                      Read
+                    </label>
+                    <label class="checkbox-inline">
+                      <input id="write-change" name="write" type="checkbox">
+                      Write
+                    </label>
+                    <label class="checkbox-inline">
+                      <input id="execute-change" name="execute" type="checkbox">
+                      Execute
+                    </label>
+                    <label class="checkbox-inline">
+                      <input id="schedule-change" name="schedule" type="checkbox">
+                      Schedule
+                    </label>
+                  </div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-primary" id="change-btn">Commit</button>
+						</div>
+					</div>
+				</div>
 			</div>
-		</div>
+
+	#parse ("azkaban/webapp/servlet/velocity/projectmodals.vm")
+	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+#end
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+		</div><!-- /container -->
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
index af1e15c..ebdf2dc 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectlogpage.vm
@@ -15,71 +15,83 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.projectlog.view.js"></script>
-		
+		<script type="text/javascript" src="${context}/js/azkaban.projectmodals.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
 			var timezone = "${timezone}";
 			var errorMessage = null;
 			var successMessage = null;
-			
-			var projectName = "${projectName}";
-
+		
+			var projectId = ${project.id};
+			var projectName = "$project.name";
 		</script>
 	</head>
 	<body>
-		#set($current_page="executing")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="content">
-#if($errorMsg)
-				<div class="box-error-message">$errorMsg</div>
+
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-				<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-				<div class="box-success-message">$success_message</div>
-#end
-		
-			<div id="all-jobs-content">
-				<div class="section-hd flow-header">
-					<h2><a href="${context}/manager?project=${projectName}">Project Audit Logs <span>$projectName</span></a></h2>
-				</div>
-			</div>
-			
-			<div id="headertabs" class="headertabs">
-				<ul>
-					<li><a id="logViewLink" href="#log">Log</a></li>
-				</ul>
-			</div>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+	## Page header.
+	
+  #parse ("azkaban/webapp/servlet/velocity/projectpageheader.vm")
 
-			<div id="projectLogView" class="logView">
-				<div class="logHeader"><div class="logButtonRow"><div id="updateLogBtn" class="btn7">Refresh</div></div></div>
-				<div id="logViewer" class="logViewer">
-					<table id="logTable">
-						
-					</table>
+	## Page content.
+
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-8">
+	
+	#set ($project_page = "logs")
+	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
+
+					<div class="panel panel-default" id="flow-tabs">
+						<div class="panel-heading">
+							<div class="pull-right" id="project-options">
+								<button type="button" id="updateLogBtn" class="btn btn-xs btn-info">Refresh</button>
+							</div>
+							Audit Logs
+						</div>
+            <table class="table table-striped" id="logTable">
+              <thead>
+                <tr>
+                  <th>Time</th>
+                  <th>User</th>
+                  <th>Type</th>
+                  <th>Message</th>
+                </tr>
+              </thead>
+              <tbody>
+              </tbody>
+						</table>
+					</div>
 				</div>
-			</div>
-#end
-			<div id="messageDialog" class="modal">
-				<h3 id="messageTitle">Error</h3>
-				<div class="messageDiv">
-					<p id="messageBox"></p>
+				<div class="col-lg-4">
+	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
 				</div>
 			</div>
 
-		</div>
+	#parse ("azkaban/webapp/servlet/velocity/projectmodals.vm")
+#end
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm b/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm
new file mode 100644
index 0000000..2dc064a
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/projectmodals.vm
@@ -0,0 +1,71 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+  ## Upload project modal
+
+			<div class="modal" id="upload-project-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<form id="upload-project-form" enctype="multipart/form-data" method="post" action="$!context/manager">
+							<div class="modal-header">
+								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+								<h4 class="modal-title">Upload Project Files</h4>
+							</div>
+							<div class="modal-body">
+								<div class="alert alert-danger" id="upload-project-modal-error-msg">$error_msg</div>
+								<fieldset class="form-horizontal">
+									<div class="form-group">
+										<label for="file" class="col-sm-3 control-label">Job Archive</label>
+										<div class="col-sm-9">
+											<input type="file" class="form-control" id="file" name="file">
+										</div>
+									</div>
+								</fieldset>
+							</div>
+							<div class="modal-footer">
+								<input type="hidden" name="project" value="$project.name">
+								<input type="hidden" name="action" value="upload">
+								<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+								<button type="button" class="btn btn-primary" id="upload-project-btn">Upload</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+
+	## Delete project modal.
+			
+			<div class="modal" id="delete-project-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Delete Project</h4>
+						</div>
+						<div class="modal-body">
+							<p><strong>Warning:</strong> This project will be deleted and may not be recoverable.</p>
+						</div>
+						<div class="modal-footer">
+							<form id="delete-form">
+								<input type="hidden" name="project" value="$project.name">
+								<input type="hidden" name="delete" value="true">
+								<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+								<button type="button" class="btn btn-danger" id="delete-btn">Delete Project</button>
+							</form>
+						</div>
+					</div>
+				</div>
+			</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectnav.vm b/src/java/azkaban/webapp/servlet/velocity/projectnav.vm
new file mode 100644
index 0000000..c19a6ab
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/projectnav.vm
@@ -0,0 +1,23 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+					<ul class="nav nav-tabs">
+						<li#if($project_page == 'flows') class="active"#end><a href="${context}/manager?project=${project.name}">Flows</a></li>
+						<li#if($project_page == 'permissions') class="active"#end><a id="project-permission-btn" href="${context}/manager?project=${project.name}&permissions">Permissions</a></li>
+	#if ($admin)
+						<li#if($project_page == 'logs') class="active"#end><a id="project-logs-btn" href="${context}/manager?project=${project.name}&logs">Project Logs</a></li>
+	#end
+					</ul>

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
index ef3d281..e2d0b5a 100644
--- a/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpage.vm
@@ -15,22 +15,19 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.project.view.js"></script>
 
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
 
+		<link rel="stylesheet" type="text/css" href="${context}/css/bootstrap-datetimepicker.css" />
+		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban-svg.css" />
+		<script type="text/javascript" src="${context}/js/moment.min.js"></script>
+		<script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.ajax.utils.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.project.view.js"></script>
+		<script type="text/javascript" src="${context}/js/azkaban.projectmodals.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -39,149 +36,79 @@
 			var successMessage = null;
 
 			var projectId = ${project.id};
-
 			var execAccess = ${exec};
 			var projectName = "$project.name";
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-			<div class="content">
-#if($errorMsg)
-				<div class="box-error-message"><pre>$errorMsg</pre></div>
+#set ($current_page="all")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-				<div class="box-error-message"><pre>$error_message</pre></div>
-#elseif($success_message != "null")
-				<div class="box-success-message"><pre>$success_message</pre></div>
-#end
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
 
-				<div id="all-jobs-content">
-					<div class="section-hd">
-						<h2><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h2>
-						<a id="project-upload-btn" class="btn1 projectupload">Upload</a>
-						<a id="project-permission-btn" class="btn5 projectpermission" href="${context}/manager?project=${project.name}&permissions">Permissions</a>
-						#if($admin)
-						<a id="project-logs-btn" class="btn2" href="${context}/manager?project=${project.name}&logs">Project Logs</a>
-						<a id="project-delete-btn" class="btn6">Delete Project</a>
-						#end
-					</div><!-- end .section-hd -->
-				</div>
+	## Page header.
+	
+  #parse ("azkaban/webapp/servlet/velocity/projectpageheader.vm")
 
-				<div id="project-users">
-					<table class="user-table">
-						<tr><td class="first">Project Admins:</td><td>$admins</td></tr>
-						<tr><td class="first">Your Permissions:</td><td>$userpermission.toString()</td></tr>
-					</table>
-				</div>
+	## Page content.
 
-				<div id="project-summary">
-					<table class="summary-table">
-						<tr><td class="first">Name:</td><td>$project.name</td></tr>
-						<tr><td class="first">Created Date:</td><td>$utils.formatDate($project.createTimestamp)</td></tr>
-						<tr><td class="first">Modified Date:</td><td>$utils.formatDate($project.lastModifiedTimestamp)</td></tr>
-						<tr><td class="first">Modified by:</td><td>$project.lastModifiedUser</td></tr>
-						<tr><td class="first">Description:</td><td id="pdescription">$project.description</td>
-							#if($admin)
-								<td><div id="edit" class="btn5">Edit Description</div></td>
-							#end
-						</tr>
-					</table>
-				</div>
+    <div class="container">
+			<div class="row">
+				<div class="col-lg-8" id="flow-tabs">
+					
+	#set ($project_page = "flows")
+	#parse ("azkaban/webapp/servlet/velocity/projectnav.vm")
 
-			<div id="flow-tabs">
-				<table id="all-jobs" class="all-jobs job-table">
-					<thead>
-						<tr>
-							<th class="tb-name">Flow Name</th>
-						</tr>
-					</thead>
-					<tbody>
-#if($flows)
-#foreach($flow in $flows)
-						<tr class="row flowrow">
-							<td class="tb-name" flow="${flow.id}" project="${project.name}">
-									<div class="jobfolder expand" id="${flow.id}">
-										<span class="state-icon"></span>
-										<a href="${context}/manager?project=${project.name}&flow=${flow.id}">${flow.id}</a>
-									</div>
-									#if (${exec})
-									<div class="job-hover-menu">
-										<div class="btn1 executeFlow" flowId="${flow.id}">Execute Flow</div>
-									</div>
-									#end
-							</td>
-						</tr>
-						<tr class="childrow" id="${flow.id}-child" style="display: none;">
-							<td class="expandedFlow">
-								<table class="innerTable">
-									<thead>
-										<tr><th class="tb-name">Jobs</th></tr>
-									</thead>
-									<tbody id="${flow.id}-tbody">
-									</tbody>
-								</table>
-							</td>
-						</tr>
-#end
-#else
-						<tr><td class="last">No flows uploaded to this project.</td></tr>
-#end
-					</tbody>
-				</table>
-			</div>
+            <div id="flow-tabs">
+	#if ($flows)
+		#foreach ($flow in $flows)
+              <div class="panel panel-default" flow="${flow.id}" project="${project.name}">
+                <div class="panel-heading flow-expander" id="${flow.id}">
+			#if (${exec})
+                <div class="pull-right">
+                  <button type="button" class="btn btn-xs btn-success execute-flow" flowId="${flow.id}">Execute Flow</button>
+                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#executions" class="btn btn-info btn-xs">Executions</a>
+                  <a href="${context}/manager?project=${project.name}&flow=${flow.id}#summary" class="btn btn-info btn-xs">Summary</a>
+                </div>
+			#end
+                <a href="${context}/manager?project=${project.name}&flow=${flow.id}">${flow.id}</a>
+              </div>
+              <div id="${flow.id}-child" class="panel-collapse panel-list collapse">
+                <ul class="list-group list-group-collapse" id="${flow.id}-tbody">
+                </ul>
+              </div>
+            </div>
+		#end
+	#else
+            <div class="alert alert-info">
+              <h4>No Flows</h4>
+              <p>No flows have been uploaded to this project yet.</p>
+            </div>
+	#end
+          </div><!-- /#flow-tabs -->
+				</div><!-- /col-lg-8 -->
+
+				<div class="col-lg-4">
+	#parse ("azkaban/webapp/servlet/velocity/projectsidebar.vm")
+				</div><!-- /col-lg-4 -->
+			</div><!-- /row -->
+
+	#parse ("azkaban/webapp/servlet/velocity/projectmodals.vm")
+	#parse ("azkaban/webapp/servlet/velocity/invalidsessionmodal.vm")
+	#parse ("azkaban/webapp/servlet/velocity/flowexecutionpanel.vm")
+	#parse ("azkaban/webapp/servlet/velocity/messagedialog.vm")
 #end
-		</div>
-	
-		<div id="upload-project" class="modal">
-			<h3>Upload Project Files</h3>
-			<div id="errorMsg" class="box-error-message">$errorMsg</div>
-			<div class="message">
-				<form id="upload-form" enctype="multipart/form-data" method="post" action="$!context/manager">
-					<fieldset>
-						<dl>
-							<dt>Job Archive</dt>
-							<dd><input id="file" name="file" class="file" type="file" /></dd>
-							<input type="hidden" name="project" value="$project.name" />
-							<input type="hidden" name="action" value="upload" />
-						</dl>
-					</fieldset>
-				</form>
-			</div>
-			<div class="actions">
-				<a class="yes btn2" id="upload-btn" href="#">Upload</a>
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-			</div>
-			<div id="invalid-session" class="modal">
-				<h3>Invalid Session</h3>
-				<p>Session has expired. Please re-login.</p>
-				<div class="actions">
-					<a class="yes btn2" id="login-btn" href="#">Re-login</a>
-				</div>
-			</div>
-		</div>
-		<div id="delete-project" class="modal">
-			<h3>Delete Project</h3>
-			<div class="warn">
-				<div class="warning-icon"></div>
-				<div class="warning-message"><p>Warning: This project will be deleted and may not be recoverable.</p></div>
-			</div>
-			<form id="delete-form">
-				<input type="hidden" name="project" value="$project.name" />
-				<input type="hidden" name="delete" value="true" />
-			</form>
-			
-			<div class="actions">
-				<a class="no simplemodal-close btn3" href="#">Cancel</a>
-				<a class="yes btn6" id="delete-btn" href="#">Yes</a>
-			</div>
-		</div>
-		#parse( "azkaban/webapp/servlet/velocity/flowexecutionpanel.vm" )
-		#parse( "azkaban/webapp/servlet/velocity/messagedialog.vm" )
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
+		</div><!-- /container -->
 	</body>
-	
 </html>
 

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
new file mode 100644
index 0000000..4eddc0f
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/projectpageheader.vm
@@ -0,0 +1,44 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+		<div class="az-page-header">
+			<div class="container">
+        <div class="row">
+          <div class="col-lg-6" id="project-page-header">
+            <h1><a href="${context}/manager?project=${project.name}">Project <small>$project.name</small></a></h1>
+            <p class="editable" id="project-description">$project.description</p>
+            <div id="project-description-form" class="editable-form">
+              <div class="input-group">
+                <input type="text" class="form-control input-sm" id="project-description-edit" placeholder="Project description">
+                <span class="input-group-btn">
+                  <button class="btn btn-primary btn-sm" type="button" id="project-description-btn">Save</button>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6">
+            <div class="pull-right az-page-header-form" id="project-options">
+              <button id="project-delete-btn" class="btn btn-sm btn-danger">
+                <span class="glyphicon glyphicon-trash"></span> Delete Project
+              </button>
+              <button id="project-upload-btn" class="btn btn-sm btn-primary">
+                <span class="glyphicon glyphicon-upload"></span> Upload
+              </button>
+            </div>
+          </div>
+        </div>
+			</div>
+		</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/projectsidebar.vm b/src/java/azkaban/webapp/servlet/velocity/projectsidebar.vm
new file mode 100644
index 0000000..20bb3bf
--- /dev/null
+++ b/src/java/azkaban/webapp/servlet/velocity/projectsidebar.vm
@@ -0,0 +1,27 @@
+#*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+*#
+
+					<div class="well">
+						<h3>$project.name</h3>
+						<p><strong>Created on</strong> $utils.formatDate($project.createTimestamp)</p>
+						<p><strong>Last modified by</strong> $utils.formatDate($project.lastModifiedTimestamp)</p>
+						<p><strong>Modified by</strong> $project.lastModifiedUser</p>
+
+						<hr>
+
+						<p><strong>Project admins:</strong> $admins</p>
+						<p><strong>Your Permissions:</strong> $userpermission.toString()</p>
+					</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
index d771ca6..08c40bf 100644
--- a/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/propertypage.vm
@@ -15,16 +15,12 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -36,73 +32,98 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="all")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-#if($errorMsg)
-			<div class="box-error-message">$errorMsg</div>
+#set($current_page="all")
+#parse("azkaban/webapp/servlet/velocity/nav.vm")
+		
+		<div class="container">
+#if ($errorMsg)
+  #parse("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-	<div class="content">
-	#if($error_message != "null")
-			<div class="box-error-message">$error_message</div>
-	#elseif($success_message != "null")
-			<div class="box-success-message">$success_message</div>
+  #parse("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+	## Page header
+
+		<div class="az-page-header">
+			<div class="container">
+        <h1><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=${property}">Properties <small>$property</small></a></h1>
+			</div>
+		</div>
+
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-8">
+
+	## Breadcrumb
+
+					<ol class="breadcrumb">
+						<li><a href="${context}/manager?project=${project.name}"><strong>Project</strong> $project.name</a></li>
+						<li><a href="${context}/manager?project=${project.name}&flow=${flowid}"><strong>Flow</strong> $flowid</a></li>
+						<li><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}"><strong>Job</strong> $jobid</a></li>
+            <li class="active"><strong>Properties</strong> $property</li>
+					</ol>
+	
+	## Properties
+
+					<div class="panel panel-default">
+						<div class="panel-heading">$property</div>
+
+						<table class="table table-striped table-bordered properties-table">
+							<thead>
+								<tr>
+									<th class="tb-pname">Parameter Name</th>
+									<th class="tb-pvalue">Value</th>
+								</tr>
+							</thead>
+							<tbody>
+	#foreach ($parameter in $parameters)
+								<tr>
+									<td class="property-key">$parameter.first</td>
+                  <td>$parameter.second</td>
+								</tr>
+	#end
+							</tbody>
+						</table>
+					</div>
+				</div><!-- /col-lg-8 -->
+				<div class="col-lg-4">
+					<div class="well" id="job-summary">
+						<h4>Properties <small>$property</small></h4>
+						<p><strong>Job</strong> $jobid</p>
+					</div>
+
+					<div class="panel panel-default">
+						<div class="panel-heading">Inherited From</div>
+						<ul class="list-group">
+	#if ($inheritedproperties) 
+		#foreach ($inheritedproperty in $inheritedproperties)
+							<li class="list-group-item"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$inheritedproperty">$inheritedproperty</a></li>
+		#end
+	#else
+							<li class="list-group-item">No inherited properties.</li>
 	#end
-			<div id="all-jobs-content">
-				<div class="section-hd">
-					<h2><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=${property}">Property <span>$property</span></a></h2>
-					<div class="section-sub-hd">
-						<h4><a href="${context}/manager?project=${project.name}">Project <span>$project.name</span></a></h4>
-						<h4 class="separator">&gt;</h4>
-						<h4><a href="${context}/manager?project=${project.name}&flow=${flowid}">Flow <span>$flowid</span></a></h4>
-						<h4 class="separator">&gt;</h4>
-						<h4><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}">Job <span>$jobid</span></a></h4>
+						</ul>
+					</div>
+
+					<div class="panel panel-default">
+						<div class="panel-heading">Source of</div>
+						<ul class="list-group">
+	#if ($dependingproperties) 
+		#foreach ($dependingproperty in $dependingproperties)
+							<li class="list-group-item"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$dependingproperty">$dependingproperty</a></li>
+		#end
+	#else
+							<li class="list-group-item">No dependents.</li>
+	#end
+						</ul>
 					</div>
 				</div>
-			</div>
-			
-			<div id="property-summary">
-				<table class="summary-table">
-					<tr><td class="first">Inherited From:</td><td>
-#if ($inheritedproperties) 
-#foreach($inheritedproperty in $inheritedproperties)
-					<a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$inheritedproperty">$inheritedproperty</a>
-#end
-#else
-					<span>No Inherited Properties</span>
-#end
-					</td></tr>
-					<tr><td class="first">Source Of:</td><td>
-#if ($dependingproperties) 
-#foreach($dependingproperty in $dependingproperties)
-					<span class="nowrap"><a href="${context}/manager?project=${project.name}&flow=${flowid}&job=${jobid}&prop=$dependingproperty">$dependingproperty</a></span>
-#end
-#else
-					<span>No Dependents</span>
-#end
-					</td></tr>
+			</div><!-- /row -->
 
-				</table>
-			</div>
-			
-			<table id="all-jobs" class="all-jobs job-table parameters">
-				<thead>
-					<tr>
-						<th class="tb-pname">Parameter Name</th>
-						<th class="tb-pvalue">Value</th>
-					</tr>
-				</thead>
-				<tbody>
-#foreach($parameter in $parameters)
-					<tr>
-						<td class="first">$parameter.first</td><td>$parameter.second</td>
-					</tr>
 #end
-				</tbody>
-			</table>
-	</div>
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 
-#end
+		</div><!-- /container -->
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
index 621dc5f..18ad3f7 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowcalendarpage.vm
@@ -15,24 +15,20 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
+
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui.css" />
 		
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 		<script type="text/javascript" src="${context}/js/jquery/jquery.svg.min.js"></script>    
-		
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.schedule.svg.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.context.menu.js"></script>
 		<script type="text/javascript" src="${context}/js/svgNavigate.js"></script>
@@ -46,39 +42,40 @@
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery.svg.css" />
 	</head>
 	<body>
-#set($current_page="schedule")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-		
-#if($errorMsg)
-		<div class="box-error-message">$errorMsg</div>
+#set ($current_page="schedule")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+    <div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-		<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-		<div class="box-success-message">$success_message</div>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 #end
-#end		
-		
-		<div id="all-scheduledFlows-content">
-			<div class="section-hd">
-				<h2>Scheduled Flows</h2>
-			</div>
-		</div>
-		
-		<div class="scheduledFlows">
-			<span class="nav-prev-week btn1" style="margin: 20px; margin-left: 50px;"><a>Previous Week</a></span>
-			<span class="nav-this-week btn1" style="margin: 20px;"><a>Today</a></span>
-			<span class="nav-next-week btn1" style="margin: 20px; margin-right: 50px;"><a>Next Week</a></span>
-			<div id="svgDivCustom">
-			
-			</div>
-		</div>
-		</div>
-		
-		<div id="contextMenu">
 		</div>
+
+    <div class="az-page-header">
+      <div class="container">
+        <h1>Scheduled Flows</h1>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="pull-right">
+            <button type="button" class="nav-prev-week btn btn-default">Previous Week</button>
+            <button type="button" class="nav-this-week btn btn-default">Today</button>
+            <button type="button" class="nav-next-week btn btn-default">Next Week</button>
+          </div>
+          <div id="svgDivCustom"></div>
+        </div>
+      </div>
+      
+      <div id="contextMenu"></div>
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+    </div>
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
index 0987dd6..3036890 100644
--- a/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/scheduledflowpage.vm
@@ -15,23 +15,17 @@
 *#
 
 <!DOCTYPE html> 
-<html>
-	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
-		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui.css" />
-		
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
+<html lang="en">
+  <head>
+
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
+		<link rel="stylesheet" type="text/css" href="${context}/css/bootstrap-datetimepicker.css" />
 		
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
-		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
+		<script type="text/javascript" src="${context}/js/moment.min.js"></script>
+		<script type="text/javascript" src="${context}/js/bootstrap-datetimepicker.min.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.scheduled.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -42,123 +36,126 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="schedule")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-		
-#if($errorMsg)
-		<div class="box-error-message">$errorMsg</div>
+#set ($current_page="schedule")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+		<div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-		<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-		<div class="box-success-message">$success_message</div>
-#end
-#end		
-		
-			<div id="all-scheduledFlows-content">
-				<div class="section-hd">
-					<h2>Scheduled Flows</h2>
-				</div>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+		</div>
+
+	## Page header.
+
+		<div class="az-page-header">
+			<div class="container">
+        <h1><a href="${context}/schedule">Scheduled Flows</a></h1>
 			</div>
-			
-			<div class="scheduledFlows">
-				<table id="scheduledFlowsTbl">
-					<thead>
-						<tr>
-							<!--th class="execid">Execution Id</th-->
-							<th>ID</th>
-							<th>Flow</th>
-							<th>Project</th>
-							<th>Submitted By</th>
-							<th class="date">First Scheduled to Run</th>
-							<th class="date">Next Execution Time</th>
-							<th class="date">Repeats Every</th>
-							<th>Has SLA</th>
-							<th colspan="2" class="action ignoresort">Action</th>
-						</tr>
-					</thead>
-					<tbody>
-#if(!$schedules.isEmpty())
-	#foreach($sched in $schedules)
-						<tr class="row" >
+		</div>
 
-							<td>${sched.scheduleId}</td>
-							<td class="tb-name">
-								<a href="${context}/manager?project=${sched.projectName}&flow=${sched.flowName}">${sched.flowName}</a>
-							</td>
-							<td>
-								<a href="${context}/manager?project=${sched.projectName}">${sched.projectName}</a>
-							</td>
-							<td>${sched.submitUser}</td>
-							<td>$utils.formatDateTime(${sched.firstSchedTime})</td>
-							<td>$utils.formatDateTime(${sched.nextExecTime})</td>
-							<td>$utils.formatPeriod(${sched.period})</td>
-							<td>#if(${sched.slaOptions}) true #else false #end</td>
-							<td><button id="removeSchedBtn" onclick="removeSched(${sched.scheduleId})" >Remove Schedule</button></td>
-							<td><button id="addSlaBtn" onclick="slaView.initFromSched(${sched.scheduleId}, '${sched.flowName}')" >Set SLA</button></td>
-						</tr>
+	## Page content.
+
+		<div class="container">
+			<div class="row">
+				<div class="col-lg-12">
+          <table id="scheduledFlowsTbl" class="table table-striped table-condensed table-bordered table-hover">
+            <thead>
+              <tr>
+                <!--th class="execid">Execution Id</th-->
+                <th>ID</th>
+                <th>Flow</th>
+                <th>Project</th>
+                <th>Submitted By</th>
+                <th class="date">First Scheduled to Run</th>
+                <th class="date">Next Execution Time</th>
+                <th class="date">Repeats Every</th>
+                <th>Has SLA</th>
+                <th colspan="2" class="action ignoresort">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+	#if(!$schedules.isEmpty())
+		#foreach($sched in $schedules)
+              <tr>
+                <td>${sched.scheduleId}</td>
+                <td class="tb-name">
+                  <a href="${context}/manager?project=${sched.projectName}&flow=${sched.flowName}">${sched.flowName}</a>
+                </td>
+                <td>
+                  <a href="${context}/manager?project=${sched.projectName}">${sched.projectName}</a>
+                </td>
+                <td>${sched.submitUser}</td>
+                <td>$utils.formatDateTime(${sched.firstSchedTime})</td>
+                <td>$utils.formatDateTime(${sched.nextExecTime})</td>
+                <td>$utils.formatPeriod(${sched.period})</td>
+                <td>#if(${sched.slaOptions}) true #else false #end</td>
+                <td><button type="button" id="removeSchedBtn" class="btn btn-sm btn-danger" onclick="removeSched(${sched.scheduleId})" >Remove Schedule</button></td>
+                <td><button type="button" id="addSlaBtn" class="btn btn-sm btn-primary" onclick="slaView.initFromSched(${sched.scheduleId}, '${sched.flowName}')" >Set SLA</button></td>
+              </tr>
+		#end
+	#else
+              <tr>
+                <td colspan="10">No scheduled flow found.</td>
+              </tr>
 	#end
-#else
-						<tr><td class="last">No Scheduled Flow Found</td></tr>
-#end
-					</tbody>
-				</table>
-			</div>
+            </tbody>
+          </table>
+				</div><!-- /col-lg-12 -->
+			</div><!-- /row -->
 
-		<!-- modal content -->
+## Set SLA modal.
 
-		<div id="slaModalBackground" class="modalBackground2">
-			<div id="sla-options" class="modal modalContainer2">
-				<a href='#' title='Close' class='modal-close'>x</a>
-					<h3>SLA Options</h3>
-					<div>
-						<ul class="optionsPicker">
-							<li id="slaOptions">General SLA Options</li>
-						</ul>
-					</div>
-					<div class="optionsPane">
-						<div id="generalPanel" class="generalPanel panel">
-							<div id="slaActions">
-								<h4>SLA Alert Emails</h4>
-								<dl>
-									<dt >SLA Alert Emails</dt>
-									<dd>
-										<textarea id="slaEmails"></textarea>
-									</dd>
-								</dl>
-							</div>
-							<br></br>
-							<div id="slaRules">
-								<h4>Flow SLA Rules</h4>
-								<div class="tableDiv">
-									<table id="flowRulesTbl">
-										<thead>
-											<tr>
-												<th>Flow/Job</th>
-												<th>Sla Rule</th>
-												<th>Duration</th>
-												<th>Email Action</th>
-												<th>Kill Action</th>
-											</tr>
-										</thead>
-										<tbody>
-											<tr id="addRow"><td id="addRow-col" colspan="5"><span class="addIcon"></span><a href="#">Add Row</a></td></tr>
-										</tbody>
-									</table>
+			<div class="modal modal-wide" id="sla-options">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">SLA Options</h4>
+						</div>
+						<div class="modal-body">
+							<h4>SLA Alert Emails</h4>
+							<fieldset>
+								<div class="form-group">
+									<label>SLA Alert Emails</label>
+									<textarea id="slaEmails" class="form-control"></textarea>
 								</div>
-							
-							</div>
+							</fieldset>
+							<h4>Flow SLA Rules</h4>
+							<table class="table table-striped" id="flowRulesTbl">
+								<thead>
+									<tr>
+										<th>Flow/Job</th>
+										<th>Sla Rule</th>
+										<th>Duration</th>
+										<th>Email Action</th>
+										<th>Kill Action</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr id="addRow">
+										<td id="addRow-col" colspan="5">
+											<span class="addIcon"></span>
+											<button type="button" class="btn btn-xs btn-success">Add Row</button>
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<!--<button type="button" class="btn btn-danger" id="remove-sla-btn">Remove SLA</button>-->
+							<button type="button" class="btn btn-primary" id="set-sla-btn">Set/Change SLA</button>
 						</div>
 					</div>
-					<div class="actions">
-						<!--a class="yes btn1" id="remove-sla-btn" href="#">Remove SLA</a-->
-						<a class="yes btn1" id="set-sla-btn" href="#">Set/Change SLA</a>
-						<a class="no simplemodal-close btn3" id="sla-cancel-btn" href="#">Cancel</a>
-					</div>
+				</div>
 			</div>
+#end
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+
 		</div>
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm b/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
index 1f54c5d..3381d91 100644
--- a/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/schedulepanel.vm
@@ -14,52 +14,63 @@
  * the License.
 *#
 
-<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>  
-<script type="text/javascript" src="${context}/js/azkaban.schedule.panel.view.js"></script>
-
-<div id="scheduleModalBackground" class="modalBackground3">
-	<div id="schedule-panel-top">
-		<div id="schedule-panel" class="modal">
-			<a href='#' title='Close' class='modal-close closeSchedule'>x</a>
-			<h3>Schedule Flow Options</h3>
-
-			<div id="scheduleInfo">
-				<dl>
-					<dt>Schedule Time</dt>
-					<dd>
-						<input id="hour" type="text" size="2" value="12"/>
-						<input id="minutes" type="text" size="2" value="00"/>
-						<select id="am_pm">
-						  <option>pm</option>
-						  <option>am</option>
-						</select>
-						<select id="timezone">
-						  <option>${timezone}</option>
-						  <option>UTC</option>
-						</select>
-					</dd>
-					<dt>Schedule Date</dt><dd><input type="text" id="datepicker" /></dd>
-					<dt>Recurrence</dt>
-					<dd>
-						<input id="is_recurring" type="checkbox" checked  />
-						<span>repeat every</span>
-					 	<input id="period" type="text" size="2" value="1"/>
-						<select id="period_units">
-						  <option value="d">Days</option>
-						  <option value="h">Hours</option>
-						  <option value="m">Minutes</option>
-						  <option value="M">Months</option>
-						  <option value="w">Weeks</option>
-						</select>
-					</dd>
-				</dl>
-			</div>
-	
-
-			<div class="actions">
-				<a class="yes btn1" id="schedule-button" href="#">Schedule</a>
-				<a class="no simplemodal-close btn3 closeSchedule" id="cancel-schedule-btn" href="#">Cancel</a>
+			<script type="text/javascript" src="${context}/js/azkaban.date.utils.js"></script>  
+			<script type="text/javascript" src="${context}/js/azkaban.schedule.panel.view.js"></script>
+			
+			<div class="modal" id="schedule-modal">
+				<div class="modal-dialog">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+							<h4 class="modal-title">Schedule Flow Options</h4>
+						</div><!-- /modal-header -->
+						<div class="modal-body">
+							<fieldset class="form-horizontal">
+								<div class="form-group">
+                  <label class="col-sm-2 control-label">Time</label>
+                  <div class="col-sm-7">
+                    <input type="text" id="timepicker" class="form-control">
+                  </div>
+                  <div class="col-sm-3">
+                    <select id="timezone" class="form-control">
+                      <option>${timezone}</option>
+                      <option>UTC</option>
+                    </select>
+                  </div>
+								</div>
+								<div class="form-group">
+                  <label class="col-sm-2 control-label">Date</label>
+                  <div class="col-sm-10">
+                    <input type="text" id="datepicker" class="form-control">
+                  </div>
+								</div>
+								<div class="form-group">
+                  <label class="col-sm-2">Recurrence</label>
+                  <div class="col-sm-3">
+                    <div class="checkbox">
+                      <input id="is_recurring" type="checkbox" checked="checked">
+                      <label>repeat every</label>
+                    </div>
+                  </div>
+                  <div class="col-sm-2">
+                    <input id="period" type="text" size="2" value="1" class="form-control">
+                  </div>
+                  <div class="col-sm-3">
+                    <select id="period_units" class="form-control">
+                      <option value="d">Days</option>
+                      <option value="h">Hours</option>
+                      <option value="m">Minutes</option>
+                      <option value="M">Months</option>
+                      <option value="w">Weeks</option>
+                    </select>
+                  </div>
+								</div>
+							</fieldset>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+							<button type="button" class="btn btn-success" id="schedule-button">Schedule</button>
+						</div>
+					</div>
+				</div>
 			</div>
-		</div>
-	</div>
-</div>

diff --git a/src/java/azkaban/webapp/servlet/velocity/style.vm b/src/java/azkaban/webapp/servlet/velocity/style.vm
index 67a7e4a..73df059 100644
--- a/src/java/azkaban/webapp/servlet/velocity/style.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/style.vm
@@ -14,19 +14,28 @@
  * the License.
 *#
 
-		<title>#appname()
-		</title>
-		<link rel="stylesheet" type="text/css" href="${context}/css/azkaban.css" /> 
+    <meta charset="utf-8">
+    <title>#appname()</title>
+    
 		<link rel="shortcut icon" href="${context}/favicon.ico" />
+    <!-- Bootstrap core CSS -->
+    <link href="/css/bootstrap.css" rel="stylesheet">
+    <link href="/css/bootstrap-fileinput.css" rel="stylesheet">
+		<link href="/css/bootstrap-azkaban.css" rel="stylesheet">
 		<style type="text/css">
-			.enviro-name {
+			.navbar-enviro .navbar-enviro-name {
 				color: ${azkaban_color};
 			}
-			.header {
-				border-top-color: ${azkaban_color};
+			.navbar-inverse {
+				border-top: 5px solid ${azkaban_color};
 			}
-			.nav .selected a {
-				border-bottom-color: ${azkaban_color};
+			.navbar-inverse .navbar-nav > .active >a {
+				border-bottom: 1px solid ${azkaban_color};
 			}
 		</style>
-		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="/js/html5shiv.js"></script>
+      <script src="/js/respond.min.js"></script>
+    <![endif]-->

diff --git a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
index 6ccb348..e2bb94e 100644
--- a/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/triggerspage.vm
@@ -15,23 +15,19 @@
 *#
 
 <!DOCTYPE html> 
-<html>
+<html lang="en">
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
+
+#parse("azkaban/webapp/servlet/velocity/style.vm")
+#parse("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui-1.10.1.custom.css" />
 		<link rel="stylesheet" type="text/css" href="${context}/css/jquery-ui.css" />
 		
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-1.10.1.custom.js"></script>
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
-		
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-timepicker-addon.js"></script> 
 		<script type="text/javascript" src="${context}/js/jqueryui/jquery-ui-sliderAccess.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.table.sort.js"></script>
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
 		<script type="text/javascript" src="${context}/js/azkaban.triggers.view.js"></script>
 		<script type="text/javascript">
 			var contextURL = "${context}";
@@ -42,58 +38,60 @@
 		</script>
 	</head>
 	<body>
-#set($current_page="triggers")
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="messaging"><p id="messageClose">X</p><p id="message"></p></div>  
 
-		<div class="content">
-		
-#if($errorMsg)
-		<div class="box-error-message">$errorMsg</div>
+#set ($current_page="triggers")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+    <div class="container">
+#parse ("azkaban/webapp/servlet/velocity/message.vm")
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
 #else
-#if($error_message != "null")
-		<div class="box-error-message">$error_message</div>
-#elseif($success_message != "null")
-		<div class="box-success-message">$success_message</div>
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
 #end
-#end		
-		
-			<div id="all-triggers-content">
-				<div class="section-hd">
-					<h2>All Triggers</h2>
-				</div>
-			</div>
-			
-			<div class="triggers">
-				<table id="triggersTbl">
-					<thead>
-						<tr>
-							<th>ID</th>
-							<th>Source</th>
-							<th>Submitted By</th>
-							<th>Description</th>
-							<th>Status</th>
-							<!--th colspan="2" class="action ignoresort">Action</th-->
-						</tr>
-					</thead>
-					<tbody>
-						#if($triggers)
-#foreach($trigger in $triggers)
-						<tr class="row" >
+		</div>
 
-							<td>${trigger.triggerId}</td>
-							<td>${trigger.source}</td>
-							<td>${trigger.submitUser}</td>
-							<td>${trigger.getDescription()}</td>
-							<td>${trigger.getStatus()}</td>
-							<!--td><button id="expireTriggerBtn" onclick="expireTrigger(${trigger.triggerId})" >Expire Trigger</button></td-->
-						</tr>
-#end
+    <div class="az-page-header">
+      <div class="container">
+        <h1>All Triggers</h1>
+      </div>
+    </div>
+			
+    <div class="container">
+			<div class="row">
+        <div class="col-lg-12">
+          <table id="triggersTbl" class="table table-striped table-bordered table-condensed table-hover">
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Source</th>
+                <th>Submitted By</th>
+                <th>Description</th>
+                <th>Status</th>
+                <!--th colspan="2" class="action ignoresort">Action</th-->
+              </tr>
+            </thead>
+            <tbody>
+#if($triggers)
+  #foreach($trigger in $triggers)
+              <tr>
+                <td>${trigger.triggerId}</td>
+                <td>${trigger.source}</td>
+                <td>${trigger.submitUser}</td>
+                <td>${trigger.getDescription()}</td>
+                <td>${trigger.getStatus()}</td>
+                <!--td><button id="expireTriggerBtn" onclick="expireTrigger(${trigger.triggerId})" >Expire Trigger</button></td-->
+              </tr>
+  #end
 #else
-						<tr><td class="last">No Trigger Found</td></tr>
+              <tr><td class="last">No Trigger Found</td></tr>
 #end
-					</tbody>
-				</table>
-			</div>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
+    </div>
 	</body>
 </html>

diff --git a/src/java/azkaban/webapp/servlet/velocity/viewer.vm b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
index 7d18bee..3ff5761 100644
--- a/src/java/azkaban/webapp/servlet/velocity/viewer.vm
+++ b/src/java/azkaban/webapp/servlet/velocity/viewer.vm
@@ -17,14 +17,10 @@
 <!DOCTYPE html> 
 <html>
 	<head>
-#parse( "azkaban/webapp/servlet/velocity/style.vm" )
-		<script type="text/javascript" src="${context}/js/jquery/jquery-1.9.1.js"></script>    
-		<script type="text/javascript" src="${context}/js/underscore-1.4.4-min.js"></script>
-		<script type="text/javascript" src="${context}/js/namespace.js"></script>
-		<script type="text/javascript" src="${context}/js/backbone-0.9.10-min.js"></script>
-		<script type="text/javascript" src="${context}/js/jquery.simplemodal-1.4.4.js"></script>
 
-		<script type="text/javascript" src="${context}/js/azkaban.nav.js"></script>
+#parse ("azkaban/webapp/servlet/velocity/style.vm")
+#parse ("azkaban/webapp/servlet/velocity/javascript.vm")
+
 		<script type="text/javascript">
 			var contextURL = "${context}";
 			var currentTime = ${currentTime};
@@ -41,22 +37,19 @@
 		</style>
 	</head>
 	<body>
-#set($current_page="viewer")
 
-#parse( "azkaban/webapp/servlet/velocity/nav.vm" )
-		<div class="content">
-		
-		#if($errorMsg)
-                	<div class="box-error-message">$errorMsg</div>
-		#else
-			#if($error_message != "null")
-	                <div class="box-error-message">$error_message</div>
-			#elseif($success_message != "null")
-        	        <div class="box-success-message">$success_message</div>
-			#end
-		#end
+#set ($current_page="viewer")
+#parse ("azkaban/webapp/servlet/velocity/nav.vm")
+
+    <div class="container">
+#if ($errorMsg)
+  #parse ("azkaban/webapp/servlet/velocity/errormsg.vm")
+#else
+  #parse ("azkaban/webapp/servlet/velocity/alerts.vm")
+#end
 
-#parse($viewervm)
+#parse ($viewervm)
+#parse ("azkaban/webapp/servlet/velocity/footer.vm")
 		
 		</div>
 	</body>

diff --git a/src/less/azkaban-svg.less b/src/less/azkaban-svg.less
new file mode 100644
index 0000000..31811f9
--- /dev/null
+++ b/src/less/azkaban-svg.less
@@ -0,0 +1,133 @@
+svg {
+  .edge {
+    stroke: #777;
+    stroke-width: 2;
+    &:hover {
+      stroke: #009FC9;
+      stroke-width: 4;
+    }
+  }
+
+  .node {
+    &.disabled {
+      opacity: 0.3;
+    }
+    .backboard {
+      fill: #FFF;
+      opacity: 0.05;
+    }
+    circle {
+      fill: #888;
+      stroke: #777;
+      stroke-width: 2;
+    }
+
+    &:hover {
+      cursor: pointer;
+      .backboard {
+        opacity: 0.7;
+      }
+      circle {
+        stroke: #009FC9;
+      }
+      text {
+        fill: #009FC9;
+      }
+    }
+  }
+
+  .selected {
+    .backboard {
+      opacity: 0.4;
+    }
+
+    text {
+      fill: #338AB0;
+    }
+
+    circle {
+      stroke: #009FC9;
+      stroke-width: 4;
+    }
+  }
+
+  .READY circle {
+    fill: #CCC;
+  }
+
+  .RUNNING circle {
+    fill: #009FC9;
+  }
+
+  .QUEUED circle {
+    opacity: 0.5;
+    fill: #009FC9;
+  }
+
+  .FAILED circle {
+    fill: #CC0000;
+  }
+
+  .KILLED circle {
+    fill: #CC0000;
+  }
+
+  .SUCCEEDED circle {
+    fill: #00CC33;
+  }
+
+  .DISABLED circle {
+    opacity: 0.3;
+  }
+
+  .SKIPPED circle {
+    opacity: 0.3;
+  }
+
+  // Used for charts.
+  circle {
+    &.READY {
+      stroke: #CCC;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.RUNNING {
+      stroke: #009FC9;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.FAILED {
+      stroke: #CC0000;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.KILLED {
+      stroke: #CC0000;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.SUCCEEDED {
+      stroke: #00CC33;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.DISABLED {
+      stroke: #CCC;
+      opacity: 0.3;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+
+    &.SKIPPED {
+      stroke: #CCC;
+      opacity: 0.3;
+      stroke-width: 2px;
+      fill: #FFF;
+    }
+  }
+}

diff --git a/src/less/bootstrap-azkaban.less b/src/less/bootstrap-azkaban.less
new file mode 100644
index 0000000..bdeed19
--- /dev/null
+++ b/src/less/bootstrap-azkaban.less
@@ -0,0 +1,600 @@
+// Since the azkaban navbar no longer has the 20px bottom margin so that the
+// page header sits flush below the navbar, add a 20px top margin to the login
+// form.
+.login {
+  max-width: 360px;
+  margin: 20px auto;
+  .form-control {
+    position: relative;
+    font-size: 16px;
+    height: auto;
+    padding: 10px;
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+
+    &:focus {
+      z-index: 2;
+    }
+  }
+
+  input[type="text"] {
+    margin-bottom: -1px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  input[type="password"] {
+    margin-bottom: 20px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
+
+// Wide modal used for certain panels such as executing flow panel.
+.modal-wide .modal-dialog {
+  width: 80%;
+}
+
+// Hide messaging alert by default.
+.alert-messaging {
+  display: none;
+}
+
+// Add additional space under navs.
+.nav-tabs, .nav-pills {
+  margin-bottom: 15px;
+}
+
+.panel-list {
+  border: 0;
+}
+
+.list-group-collapse {
+  margin: 0;
+  .list-group-item {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    
+    &:first-child {
+      border-top: 0;
+    }
+    
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    button {
+      margin-left: 3px;
+    }
+  }
+}
+
+.az-project-row {
+	cursor: pointer;
+}
+
+// Flow panel heading.
+.flow-expander {
+  cursor: pointer;
+}
+
+table.table-properties {
+  table-layout: fixed;
+  word-wrap: break-word;
+}
+
+// Flow summary.
+td.property-key {
+  width: 25%;
+  font-weight: bold;
+}
+
+td.property-value-half {
+  width: 25%;
+}
+
+// Job table.
+#all-jobs {
+  .tb-name {
+    width: 70%;
+    border-bottom-width: 0;
+    border-bottom-style: none;
+  }
+
+  .tb-up-date {
+    width: 140px;
+    min-width: 130px;
+  }
+
+  .tb-owner {
+    width: 10%;
+    min-width: 95px;
+  }
+}
+
+// Properties table.
+.properties-table {
+  .all-jobs .tb-pname {
+  }
+
+  .all-jobs .tb-pvalue {
+  }
+}
+
+// Permissions page table.
+.permission-table {
+  .tb-perm {
+    width: 41px;
+    margin: 0px;
+  }
+
+  .tb-admin {
+    width: 41px;
+    margin: 0px;
+  }
+
+  .tb-read {
+    width: 33px;
+    margin: 0px;
+  }
+
+  .tb-write {
+    width: 34px;
+    margin: 0px;
+  }
+
+  .tb-execute {
+    width: 51px;
+    margin: 0px;
+  }
+
+  .tb-schedule {
+    margin: 0px;
+    width: 60px;
+  }
+
+  .tb-action {
+    margin: 0px;
+    width: 70px;
+    min-width: 70px;
+    max-width: 70px;
+  }
+}
+
+// Table of executions.
+.executions-table {
+  th {
+    &.date {
+      width: 140px;
+    }
+
+    &.execid {
+      width: 100px;
+    }
+
+    &.project {
+      width: 200px;
+    }
+
+    &.user {
+      width: 60px;
+    }
+
+    &.elapse {
+      width: 90px;
+    }
+
+    &.status {
+      width: 100px;
+    }
+
+    &.details {
+      width: 10px;
+    }
+
+    &.action {
+      width: 20px;
+    }
+  }
+
+  td {
+    &.timeline {
+      width: 280px;
+      padding: 0px;
+      height: 100%;
+      vertical-align: bottom;
+      margin: 0px;
+    }
+
+    &.execId {
+      font-weight: bold;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .control-label-center {
+    text-align: center;
+  }
+}
+
+.navbar-logo {
+  float: left;
+  padding: 15px 15px;
+  font-size: 18px;
+  line-height: 20px;
+
+  a {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar > .container .navbar-logo {
+    margin-left: -15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-enviro {
+    width: auto;
+  }
+}
+
+.navbar-enviro {
+  margin: 25px 20px 0px 10px;
+     
+  .navbar-enviro-name {
+    color: #ff3601;
+    font-family: Helvetica, Arial, Sans-Serif;
+    font-size: 118.75%;
+    font-weight: bold;
+  }
+       
+  .navbar-enviro-server {
+    color: #999;
+    font-family: Helvetica, Arial, Sans-Serif;
+    font-size: 75%;
+  }
+}
+
+// Restyle navbar-inverse for Azkaban navbar.
+.navbar-inverse {
+  background-color: #383838;
+  border-top: 5px solid #ff3601;
+  margin-bottom: 0;
+
+  .navbar-logo {
+    background: url('../../images/logo.png') top left no-repeat;
+    color: #ffffff;
+    font-size: 156.25%;
+    font-weight: bold;
+    margin: 15px 0.6% 15px 4.75%;
+    padding: 12px 0 11px 42px;
+
+    a {
+      color: #ffffff;
+      &:hover,
+      &:focus {
+        color: #ffffff;
+        background-color: transparent;
+      }
+    }
+  }
+
+  .navbar-nav {
+    font-family: Arial;
+    font-size: 81.25%;
+
+    > li {
+      padding: 25px 12px 25px 12px;
+      cursor: pointer;
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    > li > a {
+      padding: 0px;
+      color: #ccc;
+    }
+
+    > .active {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    > .active > a {
+      color: #fff;
+      font-weight: bold;
+      background-color: transparent;
+      border-bottom: 1px solid #ff3601;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    > .active > .open {
+      background-color: transparent;
+    }
+  }
+}
+
+.az-page-header {
+  padding: 5px 0 10px;
+  margin: 0 0 30px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #f4f4f4;
+
+  h1 {
+    font-size: 32px;
+    margin-bottom: 5px;
+  }
+  
+  .az-page-header-form {
+    margin-top: 20px;
+  }
+
+  .az-exflow-stats {
+    margin-top: 10px;
+  }
+
+  .editable {
+    margin: 0px;
+    cursor: pointer;
+    &:hover {
+      background-color: #fcfcfc;
+    }
+    &.editable-placeholder {
+      color: #a0a0a0;
+    }
+  }
+
+  .editable-form {
+    display: none;
+  }
+}
+
+.contextMenu {
+  position: absolute;
+  background-color: #FFF;
+  border: 1px solid #DDD;
+  -moz-box-shadow: 2px 2px 5px #888;
+  -webkit-box-shadow: 2px 2px 5px #888;
+  box-shadow: 2px 2px 5px #888;
+  z-index: 2010;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    &.menuitem {
+      background-color: #FFF;
+      padding: 3px 20px;
+      min-width: 50px;
+      font-size: 10pt;
+      cursor: pointer;
+    
+      .expandSymbol {
+        background-image: url("../css/images/ui-icons_cccccc_256x240.png");
+        background-position: -32px -16px;
+        height: 16px;
+        width: 16px;
+        float:right;
+      }
+      
+      &:hover {
+        background-color: #555;
+        color: #FFF;
+      }
+    }
+
+    &.break {
+      border-bottom: 1px solid #BBB;
+      margin: 2px 5px;
+    }
+  }
+}
+
+.well-clear {
+  background-color: transparent;
+}
+
+#flow-graph {
+  width: 750px;
+  height: 500px;
+}
+
+#flow-executing-graph {
+  width: 100%;
+  height: 500px;
+}
+
+.flow-progress {
+	width: 280px;
+	margin: 4px;
+  background-color: #f5f5f5;
+  height: 24px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.flow-progress-bar {
+	height: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+
+  &.attempt {
+    opacity: 0.70;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &.SUCCEEDED {
+    background-color: #5cb85c;
+  }
+
+  &.FAILED {
+    background-color: #d9534f;
+  }
+
+  &.RUNNING {
+    background-color: #3398cc;	
+    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+    background-size: 40px 40px;
+    -webkit-animation: progress-bar-stripes 2s linear infinite;
+            animation: progress-bar-stripes 2s linear infinite;
+  }
+
+  &.QUEUED {
+    background-color: #009fc9;
+  }
+}
+
+td {
+  .status {
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+
+    padding: 2px 2px;
+    color: #FFF;
+    text-align: center;
+    margin-top: 2px;
+    
+    &.SUCCEEDED {
+      background-color: #5cb85c;
+    }
+
+    &.FAILED {
+      background-color: #d9534f;
+    }
+
+    &.PAUSED {
+      background-color: #c82123;
+    }
+
+    &.READY {
+      background-color: #ccc;
+    }
+
+    &.RUNNING {
+      background-color: #3398cc;	
+    }
+
+    &.FAILED_FINISHING {
+      background-color: #f19153;	
+    }
+
+    &.DISABLED {
+      background-color: #aaa;	
+    }
+
+    &.SKIPPED {
+      background-color: #aaa;	
+    }
+
+    &.KILLED {
+      background-color: #d9534f;
+    }
+
+    &.UNKNOWN {
+      background-color: #ccc;
+    }
+  }
+}
+
+.nav {
+	.nav-button {
+		margin-left: 5px;
+	}
+}
+
+.log-viewer {
+  padding: 0;
+  background-color: #fcfcfc;
+
+  pre {
+    margin: 0;
+    border: 0;
+    height: 500px;
+    font-size: 12px;
+    background-color: transparent;
+    overflow: auto;
+    width: auto;
+    word-wrap: normal;
+    white-space: pre;
+  }
+}
+
+.panel-body-stats {
+  padding: 0;
+  overflow: auto;
+
+  table {
+    margin-bottom: 0;
+  }
+}
+
+// TODO: Rename this as #job-list
+#list {
+  a {
+    &.nodedisabled,
+    &.DISABLED {
+      opacity: 0.3;
+    }
+
+    &.DISABLED .icon {
+      background-position: 16px 0px;
+    }
+
+    &.READY .icon {
+      background-position: 16px 0px;
+    }
+
+    &.QUEUED .icon {
+      opacity: 0.5;
+      background-position: 32px 0px;
+    }
+
+    &.RUNNING .icon {
+      background-position: 32px 0px;
+    }
+
+    &.SUCCEEDED .icon {
+      background-position: 48px 0px;
+    }
+
+    &.FAILED .icon {
+      background-position: 0px 0px;
+    }
+
+    &.KILLED .icon {
+      background-position: 0px 0px;
+    }
+
+    .icon {
+      float: left;
+      width: 16px;
+      height: 16px;
+      margin: 2px 4px 0px -5px;
+      background-image: url("./images/dot-icon.png");
+      background-position: 16px 0px;
+    }
+  }
+}

diff --git a/src/tl/flowsummary.tl b/src/tl/flowsummary.tl
new file mode 100644
index 0000000..10a0680
--- /dev/null
+++ b/src/tl/flowsummary.tl
@@ -0,0 +1,112 @@
+        <div class="col-lg-12">
+          <table class="table table-bordered table-condensed table-striped">
+            <tbody>
+              <tr>
+                <td class="property-key">Flow name</td>
+                <td class="property-value-half">{flowName}</td>
+                <td class="property-key">Project name</td>
+                <td class="property-value-half">{projectName}</td>
+              </tr>
+              <tr>
+                <td class="property-key">Run As</td>
+                <td class="property-value-half">{user}</td>
+                <td class="property-key">Job Types Used</td>
+                <td class="property-value-half">{#jobTypes}{.} {/jobTypes}</td>
+              </tr>
+            </tbody>
+          </table>
+					
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							Scheduling
+							{?schedule}
+							<div class="pull-right">
+								<button type="button" id="removeSchedBtn" class="btn btn-xs btn-danger" onclick="removeSched({schedule.scheduleId})" >Remove Schedule</button>
+							</div>
+							{/schedule}
+						</div>
+						{?schedule}
+						<table class="table table-condensed table-bordered table-striped">
+							<tbody>
+								<tr>
+									<td class="property-key">Schedule ID</td>
+									<td class="property-value-half">{schedule.scheduleId}</td>
+									<td class="property-key">Submitted By</td>
+									<td class="property-value-half">{schedule.submitUser}</td>
+								</tr>
+								<tr>
+									<td class="property-key">First Scheduled to Run</td>
+									<td class="property-value-half">{schedule.firstSchedTime}</td>
+									<td class="property-key">Repeats Every</td>
+									<td class="property-value-half">{schedule.period}</td>
+								</tr>
+								<tr>
+									<td class="property-key">Next Execution Time</td>
+									<td class="property-value-half">{schedule.nextExecTime}</td>
+									<td class="property-key">SLA</td>
+									<td class="property-value-half">
+									{?schedule.slaOptions}
+										true 
+									{:else} 
+										false 
+									{/schedule.slaOptions}
+										<div class="pull-right">
+											<button type="button" id="addSlaBtn" class="btn btn-xs btn-primary" onclick="slaView.initFromSched({schedule.scheduleId}, '{flowName}')" >Set SLA</button>
+										</div>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+						{:else}
+						<div class="panel-body">
+							<div class="alert alert-info">
+								<h4>No Schedule</h4>
+								<p>This flow has not been scheduled.</p>
+							</div>
+						</div>
+						{/schedule}
+					</div>
+
+          <div class="panel panel-default">
+            <div class="panel-heading">Last Run Stats</div>
+            {?lastRun}
+            <table class="table table-bordered table-condensed table-striped">
+              <tbody>
+								<tr>
+									<td class="property-key">Max Map Slots from Largest Job</td>
+									<td>{lastRun.maxMapSlots}</td>
+                </tr>
+                <tr>
+									<td class="property-key">Max Reduce Slots from Largest Job</td>
+									<td>{lastRun.maxReduceSlots}</td>
+								</tr>
+								<tr>
+									<td class="property-key">Total Map Slots from All Jobs</td>
+									<td>{lastRun.totalMapSlots}</td>
+                </tr>
+                <tr>
+									<td class="property-key">Total Reduce Slots from All Jobs</td>
+									<td>{lastRun.totalReduceSlots}</td>
+								</tr>
+								<tr>
+									<td class="property-key">Total Number of Jobs</td>
+									<td>{lastRun.numJobs}</td>
+                </tr>
+                <tr>
+									<td class="property-key">Longest Task Time</td>
+									<td>{lastRun.longestTaskTime}</td>
+								</tr>
+              </tbody>
+            </table>
+            {:else}
+            <div class="panel-body">
+              <div class="alert alert-info">
+                <h4>No last run stats available</h4>
+                <p>Last run stats requires at least one successful run of the flow.</p>
+              </div>
+            </div>
+            {/lastRun}
+          </div>
+        </div><!-- /.col-lg-12 -->
+
+

diff --git a/src/web/css/bootstrap.css b/src/web/css/bootstrap.css
new file mode 100644
index 0000000..fb50e38
--- /dev/null
+++ b/src/web/css/bootstrap.css
@@ -0,0 +1,7098 @@
+/*!
+ * Bootstrap v3.0.2 by @fat and @mdo
+ * Copyright 2013 Twitter, Inc.
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by @mdo and @fat.
+ */
+
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden],
+template {
+  display: none;
+}
+
+html {
+  font-family: sans-serif;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+a {
+  background: transparent;
+}
+
+a:focus {
+  outline: thin dotted;
+}
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+h1 {
+  margin: 0.67em 0;
+  font-size: 2em;
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
+hr {
+  height: 0;
+  -moz-box-sizing: content-box;
+       box-sizing: content-box;
+}
+
+mark {
+  color: #000;
+  background: #ff0;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+
+pre {
+  white-space: pre-wrap;
+}
+
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+img {
+  border: 0;
+}
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+figure {
+  margin: 0;
+}
+
+fieldset {
+  padding: 0.35em 0.625em 0.75em;
+  margin: 0 2px;
+  border: 1px solid #c0c0c0;
+}
+
+legend {
+  padding: 0;
+  border: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+}
+
+button,
+input {
+  line-height: normal;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  padding: 0;
+  box-sizing: border-box;
+}
+
+input[type="search"] {
+  -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+          box-sizing: content-box;
+  -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+@media print {
+  * {
+    color: #000 !important;
+    text-shadow: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: "";
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  @page  {
+    margin: 2cm .5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+  select {
+    background: #fff !important;
+  }
+  .navbar {
+    display: none;
+  }
+  .table td,
+  .table th {
+    background-color: #fff !important;
+  }
+  .btn > .caret,
+  .dropup > .btn > .caret {
+    border-top-color: #000 !important;
+  }
+  .label {
+    border: 1px solid #000;
+  }
+  .table {
+    border-collapse: collapse !important;
+  }
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid #ddd !important;
+  }
+}
+
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #333333;
+  background-color: #ffffff;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+a {
+  color: #428bca;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: #2a6496;
+  text-decoration: underline;
+}
+
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+img {
+  vertical-align: middle;
+}
+
+.img-responsive {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.img-rounded {
+  border-radius: 6px;
+}
+
+.img-thumbnail {
+  display: inline-block;
+  height: auto;
+  max-width: 100%;
+  padding: 4px;
+  line-height: 1.428571429;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
+}
+
+.img-circle {
+  border-radius: 50%;
+}
+
+hr {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+.lead {
+  margin-bottom: 20px;
+  font-size: 16px;
+  font-weight: 200;
+  line-height: 1.4;
+}
+
+@media (min-width: 768px) {
+  .lead {
+    font-size: 21px;
+  }
+}
+
+small,
+.small {
+  font-size: 85%;
+}
+
+cite {
+  font-style: normal;
+}
+
+.text-muted {
+  color: #999999;
+}
+
+.text-primary {
+  color: #428bca;
+}
+
+.text-primary:hover {
+  color: #3071a9;
+}
+
+.text-warning {
+  color: #c09853;
+}
+
+.text-warning:hover {
+  color: #a47e3c;
+}
+
+.text-danger {
+  color: #b94a48;
+}
+
+.text-danger:hover {
+  color: #953b39;
+}
+
+.text-success {
+  color: #468847;
+}
+
+.text-success:hover {
+  color: #356635;
+}
+
+.text-info {
+  color: #3a87ad;
+}
+
+.text-info:hover {
+  color: #2d6987;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small,
+.h1 small,
+.h2 small,
+.h3 small,
+.h4 small,
+.h5 small,
+.h6 small,
+h1 .small,
+h2 .small,
+h3 .small,
+h4 .small,
+h5 .small,
+h6 .small,
+.h1 .small,
+.h2 .small,
+.h3 .small,
+.h4 .small,
+.h5 .small,
+.h6 .small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999999;
+}
+
+h1,
+h2,
+h3 {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h1 .small,
+h2 .small,
+h3 .small {
+  font-size: 65%;
+}
+
+h4,
+h5,
+h6 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+h4 small,
+h5 small,
+h6 small,
+h4 .small,
+h5 .small,
+h6 .small {
+  font-size: 75%;
+}
+
+h1,
+.h1 {
+  font-size: 36px;
+}
+
+h2,
+.h2 {
+  font-size: 30px;
+}
+
+h3,
+.h3 {
+  font-size: 24px;
+}
+
+h4,
+.h4 {
+  font-size: 18px;
+}
+
+h5,
+.h5 {
+  font-size: 14px;
+}
+
+h6,
+.h6 {
+  font-size: 12px;
+}
+
+.page-header {
+  padding-bottom: 9px;
+  margin: 40px 0 20px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+  margin-bottom: 0;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline > li {
+  display: inline-block;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.list-inline > li:first-child {
+  padding-left: 0;
+}
+
+dl {
+  margin-bottom: 20px;
+}
+
+dt,
+dd {
+  line-height: 1.428571429;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+@media (min-width: 768px) {
+  .dl-horizontal dt {
+    float: left;
+    width: 160px;
+    overflow: hidden;
+    clear: left;
+    text-align: right;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .dl-horizontal dd {
+    margin-left: 180px;
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
+    display: table;
+    content: " ";
+  }
+  .dl-horizontal dd:after {
+    clear: both;
+  }
+  .dl-horizontal dd:before,
+  .dl-horizontal dd:after {
+    display: table;
+    content: " ";
+  }
+  .dl-horizontal dd:after {
+    clear: both;
+  }
+}
+
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted #999999;
+}
+
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+blockquote {
+  padding: 10px 20px;
+  margin: 0 0 20px;
+  border-left: 5px solid #eeeeee;
+}
+
+blockquote p {
+  font-size: 17.5px;
+  font-weight: 300;
+  line-height: 1.25;
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+blockquote small {
+  display: block;
+  line-height: 1.428571429;
+  color: #999999;
+}
+
+blockquote small:before {
+  content: '\2014 \00A0';
+}
+
+blockquote.pull-right {
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid #eeeeee;
+  border-left: 0;
+}
+
+blockquote.pull-right p,
+blockquote.pull-right small,
+blockquote.pull-right .small {
+  text-align: right;
+}
+
+blockquote.pull-right small:before,
+blockquote.pull-right .small:before {
+  content: '';
+}
+
+blockquote.pull-right small:after,
+blockquote.pull-right .small:after {
+  content: '\00A0 \2014';
+}
+
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+address {
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: 1.428571429;
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+}
+
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: #c7254e;
+  white-space: nowrap;
+  background-color: #f9f2f4;
+  border-radius: 4px;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 1.428571429;
+  color: #333333;
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: #f5f5f5;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+
+pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
+.container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container:before,
+.container:after {
+  display: table;
+  content: " ";
+}
+
+.container:after {
+  clear: both;
+}
+
+.container:before,
+.container:after {
+  display: table;
+  content: " ";
+}
+
+.container:after {
+  clear: both;
+}
+
+.row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.row:before,
+.row:after {
+  display: table;
+  content: " ";
+}
+
+.row:after {
+  clear: both;
+}
+
+.col-xs-1,
+.col-sm-1,
+.col-md-1,
+.col-lg-1,
+.col-xs-2,
+.col-sm-2,
+.col-md-2,
+.col-lg-2,
+.col-xs-3,
+.col-sm-3,
+.col-md-3,
+.col-lg-3,
+.col-xs-4,
+.col-sm-4,
+.col-md-4,
+.col-lg-4,
+.col-xs-5,
+.col-sm-5,
+.col-md-5,
+.col-lg-5,
+.col-xs-6,
+.col-sm-6,
+.col-md-6,
+.col-lg-6,
+.col-xs-7,
+.col-sm-7,
+.col-md-7,
+.col-lg-7,
+.col-xs-8,
+.col-sm-8,
+.col-md-8,
+.col-lg-8,
+.col-xs-9,
+.col-sm-9,
+.col-md-9,
+.col-lg-9,
+.col-xs-10,
+.col-sm-10,
+.col-md-10,
+.col-lg-10,
+.col-xs-11,
+.col-sm-11,
+.col-md-11,
+.col-lg-11,
+.col-xs-12,
+.col-sm-12,
+.col-md-12,
+.col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
+  float: left;
+}
+
+.col-xs-12 {
+  width: 100%;
+}
+
+.col-xs-11 {
+  width: 91.66666666666666%;
+}
+
+.col-xs-10 {
+  width: 83.33333333333334%;
+}
+
+.col-xs-9 {
+  width: 75%;
+}
+
+.col-xs-8 {
+  width: 66.66666666666666%;
+}
+
+.col-xs-7 {
+  width: 58.333333333333336%;
+}
+
+.col-xs-6 {
+  width: 50%;
+}
+
+.col-xs-5 {
+  width: 41.66666666666667%;
+}
+
+.col-xs-4 {
+  width: 33.33333333333333%;
+}
+
+.col-xs-3 {
+  width: 25%;
+}
+
+.col-xs-2 {
+  width: 16.666666666666664%;
+}
+
+.col-xs-1 {
+  width: 8.333333333333332%;
+}
+
+.col-xs-pull-12 {
+  right: 100%;
+}
+
+.col-xs-pull-11 {
+  right: 91.66666666666666%;
+}
+
+.col-xs-pull-10 {
+  right: 83.33333333333334%;
+}
+
+.col-xs-pull-9 {
+  right: 75%;
+}
+
+.col-xs-pull-8 {
+  right: 66.66666666666666%;
+}
+
+.col-xs-pull-7 {
+  right: 58.333333333333336%;
+}
+
+.col-xs-pull-6 {
+  right: 50%;
+}
+
+.col-xs-pull-5 {
+  right: 41.66666666666667%;
+}
+
+.col-xs-pull-4 {
+  right: 33.33333333333333%;
+}
+
+.col-xs-pull-3 {
+  right: 25%;
+}
+
+.col-xs-pull-2 {
+  right: 16.666666666666664%;
+}
+
+.col-xs-pull-1 {
+  right: 8.333333333333332%;
+}
+
+.col-xs-pull-0 {
+  right: 0;
+}
+
+.col-xs-push-12 {
+  left: 100%;
+}
+
+.col-xs-push-11 {
+  left: 91.66666666666666%;
+}
+
+.col-xs-push-10 {
+  left: 83.33333333333334%;
+}
+
+.col-xs-push-9 {
+  left: 75%;
+}
+
+.col-xs-push-8 {
+  left: 66.66666666666666%;
+}
+
+.col-xs-push-7 {
+  left: 58.333333333333336%;
+}
+
+.col-xs-push-6 {
+  left: 50%;
+}
+
+.col-xs-push-5 {
+  left: 41.66666666666667%;
+}
+
+.col-xs-push-4 {
+  left: 33.33333333333333%;
+}
+
+.col-xs-push-3 {
+  left: 25%;
+}
+
+.col-xs-push-2 {
+  left: 16.666666666666664%;
+}
+
+.col-xs-push-1 {
+  left: 8.333333333333332%;
+}
+
+.col-xs-push-0 {
+  left: 0;
+}
+
+.col-xs-offset-12 {
+  margin-left: 100%;
+}
+
+.col-xs-offset-11 {
+  margin-left: 91.66666666666666%;
+}
+
+.col-xs-offset-10 {
+  margin-left: 83.33333333333334%;
+}
+
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+
+.col-xs-offset-8 {
+  margin-left: 66.66666666666666%;
+}
+
+.col-xs-offset-7 {
+  margin-left: 58.333333333333336%;
+}
+
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+
+.col-xs-offset-5 {
+  margin-left: 41.66666666666667%;
+}
+
+.col-xs-offset-4 {
+  margin-left: 33.33333333333333%;
+}
+
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+
+.col-xs-offset-2 {
+  margin-left: 16.666666666666664%;
+}
+
+.col-xs-offset-1 {
+  margin-left: 8.333333333333332%;
+}
+
+.col-xs-offset-0 {
+  margin-left: 0;
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 750px;
+  }
+  .col-sm-1,
+  .col-sm-2,
+  .col-sm-3,
+  .col-sm-4,
+  .col-sm-5,
+  .col-sm-6,
+  .col-sm-7,
+  .col-sm-8,
+  .col-sm-9,
+  .col-sm-10,
+  .col-sm-11 {
+    float: left;
+  }
+  .col-sm-12 {
+    width: 100%;
+  }
+  .col-sm-11 {
+    width: 91.66666666666666%;
+  }
+  .col-sm-10 {
+    width: 83.33333333333334%;
+  }
+  .col-sm-9 {
+    width: 75%;
+  }
+  .col-sm-8 {
+    width: 66.66666666666666%;
+  }
+  .col-sm-7 {
+    width: 58.333333333333336%;
+  }
+  .col-sm-6 {
+    width: 50%;
+  }
+  .col-sm-5 {
+    width: 41.66666666666667%;
+  }
+  .col-sm-4 {
+    width: 33.33333333333333%;
+  }
+  .col-sm-3 {
+    width: 25%;
+  }
+  .col-sm-2 {
+    width: 16.666666666666664%;
+  }
+  .col-sm-1 {
+    width: 8.333333333333332%;
+  }
+  .col-sm-pull-12 {
+    right: 100%;
+  }
+  .col-sm-pull-11 {
+    right: 91.66666666666666%;
+  }
+  .col-sm-pull-10 {
+    right: 83.33333333333334%;
+  }
+  .col-sm-pull-9 {
+    right: 75%;
+  }
+  .col-sm-pull-8 {
+    right: 66.66666666666666%;
+  }
+  .col-sm-pull-7 {
+    right: 58.333333333333336%;
+  }
+  .col-sm-pull-6 {
+    right: 50%;
+  }
+  .col-sm-pull-5 {
+    right: 41.66666666666667%;
+  }
+  .col-sm-pull-4 {
+    right: 33.33333333333333%;
+  }
+  .col-sm-pull-3 {
+    right: 25%;
+  }
+  .col-sm-pull-2 {
+    right: 16.666666666666664%;
+  }
+  .col-sm-pull-1 {
+    right: 8.333333333333332%;
+  }
+  .col-sm-pull-0 {
+    right: 0;
+  }
+  .col-sm-push-12 {
+    left: 100%;
+  }
+  .col-sm-push-11 {
+    left: 91.66666666666666%;
+  }
+  .col-sm-push-10 {
+    left: 83.33333333333334%;
+  }
+  .col-sm-push-9 {
+    left: 75%;
+  }
+  .col-sm-push-8 {
+    left: 66.66666666666666%;
+  }
+  .col-sm-push-7 {
+    left: 58.333333333333336%;
+  }
+  .col-sm-push-6 {
+    left: 50%;
+  }
+  .col-sm-push-5 {
+    left: 41.66666666666667%;
+  }
+  .col-sm-push-4 {
+    left: 33.33333333333333%;
+  }
+  .col-sm-push-3 {
+    left: 25%;
+  }
+  .col-sm-push-2 {
+    left: 16.666666666666664%;
+  }
+  .col-sm-push-1 {
+    left: 8.333333333333332%;
+  }
+  .col-sm-push-0 {
+    left: 0;
+  }
+  .col-sm-offset-12 {
+    margin-left: 100%;
+  }
+  .col-sm-offset-11 {
+    margin-left: 91.66666666666666%;
+  }
+  .col-sm-offset-10 {
+    margin-left: 83.33333333333334%;
+  }
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+  .col-sm-offset-8 {
+    margin-left: 66.66666666666666%;
+  }
+  .col-sm-offset-7 {
+    margin-left: 58.333333333333336%;
+  }
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+  .col-sm-offset-5 {
+    margin-left: 41.66666666666667%;
+  }
+  .col-sm-offset-4 {
+    margin-left: 33.33333333333333%;
+  }
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+  .col-sm-offset-2 {
+    margin-left: 16.666666666666664%;
+  }
+  .col-sm-offset-1 {
+    margin-left: 8.333333333333332%;
+  }
+  .col-sm-offset-0 {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    width: 970px;
+  }
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11 {
+    float: left;
+  }
+  .col-md-12 {
+    width: 100%;
+  }
+  .col-md-11 {
+    width: 91.66666666666666%;
+  }
+  .col-md-10 {
+    width: 83.33333333333334%;
+  }
+  .col-md-9 {
+    width: 75%;
+  }
+  .col-md-8 {
+    width: 66.66666666666666%;
+  }
+  .col-md-7 {
+    width: 58.333333333333336%;
+  }
+  .col-md-6 {
+    width: 50%;
+  }
+  .col-md-5 {
+    width: 41.66666666666667%;
+  }
+  .col-md-4 {
+    width: 33.33333333333333%;
+  }
+  .col-md-3 {
+    width: 25%;
+  }
+  .col-md-2 {
+    width: 16.666666666666664%;
+  }
+  .col-md-1 {
+    width: 8.333333333333332%;
+  }
+  .col-md-pull-12 {
+    right: 100%;
+  }
+  .col-md-pull-11 {
+    right: 91.66666666666666%;
+  }
+  .col-md-pull-10 {
+    right: 83.33333333333334%;
+  }
+  .col-md-pull-9 {
+    right: 75%;
+  }
+  .col-md-pull-8 {
+    right: 66.66666666666666%;
+  }
+  .col-md-pull-7 {
+    right: 58.333333333333336%;
+  }
+  .col-md-pull-6 {
+    right: 50%;
+  }
+  .col-md-pull-5 {
+    right: 41.66666666666667%;
+  }
+  .col-md-pull-4 {
+    right: 33.33333333333333%;
+  }
+  .col-md-pull-3 {
+    right: 25%;
+  }
+  .col-md-pull-2 {
+    right: 16.666666666666664%;
+  }
+  .col-md-pull-1 {
+    right: 8.333333333333332%;
+  }
+  .col-md-pull-0 {
+    right: 0;
+  }
+  .col-md-push-12 {
+    left: 100%;
+  }
+  .col-md-push-11 {
+    left: 91.66666666666666%;
+  }
+  .col-md-push-10 {
+    left: 83.33333333333334%;
+  }
+  .col-md-push-9 {
+    left: 75%;
+  }
+  .col-md-push-8 {
+    left: 66.66666666666666%;
+  }
+  .col-md-push-7 {
+    left: 58.333333333333336%;
+  }
+  .col-md-push-6 {
+    left: 50%;
+  }
+  .col-md-push-5 {
+    left: 41.66666666666667%;
+  }
+  .col-md-push-4 {
+    left: 33.33333333333333%;
+  }
+  .col-md-push-3 {
+    left: 25%;
+  }
+  .col-md-push-2 {
+    left: 16.666666666666664%;
+  }
+  .col-md-push-1 {
+    left: 8.333333333333332%;
+  }
+  .col-md-push-0 {
+    left: 0;
+  }
+  .col-md-offset-12 {
+    margin-left: 100%;
+  }
+  .col-md-offset-11 {
+    margin-left: 91.66666666666666%;
+  }
+  .col-md-offset-10 {
+    margin-left: 83.33333333333334%;
+  }
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+  .col-md-offset-8 {
+    margin-left: 66.66666666666666%;
+  }
+  .col-md-offset-7 {
+    margin-left: 58.333333333333336%;
+  }
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+  .col-md-offset-5 {
+    margin-left: 41.66666666666667%;
+  }
+  .col-md-offset-4 {
+    margin-left: 33.33333333333333%;
+  }
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+  .col-md-offset-2 {
+    margin-left: 16.666666666666664%;
+  }
+  .col-md-offset-1 {
+    margin-left: 8.333333333333332%;
+  }
+  .col-md-offset-0 {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    width: 1170px;
+  }
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11 {
+    float: left;
+  }
+  .col-lg-12 {
+    width: 100%;
+  }
+  .col-lg-11 {
+    width: 91.66666666666666%;
+  }
+  .col-lg-10 {
+    width: 83.33333333333334%;
+  }
+  .col-lg-9 {
+    width: 75%;
+  }
+  .col-lg-8 {
+    width: 66.66666666666666%;
+  }
+  .col-lg-7 {
+    width: 58.333333333333336%;
+  }
+  .col-lg-6 {
+    width: 50%;
+  }
+  .col-lg-5 {
+    width: 41.66666666666667%;
+  }
+  .col-lg-4 {
+    width: 33.33333333333333%;
+  }
+  .col-lg-3 {
+    width: 25%;
+  }
+  .col-lg-2 {
+    width: 16.666666666666664%;
+  }
+  .col-lg-1 {
+    width: 8.333333333333332%;
+  }
+  .col-lg-pull-12 {
+    right: 100%;
+  }
+  .col-lg-pull-11 {
+    right: 91.66666666666666%;
+  }
+  .col-lg-pull-10 {
+    right: 83.33333333333334%;
+  }
+  .col-lg-pull-9 {
+    right: 75%;
+  }
+  .col-lg-pull-8 {
+    right: 66.66666666666666%;
+  }
+  .col-lg-pull-7 {
+    right: 58.333333333333336%;
+  }
+  .col-lg-pull-6 {
+    right: 50%;
+  }
+  .col-lg-pull-5 {
+    right: 41.66666666666667%;
+  }
+  .col-lg-pull-4 {
+    right: 33.33333333333333%;
+  }
+  .col-lg-pull-3 {
+    right: 25%;
+  }
+  .col-lg-pull-2 {
+    right: 16.666666666666664%;
+  }
+  .col-lg-pull-1 {
+    right: 8.333333333333332%;
+  }
+  .col-lg-pull-0 {
+    right: 0;
+  }
+  .col-lg-push-12 {
+    left: 100%;
+  }
+  .col-lg-push-11 {
+    left: 91.66666666666666%;
+  }
+  .col-lg-push-10 {
+    left: 83.33333333333334%;
+  }
+  .col-lg-push-9 {
+    left: 75%;
+  }
+  .col-lg-push-8 {
+    left: 66.66666666666666%;
+  }
+  .col-lg-push-7 {
+    left: 58.333333333333336%;
+  }
+  .col-lg-push-6 {
+    left: 50%;
+  }
+  .col-lg-push-5 {
+    left: 41.66666666666667%;
+  }
+  .col-lg-push-4 {
+    left: 33.33333333333333%;
+  }
+  .col-lg-push-3 {
+    left: 25%;
+  }
+  .col-lg-push-2 {
+    left: 16.666666666666664%;
+  }
+  .col-lg-push-1 {
+    left: 8.333333333333332%;
+  }
+  .col-lg-push-0 {
+    left: 0;
+  }
+  .col-lg-offset-12 {
+    margin-left: 100%;
+  }
+  .col-lg-offset-11 {
+    margin-left: 91.66666666666666%;
+  }
+  .col-lg-offset-10 {
+    margin-left: 83.33333333333334%;
+  }
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+  .col-lg-offset-8 {
+    margin-left: 66.66666666666666%;
+  }
+  .col-lg-offset-7 {
+    margin-left: 58.333333333333336%;
+  }
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+  .col-lg-offset-5 {
+    margin-left: 41.66666666666667%;
+  }
+  .col-lg-offset-4 {
+    margin-left: 33.33333333333333%;
+  }
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+  .col-lg-offset-2 {
+    margin-left: 16.666666666666664%;
+  }
+  .col-lg-offset-1 {
+    margin-left: 8.333333333333332%;
+  }
+  .col-lg-offset-0 {
+    margin-left: 0;
+  }
+}
+
+table {
+  max-width: 100%;
+  background-color: transparent;
+}
+
+th {
+  text-align: left;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 8px;
+  line-height: 1.428571429;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+
+.table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #dddddd;
+}
+
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+
+.table > tbody + tbody {
+  border-top: 2px solid #dddddd;
+}
+
+.table .table {
+  background-color: #ffffff;
+}
+
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+
+.table-bordered {
+  border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
+}
+
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+  background-color: #f9f9f9;
+}
+
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
+  background-color: #f5f5f5;
+}
+
+table col[class*="col-"] {
+  display: table-column;
+  float: none;
+}
+
+table td[class*="col-"],
+table th[class*="col-"] {
+  display: table-cell;
+  float: none;
+}
+
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+  background-color: #f5f5f5;
+}
+
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+  background-color: #dff0d8;
+}
+
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr.success:hover > th {
+  background-color: #d0e9c6;
+}
+
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+  background-color: #f2dede;
+}
+
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr.danger:hover > th {
+  background-color: #ebcccc;
+}
+
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+  background-color: #fcf8e3;
+}
+
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr.warning:hover > th {
+  background-color: #faf2cc;
+}
+
+@media (max-width: 767px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    border: 1px solid #dddddd;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+    border-left: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+    border-right: 0;
+  }
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: inherit;
+  color: #333333;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+input[type="search"] {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  /* IE8-9 */
+
+  line-height: normal;
+}
+
+input[type="file"] {
+  display: block;
+}
+
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+select optgroup {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+}
+
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  height: auto;
+}
+
+output {
+  display: block;
+  padding-top: 7px;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #555555;
+  vertical-align: middle;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #ffffff;
+  background-image: none;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+
+.form-control:focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+.form-control:-moz-placeholder {
+  color: #999999;
+}
+
+.form-control::-moz-placeholder {
+  color: #999999;
+}
+
+.form-control:-ms-input-placeholder {
+  color: #999999;
+}
+
+.form-control::-webkit-input-placeholder {
+  color: #999999;
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.radio,
+.checkbox {
+  display: block;
+  min-height: 20px;
+  padding-left: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  vertical-align: middle;
+}
+
+.radio label,
+.checkbox label {
+  display: inline;
+  margin-bottom: 0;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  float: left;
+  margin-left: -20px;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px;
+}
+
+.radio-inline,
+.checkbox-inline {
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  font-weight: normal;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px;
+}
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+.radio[disabled],
+.radio-inline[disabled],
+.checkbox[disabled],
+.checkbox-inline[disabled],
+fieldset[disabled] input[type="radio"],
+fieldset[disabled] input[type="checkbox"],
+fieldset[disabled] .radio,
+fieldset[disabled] .radio-inline,
+fieldset[disabled] .checkbox,
+fieldset[disabled] .checkbox-inline {
+  cursor: not-allowed;
+}
+
+.input-sm {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+select.input-sm {
+  height: 30px;
+  line-height: 30px;
+}
+
+textarea.input-sm {
+  height: auto;
+}
+
+.input-lg {
+  height: 45px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
+select.input-lg {
+  height: 45px;
+  line-height: 45px;
+}
+
+textarea.input-lg {
+  height: auto;
+}
+
+.has-warning .help-block,
+.has-warning .control-label,
+.has-warning .radio,
+.has-warning .checkbox,
+.has-warning .radio-inline,
+.has-warning .checkbox-inline {
+  color: #c09853;
+}
+
+.has-warning .form-control {
+  border-color: #c09853;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-warning .form-control:focus {
+  border-color: #a47e3c;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
+}
+
+.has-warning .input-group-addon {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #c09853;
+}
+
+.has-error .help-block,
+.has-error .control-label,
+.has-error .radio,
+.has-error .checkbox,
+.has-error .radio-inline,
+.has-error .checkbox-inline {
+  color: #b94a48;
+}
+
+.has-error .form-control {
+  border-color: #b94a48;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-error .form-control:focus {
+  border-color: #953b39;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
+}
+
+.has-error .input-group-addon {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #b94a48;
+}
+
+.has-success .help-block,
+.has-success .control-label,
+.has-success .radio,
+.has-success .checkbox,
+.has-success .radio-inline,
+.has-success .checkbox-inline {
+  color: #468847;
+}
+
+.has-success .form-control {
+  border-color: #468847;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.has-success .form-control:focus {
+  border-color: #356635;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
+}
+
+.has-success .input-group-addon {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #468847;
+}
+
+.form-control-static {
+  margin-bottom: 0;
+}
+
+.help-block {
+  display: block;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: #737373;
+}
+
+@media (min-width: 768px) {
+  .form-inline .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .form-inline .form-control {
+    display: inline-block;
+  }
+  .form-inline .radio,
+  .form-inline .checkbox {
+    display: inline-block;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .form-inline .radio input[type="radio"],
+  .form-inline .checkbox input[type="checkbox"] {
+    float: none;
+    margin-left: 0;
+  }
+}
+
+.form-horizontal .control-label,
+.form-horizontal .radio,
+.form-horizontal .checkbox,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: 7px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.form-horizontal .form-group {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after {
+  display: table;
+  content: " ";
+}
+
+.form-horizontal .form-group:after {
+  clear: both;
+}
+
+.form-horizontal .form-control-static {
+  padding-top: 7px;
+}
+
+@media (min-width: 768px) {
+  .form-horizontal .control-label {
+    text-align: right;
+  }
+}
+
+.btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1.428571429;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+       -o-user-select: none;
+          user-select: none;
+}
+
+.btn:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.btn:hover,
+.btn:focus {
+  color: #333333;
+  text-decoration: none;
+}
+
+.btn:active,
+.btn.active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.btn.disabled,
+.btn[disabled],
+fieldset[disabled] .btn {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-default {
+  color: #333333;
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+
+.btn-default:hover,
+.btn-default:focus,
+.btn-default:active,
+.btn-default.active,
+.open .dropdown-toggle.btn-default {
+  color: #333333;
+  background-color: #ebebeb;
+  border-color: #adadad;
+}
+
+.btn-default:active,
+.btn-default.active,
+.open .dropdown-toggle.btn-default {
+  background-image: none;
+}
+
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #ffffff;
+  border-color: #cccccc;
+}
+
+.btn-primary {
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  color: #ffffff;
+  background-color: #3276b1;
+  border-color: #285e8e;
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.open .dropdown-toggle.btn-primary {
+  background-image: none;
+}
+
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: #428bca;
+  border-color: #357ebd;
+}
+
+.btn-warning {
+  color: #ffffff;
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active,
+.btn-warning.active,
+.open .dropdown-toggle.btn-warning {
+  color: #ffffff;
+  background-color: #ed9c28;
+  border-color: #d58512;
+}
+
+.btn-warning:active,
+.btn-warning.active,
+.open .dropdown-toggle.btn-warning {
+  background-image: none;
+}
+
+.btn-warning.disabled,
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
+  background-color: #f0ad4e;
+  border-color: #eea236;
+}
+
+.btn-danger {
+  color: #ffffff;
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-danger:active,
+.btn-danger.active,
+.open .dropdown-toggle.btn-danger {
+  color: #ffffff;
+  background-color: #d2322d;
+  border-color: #ac2925;
+}
+
+.btn-danger:active,
+.btn-danger.active,
+.open .dropdown-toggle.btn-danger {
+  background-image: none;
+}
+
+.btn-danger.disabled,
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
+  background-color: #d9534f;
+  border-color: #d43f3a;
+}
+
+.btn-success {
+  color: #ffffff;
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active,
+.btn-success.active,
+.open .dropdown-toggle.btn-success {
+  color: #ffffff;
+  background-color: #47a447;
+  border-color: #398439;
+}
+
+.btn-success:active,
+.btn-success.active,
+.open .dropdown-toggle.btn-success {
+  background-image: none;
+}
+
+.btn-success.disabled,
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
+  background-color: #5cb85c;
+  border-color: #4cae4c;
+}
+
+.btn-info {
+  color: #ffffff;
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+  color: #ffffff;
+  background-color: #39b3d7;
+  border-color: #269abc;
+}
+
+.btn-info:active,
+.btn-info.active,
+.open .dropdown-toggle.btn-info {
+  background-image: none;
+}
+
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #5bc0de;
+  border-color: #46b8da;
+}
+
+.btn-link {
+  font-weight: normal;
+  color: #428bca;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.btn-link,
+.btn-link:active,
+.btn-link[disabled],
+fieldset[disabled] .btn-link {
+  background-color: transparent;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-link,
+.btn-link:hover,
+.btn-link:focus,
+.btn-link:active {
+  border-color: transparent;
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: #2a6496;
+  text-decoration: underline;
+  background-color: transparent;
+}
+
+.btn-link[disabled]:hover,
+fieldset[disabled] .btn-link:hover,
+.btn-link[disabled]:focus,
+fieldset[disabled] .btn-link:focus {
+  color: #999999;
+  text-decoration: none;
+}
+
+.btn-lg {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
+.btn-sm,
+.btn-xs {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.btn-xs {
+  padding: 1px 5px;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+          transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.collapse {
+  display: none;
+}
+
+.collapse.in {
+  display: block;
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition: height 0.35s ease;
+          transition: height 0.35s ease;
+}
+
+@font-face {
+  font-family: 'Glyphicons Halflings';
+  src: url('../../fonts/glyphicons-halflings-regular.eot');
+  src: url('../../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
+
+.glyphicon {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  font-family: 'Glyphicons Halflings';
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.glyphicon:empty {
+  width: 1em;
+}
+
+.glyphicon-asterisk:before {
+  content: "\2a";
+}
+
+.glyphicon-plus:before {
+  content: "\2b";
+}
+
+.glyphicon-euro:before {
+  content: "\20ac";
+}
+
+.glyphicon-minus:before {
+  content: "\2212";
+}
+
+.glyphicon-cloud:before {
+  content: "\2601";
+}
+
+.glyphicon-envelope:before {
+  content: "\2709";
+}
+
+.glyphicon-pencil:before {
+  content: "\270f";
+}
+
+.glyphicon-glass:before {
+  content: "\e001";
+}
+
+.glyphicon-music:before {
+  content: "\e002";
+}
+
+.glyphicon-search:before {
+  content: "\e003";
+}
+
+.glyphicon-heart:before {
+  content: "\e005";
+}
+
+.glyphicon-star:before {
+  content: "\e006";
+}
+
+.glyphicon-star-empty:before {
+  content: "\e007";
+}
+
+.glyphicon-user:before {
+  content: "\e008";
+}
+
+.glyphicon-film:before {
+  content: "\e009";
+}
+
+.glyphicon-th-large:before {
+  content: "\e010";
+}
+
+.glyphicon-th:before {
+  content: "\e011";
+}
+
+.glyphicon-th-list:before {
+  content: "\e012";
+}
+
+.glyphicon-ok:before {
+  content: "\e013";
+}
+
+.glyphicon-remove:before {
+  content: "\e014";
+}
+
+.glyphicon-zoom-in:before {
+  content: "\e015";
+}
+
+.glyphicon-zoom-out:before {
+  content: "\e016";
+}
+
+.glyphicon-off:before {
+  content: "\e017";
+}
+
+.glyphicon-signal:before {
+  content: "\e018";
+}
+
+.glyphicon-cog:before {
+  content: "\e019";
+}
+
+.glyphicon-trash:before {
+  content: "\e020";
+}
+
+.glyphicon-home:before {
+  content: "\e021";
+}
+
+.glyphicon-file:before {
+  content: "\e022";
+}
+
+.glyphicon-time:before {
+  content: "\e023";
+}
+
+.glyphicon-road:before {
+  content: "\e024";
+}
+
+.glyphicon-download-alt:before {
+  content: "\e025";
+}
+
+.glyphicon-download:before {
+  content: "\e026";
+}
+
+.glyphicon-upload:before {
+  content: "\e027";
+}
+
+.glyphicon-inbox:before {
+  content: "\e028";
+}
+
+.glyphicon-play-circle:before {
+  content: "\e029";
+}
+
+.glyphicon-repeat:before {
+  content: "\e030";
+}
+
+.glyphicon-refresh:before {
+  content: "\e031";
+}
+
+.glyphicon-list-alt:before {
+  content: "\e032";
+}
+
+.glyphicon-lock:before {
+  content: "\e033";
+}
+
+.glyphicon-flag:before {
+  content: "\e034";
+}
+
+.glyphicon-headphones:before {
+  content: "\e035";
+}
+
+.glyphicon-volume-off:before {
+  content: "\e036";
+}
+
+.glyphicon-volume-down:before {
+  content: "\e037";
+}
+
+.glyphicon-volume-up:before {
+  content: "\e038";
+}
+
+.glyphicon-qrcode:before {
+  content: "\e039";
+}
+
+.glyphicon-barcode:before {
+  content: "\e040";
+}
+
+.glyphicon-tag:before {
+  content: "\e041";
+}
+
+.glyphicon-tags:before {
+  content: "\e042";
+}
+
+.glyphicon-book:before {
+  content: "\e043";
+}
+
+.glyphicon-bookmark:before {
+  content: "\e044";
+}
+
+.glyphicon-print:before {
+  content: "\e045";
+}
+
+.glyphicon-camera:before {
+  content: "\e046";
+}
+
+.glyphicon-font:before {
+  content: "\e047";
+}
+
+.glyphicon-bold:before {
+  content: "\e048";
+}
+
+.glyphicon-italic:before {
+  content: "\e049";
+}
+
+.glyphicon-text-height:before {
+  content: "\e050";
+}
+
+.glyphicon-text-width:before {
+  content: "\e051";
+}
+
+.glyphicon-align-left:before {
+  content: "\e052";
+}
+
+.glyphicon-align-center:before {
+  content: "\e053";
+}
+
+.glyphicon-align-right:before {
+  content: "\e054";
+}
+
+.glyphicon-align-justify:before {
+  content: "\e055";
+}
+
+.glyphicon-list:before {
+  content: "\e056";
+}
+
+.glyphicon-indent-left:before {
+  content: "\e057";
+}
+
+.glyphicon-indent-right:before {
+  content: "\e058";
+}
+
+.glyphicon-facetime-video:before {
+  content: "\e059";
+}
+
+.glyphicon-picture:before {
+  content: "\e060";
+}
+
+.glyphicon-map-marker:before {
+  content: "\e062";
+}
+
+.glyphicon-adjust:before {
+  content: "\e063";
+}
+
+.glyphicon-tint:before {
+  content: "\e064";
+}
+
+.glyphicon-edit:before {
+  content: "\e065";
+}
+
+.glyphicon-share:before {
+  content: "\e066";
+}
+
+.glyphicon-check:before {
+  content: "\e067";
+}
+
+.glyphicon-move:before {
+  content: "\e068";
+}
+
+.glyphicon-step-backward:before {
+  content: "\e069";
+}
+
+.glyphicon-fast-backward:before {
+  content: "\e070";
+}
+
+.glyphicon-backward:before {
+  content: "\e071";
+}
+
+.glyphicon-play:before {
+  content: "\e072";
+}
+
+.glyphicon-pause:before {
+  content: "\e073";
+}
+
+.glyphicon-stop:before {
+  content: "\e074";
+}
+
+.glyphicon-forward:before {
+  content: "\e075";
+}
+
+.glyphicon-fast-forward:before {
+  content: "\e076";
+}
+
+.glyphicon-step-forward:before {
+  content: "\e077";
+}
+
+.glyphicon-eject:before {
+  content: "\e078";
+}
+
+.glyphicon-chevron-left:before {
+  content: "\e079";
+}
+
+.glyphicon-chevron-right:before {
+  content: "\e080";
+}
+
+.glyphicon-plus-sign:before {
+  content: "\e081";
+}
+
+.glyphicon-minus-sign:before {
+  content: "\e082";
+}
+
+.glyphicon-remove-sign:before {
+  content: "\e083";
+}
+
+.glyphicon-ok-sign:before {
+  content: "\e084";
+}
+
+.glyphicon-question-sign:before {
+  content: "\e085";
+}
+
+.glyphicon-info-sign:before {
+  content: "\e086";
+}
+
+.glyphicon-screenshot:before {
+  content: "\e087";
+}
+
+.glyphicon-remove-circle:before {
+  content: "\e088";
+}
+
+.glyphicon-ok-circle:before {
+  content: "\e089";
+}
+
+.glyphicon-ban-circle:before {
+  content: "\e090";
+}
+
+.glyphicon-arrow-left:before {
+  content: "\e091";
+}
+
+.glyphicon-arrow-right:before {
+  content: "\e092";
+}
+
+.glyphicon-arrow-up:before {
+  content: "\e093";
+}
+
+.glyphicon-arrow-down:before {
+  content: "\e094";
+}
+
+.glyphicon-share-alt:before {
+  content: "\e095";
+}
+
+.glyphicon-resize-full:before {
+  content: "\e096";
+}
+
+.glyphicon-resize-small:before {
+  content: "\e097";
+}
+
+.glyphicon-exclamation-sign:before {
+  content: "\e101";
+}
+
+.glyphicon-gift:before {
+  content: "\e102";
+}
+
+.glyphicon-leaf:before {
+  content: "\e103";
+}
+
+.glyphicon-fire:before {
+  content: "\e104";
+}
+
+.glyphicon-eye-open:before {
+  content: "\e105";
+}
+
+.glyphicon-eye-close:before {
+  content: "\e106";
+}
+
+.glyphicon-warning-sign:before {
+  content: "\e107";
+}
+
+.glyphicon-plane:before {
+  content: "\e108";
+}
+
+.glyphicon-calendar:before {
+  content: "\e109";
+}
+
+.glyphicon-random:before {
+  content: "\e110";
+}
+
+.glyphicon-comment:before {
+  content: "\e111";
+}
+
+.glyphicon-magnet:before {
+  content: "\e112";
+}
+
+.glyphicon-chevron-up:before {
+  content: "\e113";
+}
+
+.glyphicon-chevron-down:before {
+  content: "\e114";
+}
+
+.glyphicon-retweet:before {
+  content: "\e115";
+}
+
+.glyphicon-shopping-cart:before {
+  content: "\e116";
+}
+
+.glyphicon-folder-close:before {
+  content: "\e117";
+}
+
+.glyphicon-folder-open:before {
+  content: "\e118";
+}
+
+.glyphicon-resize-vertical:before {
+  content: "\e119";
+}
+
+.glyphicon-resize-horizontal:before {
+  content: "\e120";
+}
+
+.glyphicon-hdd:before {
+  content: "\e121";
+}
+
+.glyphicon-bullhorn:before {
+  content: "\e122";
+}
+
+.glyphicon-bell:before {
+  content: "\e123";
+}
+
+.glyphicon-certificate:before {
+  content: "\e124";
+}
+
+.glyphicon-thumbs-up:before {
+  content: "\e125";
+}
+
+.glyphicon-thumbs-down:before {
+  content: "\e126";
+}
+
+.glyphicon-hand-right:before {
+  content: "\e127";
+}
+
+.glyphicon-hand-left:before {
+  content: "\e128";
+}
+
+.glyphicon-hand-up:before {
+  content: "\e129";
+}
+
+.glyphicon-hand-down:before {
+  content: "\e130";
+}
+
+.glyphicon-circle-arrow-right:before {
+  content: "\e131";
+}
+
+.glyphicon-circle-arrow-left:before {
+  content: "\e132";
+}
+
+.glyphicon-circle-arrow-up:before {
+  content: "\e133";
+}
+
+.glyphicon-circle-arrow-down:before {
+  content: "\e134";
+}
+
+.glyphicon-globe:before {
+  content: "\e135";
+}
+
+.glyphicon-wrench:before {
+  content: "\e136";
+}
+
+.glyphicon-tasks:before {
+  content: "\e137";
+}
+
+.glyphicon-filter:before {
+  content: "\e138";
+}
+
+.glyphicon-briefcase:before {
+  content: "\e139";
+}
+
+.glyphicon-fullscreen:before {
+  content: "\e140";
+}
+
+.glyphicon-dashboard:before {
+  content: "\e141";
+}
+
+.glyphicon-paperclip:before {
+  content: "\e142";
+}
+
+.glyphicon-heart-empty:before {
+  content: "\e143";
+}
+
+.glyphicon-link:before {
+  content: "\e144";
+}
+
+.glyphicon-phone:before {
+  content: "\e145";
+}
+
+.glyphicon-pushpin:before {
+  content: "\e146";
+}
+
+.glyphicon-usd:before {
+  content: "\e148";
+}
+
+.glyphicon-gbp:before {
+  content: "\e149";
+}
+
+.glyphicon-sort:before {
+  content: "\e150";
+}
+
+.glyphicon-sort-by-alphabet:before {
+  content: "\e151";
+}
+
+.glyphicon-sort-by-alphabet-alt:before {
+  content: "\e152";
+}
+
+.glyphicon-sort-by-order:before {
+  content: "\e153";
+}
+
+.glyphicon-sort-by-order-alt:before {
+  content: "\e154";
+}
+
+.glyphicon-sort-by-attributes:before {
+  content: "\e155";
+}
+
+.glyphicon-sort-by-attributes-alt:before {
+  content: "\e156";
+}
+
+.glyphicon-unchecked:before {
+  content: "\e157";
+}
+
+.glyphicon-expand:before {
+  content: "\e158";
+}
+
+.glyphicon-collapse-down:before {
+  content: "\e159";
+}
+
+.glyphicon-collapse-up:before {
+  content: "\e160";
+}
+
+.glyphicon-log-in:before {
+  content: "\e161";
+}
+
+.glyphicon-flash:before {
+  content: "\e162";
+}
+
+.glyphicon-log-out:before {
+  content: "\e163";
+}
+
+.glyphicon-new-window:before {
+  content: "\e164";
+}
+
+.glyphicon-record:before {
+  content: "\e165";
+}
+
+.glyphicon-save:before {
+  content: "\e166";
+}
+
+.glyphicon-open:before {
+  content: "\e167";
+}
+
+.glyphicon-saved:before {
+  content: "\e168";
+}
+
+.glyphicon-import:before {
+  content: "\e169";
+}
+
+.glyphicon-export:before {
+  content: "\e170";
+}
+
+.glyphicon-send:before {
+  content: "\e171";
+}
+
+.glyphicon-floppy-disk:before {
+  content: "\e172";
+}
+
+.glyphicon-floppy-saved:before {
+  content: "\e173";
+}
+
+.glyphicon-floppy-remove:before {
+  content: "\e174";
+}
+
+.glyphicon-floppy-save:before {
+  content: "\e175";
+}
+
+.glyphicon-floppy-open:before {
+  content: "\e176";
+}
+
+.glyphicon-credit-card:before {
+  content: "\e177";
+}
+
+.glyphicon-transfer:before {
+  content: "\e178";
+}
+
+.glyphicon-cutlery:before {
+  content: "\e179";
+}
+
+.glyphicon-header:before {
+  content: "\e180";
+}
+
+.glyphicon-compressed:before {
+  content: "\e181";
+}
+
+.glyphicon-earphone:before {
+  content: "\e182";
+}
+
+.glyphicon-phone-alt:before {
+  content: "\e183";
+}
+
+.glyphicon-tower:before {
+  content: "\e184";
+}
+
+.glyphicon-stats:before {
+  content: "\e185";
+}
+
+.glyphicon-sd-video:before {
+  content: "\e186";
+}
+
+.glyphicon-hd-video:before {
+  content: "\e187";
+}
+
+.glyphicon-subtitles:before {
+  content: "\e188";
+}
+
+.glyphicon-sound-stereo:before {
+  content: "\e189";
+}
+
+.glyphicon-sound-dolby:before {
+  content: "\e190";
+}
+
+.glyphicon-sound-5-1:before {
+  content: "\e191";
+}
+
+.glyphicon-sound-6-1:before {
+  content: "\e192";
+}
+
+.glyphicon-sound-7-1:before {
+  content: "\e193";
+}
+
+.glyphicon-copyright-mark:before {
+  content: "\e194";
+}
+
+.glyphicon-registration-mark:before {
+  content: "\e195";
+}
+
+.glyphicon-cloud-download:before {
+  content: "\e197";
+}
+
+.glyphicon-cloud-upload:before {
+  content: "\e198";
+}
+
+.glyphicon-tree-conifer:before {
+  content: "\e199";
+}
+
+.glyphicon-tree-deciduous:before {
+  content: "\e200";
+}
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: 4px solid #000000;
+  border-right: 4px solid transparent;
+  border-bottom: 0 dotted;
+  border-left: 4px solid transparent;
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+  font-size: 14px;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  background-clip: padding-box;
+}
+
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.dropdown-menu .divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+
+.dropdown-menu > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 1.428571429;
+  color: #333333;
+  white-space: nowrap;
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  color: #262626;
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #428bca;
+  outline: 0;
+}
+
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: #999999;
+}
+
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  cursor: not-allowed;
+  background-color: transparent;
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.open > .dropdown-menu {
+  display: block;
+}
+
+.open > a {
+  outline: 0;
+}
+
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: 12px;
+  line-height: 1.428571429;
+  color: #999999;
+}
+
+.dropdown-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 990;
+}
+
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+.dropup .caret,
+.navbar-fixed-bottom .dropdown .caret {
+  border-top: 0 dotted;
+  border-bottom: 4px solid #000000;
+  content: "";
+}
+
+.dropup .dropdown-menu,
+.navbar-fixed-bottom .dropdown .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-bottom: 1px;
+}
+
+@media (min-width: 768px) {
+  .navbar-right .dropdown-menu {
+    right: 0;
+    left: auto;
+  }
+}
+
+.btn-default .caret {
+  border-top-color: #333333;
+}
+
+.btn-primary .caret,
+.btn-success .caret,
+.btn-warning .caret,
+.btn-danger .caret,
+.btn-info .caret {
+  border-top-color: #fff;
+}
+
+.dropup .btn-default .caret {
+  border-bottom-color: #333333;
+}
+
+.dropup .btn-primary .caret,
+.dropup .btn-success .caret,
+.dropup .btn-warning .caret,
+.dropup .btn-danger .caret,
+.dropup .btn-info .caret {
+  border-bottom-color: #fff;
+}
+
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  float: left;
+}
+
+.btn-group > .btn:hover,
+.btn-group-vertical > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus,
+.btn-group > .btn:active,
+.btn-group-vertical > .btn:active,
+.btn-group > .btn.active,
+.btn-group-vertical > .btn.active {
+  z-index: 2;
+}
+
+.btn-group > .btn:focus,
+.btn-group-vertical > .btn:focus {
+  outline: none;
+}
+
+.btn-group .btn + .btn,
+.btn-group .btn + .btn-group,
+.btn-group .btn-group + .btn,
+.btn-group .btn-group + .btn-group {
+  margin-left: -1px;
+}
+
+.btn-toolbar:before,
+.btn-toolbar:after {
+  display: table;
+  content: " ";
+}
+
+.btn-toolbar:after {
+  clear: both;
+}
+
+.btn-toolbar:before,
+.btn-toolbar:after {
+  display: table;
+  content: " ";
+}
+
+.btn-toolbar:after {
+  clear: both;
+}
+
+.btn-toolbar .btn-group {
+  float: left;
+}
+
+.btn-toolbar > .btn + .btn,
+.btn-toolbar > .btn-group + .btn,
+.btn-toolbar > .btn + .btn-group,
+.btn-toolbar > .btn-group + .btn-group {
+  margin-left: 5px;
+}
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+.btn-group > .btn:first-child {
+  margin-left: 0;
+}
+
+.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.btn-group > .btn-group {
+  float: left;
+}
+
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group > .btn-group:first-child > .btn:last-child,
+.btn-group > .btn-group:first-child > .dropdown-toggle {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > .btn-group:last-child > .btn:first-child {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+.btn-group-xs > .btn {
+  padding: 5px 10px;
+  padding: 1px 5px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.btn-group-sm > .btn {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+.btn-group-lg > .btn {
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
+.btn-group > .btn + .dropdown-toggle {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.btn-group > .btn-lg + .dropdown-toggle {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+.btn-group.open .dropdown-toggle {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+
+.btn-group.open .dropdown-toggle.btn-link {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn .caret {
+  margin-left: 0;
+}
+
+.btn-lg .caret {
+  border-width: 5px 5px 0;
+  border-bottom-width: 0;
+}
+
+.dropup .btn-lg .caret {
+  border-width: 0 5px 5px;
+}
+
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+}
+
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after {
+  display: table;
+  content: " ";
+}
+
+.btn-group-vertical > .btn-group:after {
+  clear: both;
+}
+
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after {
+  display: table;
+  content: " ";
+}
+
+.btn-group-vertical > .btn-group:after {
+  clear: both;
+}
+
+.btn-group-vertical > .btn-group > .btn {
+  float: none;
+}
+
+.btn-group-vertical > .btn + .btn,
+.btn-group-vertical > .btn + .btn-group,
+.btn-group-vertical > .btn-group + .btn,
+.btn-group-vertical > .btn-group + .btn-group {
+  margin-top: -1px;
+  margin-left: 0;
+}
+
+.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.btn-group-vertical > .btn:first-child:not(:last-child) {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > .btn:last-child:not(:first-child) {
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:first-child > .btn:last-child,
+.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.btn-group-justified {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  table-layout: fixed;
+}
+
+.btn-group-justified .btn {
+  display: table-cell;
+  float: none;
+  width: 1%;
+}
+
+[data-toggle="buttons"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+  display: none;
+}
+
+.input-group {
+  position: relative;
+  display: table;
+  border-collapse: separate;
+}
+
+.input-group.col {
+  float: none;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.input-group .form-control {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  height: 45px;
+  padding: 10px 16px;
+  font-size: 18px;
+  line-height: 1.33;
+  border-radius: 6px;
+}
+
+select.input-group-lg > .form-control,
+select.input-group-lg > .input-group-addon,
+select.input-group-lg > .input-group-btn > .btn {
+  height: 45px;
+  line-height: 45px;
+}
+
+textarea.input-group-lg > .form-control,
+textarea.input-group-lg > .input-group-addon,
+textarea.input-group-lg > .input-group-btn > .btn {
+  height: auto;
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  height: 30px;
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+
+select.input-group-sm > .form-control,
+select.input-group-sm > .input-group-addon,
+select.input-group-sm > .input-group-btn > .btn {
+  height: 30px;
+  line-height: 30px;
+}
+
+textarea.input-group-sm > .form-control,
+textarea.input-group-sm > .input-group-addon,
+textarea.input-group-sm > .input-group-btn > .btn {
+  height: auto;
+}
+
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+}
+
+.input-group-addon:not(:first-child):not(:last-child),
+.input-group-btn:not(:first-child):not(:last-child),
+.input-group .form-control:not(:first-child):not(:last-child) {
+  border-radius: 0;
+}
+
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.input-group-addon {
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 1;
+  color: #555555;
+  text-align: center;
+  background-color: #eeeeee;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+}
+
+.input-group-addon.input-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+
+.input-group-addon.input-lg {
+  padding: 10px 16px;
+  font-size: 18px;
+  border-radius: 6px;
+}
+
+.input-group-addon input[type="radio"],
+.input-group-addon input[type="checkbox"] {
+  margin-top: 0;
+}
+
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group-addon:first-child {
+  border-right: 0;
+}
+
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+.input-group-btn {
+  position: relative;
+  white-space: nowrap;
+}
+
+.input-group-btn:first-child > .btn {
+  margin-right: -1px;
+}
+
+.input-group-btn:last-child > .btn {
+  margin-left: -1px;
+}
+
+.input-group-btn > .btn {
+  position: relative;
+}
+
+.input-group-btn > .btn + .btn {
+  margin-left: -4px;
+}
+
+.input-group-btn > .btn:hover,
+.input-group-btn > .btn:active {
+  z-index: 2;
+}
+
+.nav {
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav:before,
+.nav:after {
+  display: table;
+  content: " ";
+}
+
+.nav:after {
+  clear: both;
+}
+
+.nav:before,
+.nav:after {
+  display: table;
+  content: " ";
+}
+
+.nav:after {
+  clear: both;
+}
+
+.nav > li {
+  position: relative;
+  display: block;
+}
+
+.nav > li > a {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
+.nav > li.disabled > a {
+  color: #999999;
+}
+
+.nav > li.disabled > a:hover,
+.nav > li.disabled > a:focus {
+  color: #999999;
+  text-decoration: none;
+  cursor: not-allowed;
+  background-color: transparent;
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+  background-color: #eeeeee;
+  border-color: #428bca;
+}
+
+.nav .open > a .caret,
+.nav .open > a:hover .caret,
+.nav .open > a:focus .caret {
+  border-top-color: #2a6496;
+  border-bottom-color: #2a6496;
+}
+
+.nav .nav-divider {
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+}
+
+.nav > li > a > img {
+  max-width: none;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #dddddd;
+}
+
+.nav-tabs > li {
+  float: left;
+  margin-bottom: -1px;
+}
+
+.nav-tabs > li > a {
+  margin-right: 2px;
+  line-height: 1.428571429;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs > li > a:hover {
+  border-color: #eeeeee #eeeeee #dddddd;
+}
+
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  color: #555555;
+  cursor: default;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-bottom-color: transparent;
+}
+
+.nav-tabs.nav-justified {
+  width: 100%;
+  border-bottom: 0;
+}
+
+.nav-tabs.nav-justified > li {
+  float: none;
+}
+
+.nav-tabs.nav-justified > li > a {
+  margin-bottom: 5px;
+  text-align: center;
+}
+
+.nav-tabs.nav-justified > .dropdown .dropdown-menu {
+  top: auto;
+  left: auto;
+}
+
+@media (min-width: 768px) {
+  .nav-tabs.nav-justified > li {
+    display: table-cell;
+    width: 1%;
+  }
+  .nav-tabs.nav-justified > li > a {
+    margin-bottom: 0;
+  }
+}
+
+.nav-tabs.nav-justified > li > a {
+  margin-right: 0;
+  border-radius: 4px;
+}
+
+.nav-tabs.nav-justified > .active > a,
+.nav-tabs.nav-justified > .active > a:hover,
+.nav-tabs.nav-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+
+@media (min-width: 768px) {
+  .nav-tabs.nav-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs.nav-justified > .active > a,
+  .nav-tabs.nav-justified > .active > a:hover,
+  .nav-tabs.nav-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
+}
+
+.nav-pills > li {
+  float: left;
+}
+
+.nav-pills > li > a {
+  border-radius: 4px;
+}
+
+.nav-pills > li + li {
+  margin-left: 2px;
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  color: #ffffff;
+  background-color: #428bca;
+}
+
+.nav-pills > li.active > a .caret,
+.nav-pills > li.active > a:hover .caret,
+.nav-pills > li.active > a:focus .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.nav-stacked > li {
+  float: none;
+}
+
+.nav-stacked > li + li {
+  margin-top: 2px;
+  margin-left: 0;
+}
+
+.nav-justified {
+  width: 100%;
+}
+
+.nav-justified > li {
+  float: none;
+}
+
+.nav-justified > li > a {
+  margin-bottom: 5px;
+  text-align: center;
+}
+
+.nav-justified > .dropdown .dropdown-menu {
+  top: auto;
+  left: auto;
+}
+
+@media (min-width: 768px) {
+  .nav-justified > li {
+    display: table-cell;
+    width: 1%;
+  }
+  .nav-justified > li > a {
+    margin-bottom: 0;
+  }
+}
+
+.nav-tabs-justified {
+  border-bottom: 0;
+}
+
+.nav-tabs-justified > li > a {
+  margin-right: 0;
+  border-radius: 4px;
+}
+
+.nav-tabs-justified > .active > a,
+.nav-tabs-justified > .active > a:hover,
+.nav-tabs-justified > .active > a:focus {
+  border: 1px solid #dddddd;
+}
+
+@media (min-width: 768px) {
+  .nav-tabs-justified > li > a {
+    border-bottom: 1px solid #dddddd;
+    border-radius: 4px 4px 0 0;
+  }
+  .nav-tabs-justified > .active > a,
+  .nav-tabs-justified > .active > a:hover,
+  .nav-tabs-justified > .active > a:focus {
+    border-bottom-color: #ffffff;
+  }
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}
+
+.nav .caret {
+  border-top-color: #428bca;
+  border-bottom-color: #428bca;
+}
+
+.nav a:hover .caret {
+  border-top-color: #2a6496;
+  border-bottom-color: #2a6496;
+}
+
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navbar {
+  position: relative;
+  min-height: 50px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+}
+
+.navbar:before,
+.navbar:after {
+  display: table;
+  content: " ";
+}
+
+.navbar:after {
+  clear: both;
+}
+
+.navbar:before,
+.navbar:after {
+  display: table;
+  content: " ";
+}
+
+.navbar:after {
+  clear: both;
+}
+
+@media (min-width: 768px) {
+  .navbar {
+    border-radius: 4px;
+  }
+}
+
+.navbar-header:before,
+.navbar-header:after {
+  display: table;
+  content: " ";
+}
+
+.navbar-header:after {
+  clear: both;
+}
+
+.navbar-header:before,
+.navbar-header:after {
+  display: table;
+  content: " ";
+}
+
+.navbar-header:after {
+  clear: both;
+}
+
+@media (min-width: 768px) {
+  .navbar-header {
+    float: left;
+  }
+}
+
+.navbar-collapse {
+  max-height: 340px;
+  padding-right: 15px;
+  padding-left: 15px;
+  overflow-x: visible;
+  border-top: 1px solid transparent;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  -webkit-overflow-scrolling: touch;
+}
+
+.navbar-collapse:before,
+.navbar-collapse:after {
+  display: table;
+  content: " ";
+}
+
+.navbar-collapse:after {
+  clear: both;
+}
+
+.navbar-collapse:before,
+.navbar-collapse:after {
+  display: table;
+  content: " ";
+}
+
+.navbar-collapse:after {
+  clear: both;
+}
+
+.navbar-collapse.in {
+  overflow-y: auto;
+}
+
+@media (min-width: 768px) {
+  .navbar-collapse {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+  }
+  .navbar-collapse.collapse {
+    display: block !important;
+    height: auto !important;
+    padding-bottom: 0;
+    overflow: visible !important;
+  }
+  .navbar-collapse.in {
+    overflow-y: auto;
+  }
+  .navbar-collapse .navbar-nav.navbar-left:first-child {
+    margin-left: -15px;
+  }
+  .navbar-collapse .navbar-nav.navbar-right:last-child {
+    margin-right: -15px;
+  }
+  .navbar-collapse .navbar-text:last-child {
+    margin-right: 0;
+  }
+}
+
+.container > .navbar-header,
+.container > .navbar-collapse {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+@media (min-width: 768px) {
+  .container > .navbar-header,
+  .container > .navbar-collapse {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.navbar-static-top {
+  z-index: 1000;
+  border-width: 0 0 1px;
+}
+
+@media (min-width: 768px) {
+  .navbar-static-top {
+    border-radius: 0;
+  }
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+@media (min-width: 768px) {
+  .navbar-fixed-top,
+  .navbar-fixed-bottom {
+    border-radius: 0;
+  }
+}
+
+.navbar-fixed-top {
+  top: 0;
+  border-width: 0 0 1px;
+}
+
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0;
+  border-width: 1px 0 0;
+}
+
+.navbar-brand {
+  float: left;
+  padding: 15px 15px;
+  font-size: 18px;
+  line-height: 20px;
+}
+
+.navbar-brand:hover,
+.navbar-brand:focus {
+  text-decoration: none;
+}
+
+@media (min-width: 768px) {
+  .navbar > .container .navbar-brand {
+    margin-left: -15px;
+  }
+}
+
+.navbar-toggle {
+  position: relative;
+  float: right;
+  padding: 9px 10px;
+  margin-top: 8px;
+  margin-right: 15px;
+  margin-bottom: 8px;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.navbar-toggle .icon-bar {
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.navbar-toggle .icon-bar + .icon-bar {
+  margin-top: 4px;
+}
+
+@media (min-width: 768px) {
+  .navbar-toggle {
+    display: none;
+  }
+}
+
+.navbar-nav {
+  margin: 7.5px -15px;
+}
+
+.navbar-nav > li > a {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  line-height: 20px;
+}
+
+@media (max-width: 767px) {
+  .navbar-nav .open .dropdown-menu {
+    position: static;
+    float: none;
+    width: auto;
+    margin-top: 0;
+    background-color: transparent;
+    border: 0;
+    box-shadow: none;
+  }
+  .navbar-nav .open .dropdown-menu > li > a,
+  .navbar-nav .open .dropdown-menu .dropdown-header {
+    padding: 5px 15px 5px 25px;
+  }
+  .navbar-nav .open .dropdown-menu > li > a {
+    line-height: 20px;
+  }
+  .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-nav .open .dropdown-menu > li > a:focus {
+    background-image: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-nav {
+    float: left;
+    margin: 0;
+  }
+  .navbar-nav > li {
+    float: left;
+  }
+  .navbar-nav > li > a {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-left {
+    float: left !important;
+  }
+  .navbar-right {
+    float: right !important;
+  }
+}
+
+.navbar-form {
+  padding: 10px 15px;
+  margin-top: 8px;
+  margin-right: -15px;
+  margin-bottom: 8px;
+  margin-left: -15px;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+@media (min-width: 768px) {
+  .navbar-form .form-group {
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+  }
+  .navbar-form .form-control {
+    display: inline-block;
+  }
+  .navbar-form .radio,
+  .navbar-form .checkbox {
+    display: inline-block;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .navbar-form .radio input[type="radio"],
+  .navbar-form .checkbox input[type="checkbox"] {
+    float: none;
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .navbar-form .form-group {
+    margin-bottom: 5px;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-form {
+    width: auto;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-right: 0;
+    margin-left: 0;
+    border: 0;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+  }
+}
+
+.navbar-nav > li > .dropdown-menu {
+  margin-top: 0;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.navbar-nav.pull-right > li > .dropdown-menu,
+.navbar-nav > li > .dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.navbar-btn {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.navbar-text {
+  float: left;
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+@media (min-width: 768px) {
+  .navbar-text {
+    margin-right: 15px;
+    margin-left: 15px;
+  }
+}
+
+.navbar-default {
+  background-color: #f8f8f8;
+  border-color: #e7e7e7;
+}
+
+.navbar-default .navbar-brand {
+  color: #777777;
+}
+
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #5e5e5e;
+  background-color: transparent;
+}
+
+.navbar-default .navbar-text {
+  color: #777777;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: #777777;
+}
+
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #333333;
+  background-color: transparent;
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #555555;
+  background-color: #e7e7e7;
+}
+
+.navbar-default .navbar-nav > .disabled > a,
+.navbar-default .navbar-nav > .disabled > a:hover,
+.navbar-default .navbar-nav > .disabled > a:focus {
+  color: #cccccc;
+  background-color: transparent;
+}
+
+.navbar-default .navbar-toggle {
+  border-color: #dddddd;
+}
+
+.navbar-default .navbar-toggle:hover,
+.navbar-default .navbar-toggle:focus {
+  background-color: #dddddd;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #cccccc;
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+  border-color: #e7e7e7;
+}
+
+.navbar-default .navbar-nav > .dropdown > a:hover .caret,
+.navbar-default .navbar-nav > .dropdown > a:focus .caret {
+  border-top-color: #333333;
+  border-bottom-color: #333333;
+}
+
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+  color: #555555;
+  background-color: #e7e7e7;
+}
+
+.navbar-default .navbar-nav > .open > a .caret,
+.navbar-default .navbar-nav > .open > a:hover .caret,
+.navbar-default .navbar-nav > .open > a:focus .caret {
+  border-top-color: #555555;
+  border-bottom-color: #555555;
+}
+
+.navbar-default .navbar-nav > .dropdown > a .caret {
+  border-top-color: #777777;
+  border-bottom-color: #777777;
+}
+
+@media (max-width: 767px) {
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+    color: #777777;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
+    color: #333333;
+    background-color: transparent;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #555555;
+    background-color: #e7e7e7;
+  }
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+    color: #cccccc;
+    background-color: transparent;
+  }
+}
+
+.navbar-default .navbar-link {
+  color: #777777;
+}
+
+.navbar-default .navbar-link:hover {
+  color: #333333;
+}
+
+.navbar-inverse {
+  background-color: #222222;
+  border-color: #080808;
+}
+
+.navbar-inverse .navbar-brand {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-brand:hover,
+.navbar-inverse .navbar-brand:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+
+.navbar-inverse .navbar-text {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-nav > li > a {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-nav > li > a:hover,
+.navbar-inverse .navbar-nav > li > a:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+  color: #ffffff;
+  background-color: #080808;
+}
+
+.navbar-inverse .navbar-nav > .disabled > a,
+.navbar-inverse .navbar-nav > .disabled > a:hover,
+.navbar-inverse .navbar-nav > .disabled > a:focus {
+  color: #444444;
+  background-color: transparent;
+}
+
+.navbar-inverse .navbar-toggle {
+  border-color: #333333;
+}
+
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  background-color: #333333;
+}
+
+.navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #ffffff;
+}
+
+.navbar-inverse .navbar-collapse,
+.navbar-inverse .navbar-form {
+  border-color: #101010;
+}
+
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+  color: #ffffff;
+  background-color: #080808;
+}
+
+.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar-inverse .navbar-nav > .dropdown > a .caret {
+  border-top-color: #999999;
+  border-bottom-color: #999999;
+}
+
+.navbar-inverse .navbar-nav > .open > a .caret,
+.navbar-inverse .navbar-nav > .open > a:hover .caret,
+.navbar-inverse .navbar-nav > .open > a:focus .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+@media (max-width: 767px) {
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
+    border-color: #080808;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
+    color: #999999;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
+    color: #ffffff;
+    background-color: transparent;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #ffffff;
+    background-color: #080808;
+  }
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+    color: #444444;
+    background-color: transparent;
+  }
+}
+
+.navbar-inverse .navbar-link {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-link:hover {
+  color: #ffffff;
+}
+
+.breadcrumb {
+  padding: 8px 15px;
+  margin-bottom: 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.breadcrumb > li {
+  display: inline-block;
+}
+
+.breadcrumb > li + li:before {
+  padding: 0 5px;
+  color: #cccccc;
+  content: "/\00a0";
+}
+
+.breadcrumb > .active {
+  color: #999999;
+}
+
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+
+.pagination > li {
+  display: inline;
+}
+
+.pagination > li > a,
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.428571429;
+  text-decoration: none;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+  margin-left: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+  background-color: #eeeeee;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  z-index: 2;
+  color: #ffffff;
+  cursor: default;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+  color: #999999;
+  cursor: not-allowed;
+  background-color: #ffffff;
+  border-color: #dddddd;
+}
+
+.pagination-lg > li > a,
+.pagination-lg > li > span {
+  padding: 10px 16px;
+  font-size: 18px;
+}
+
+.pagination-lg > li:first-child > a,
+.pagination-lg > li:first-child > span {
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+}
+
+.pagination-lg > li:last-child > a,
+.pagination-lg > li:last-child > span {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.pagination-sm > li > a,
+.pagination-sm > li > span {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+
+.pagination-sm > li:first-child > a,
+.pagination-sm > li:first-child > span {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.pagination-sm > li:last-child > a,
+.pagination-sm > li:last-child > span {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.pager {
+  padding-left: 0;
+  margin: 20px 0;
+  text-align: center;
+  list-style: none;
+}
+
+.pager:before,
+.pager:after {
+  display: table;
+  content: " ";
+}
+
+.pager:after {
+  clear: both;
+}
+
+.pager:before,
+.pager:after {
+  display: table;
+  content: " ";
+}
+
+.pager:after {
+  clear: both;
+}
+
+.pager li {
+  display: inline;
+}
+
+.pager li > a,
+.pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 15px;
+}
+
+.pager li > a:hover,
+.pager li > a:focus {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
+.pager .next > a,
+.pager .next > span {
+  float: right;
+}
+
+.pager .previous > a,
+.pager .previous > span {
+  float: left;
+}
+
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > a:focus,
+.pager .disabled > span {
+  color: #999999;
+  cursor: not-allowed;
+  background-color: #ffffff;
+}
+
+.label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  color: #ffffff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+}
+
+.label[href]:hover,
+.label[href]:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label:empty {
+  display: none;
+}
+
+.label-default {
+  background-color: #999999;
+}
+
+.label-default[href]:hover,
+.label-default[href]:focus {
+  background-color: #808080;
+}
+
+.label-primary {
+  background-color: #428bca;
+}
+
+.label-primary[href]:hover,
+.label-primary[href]:focus {
+  background-color: #3071a9;
+}
+
+.label-success {
+  background-color: #5cb85c;
+}
+
+.label-success[href]:hover,
+.label-success[href]:focus {
+  background-color: #449d44;
+}
+
+.label-info {
+  background-color: #5bc0de;
+}
+
+.label-info[href]:hover,
+.label-info[href]:focus {
+  background-color: #31b0d5;
+}
+
+.label-warning {
+  background-color: #f0ad4e;
+}
+
+.label-warning[href]:hover,
+.label-warning[href]:focus {
+  background-color: #ec971f;
+}
+
+.label-danger {
+  background-color: #d9534f;
+}
+
+.label-danger[href]:hover,
+.label-danger[href]:focus {
+  background-color: #c9302c;
+}
+
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+  color: #ffffff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  background-color: #999999;
+  border-radius: 10px;
+}
+
+.badge:empty {
+  display: none;
+}
+
+a.badge:hover,
+a.badge:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+a.list-group-item.active > .badge,
+.nav-pills > .active > a > .badge {
+  color: #428bca;
+  background-color: #ffffff;
+}
+
+.nav-pills > li > a > .badge {
+  margin-left: 3px;
+}
+
+.jumbotron {
+  padding: 30px;
+  margin-bottom: 30px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 2.1428571435;
+  color: inherit;
+  background-color: #eeeeee;
+}
+
+.jumbotron h1 {
+  line-height: 1;
+  color: inherit;
+}
+
+.jumbotron p {
+  line-height: 1.4;
+}
+
+.container .jumbotron {
+  border-radius: 6px;
+}
+
+@media screen and (min-width: 768px) {
+  .jumbotron {
+    padding-top: 48px;
+    padding-bottom: 48px;
+  }
+  .container .jumbotron {
+    padding-right: 60px;
+    padding-left: 60px;
+  }
+  .jumbotron h1 {
+    font-size: 63px;
+  }
+}
+
+.thumbnail {
+  display: inline-block;
+  display: block;
+  height: auto;
+  max-width: 100%;
+  padding: 4px;
+  margin-bottom: 20px;
+  line-height: 1.428571429;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  -webkit-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
+}
+
+.thumbnail > img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+a.thumbnail:hover,
+a.thumbnail:focus,
+a.thumbnail.active {
+  border-color: #428bca;
+}
+
+.thumbnail .caption {
+  padding: 9px;
+  color: #333333;
+}
+
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert h4 {
+  margin-top: 0;
+  color: inherit;
+}
+
+.alert .alert-link {
+  font-weight: bold;
+}
+
+.alert > p,
+.alert > ul {
+  margin-bottom: 0;
+}
+
+.alert > p + p {
+  margin-top: 5px;
+}
+
+.alert-dismissable {
+  padding-right: 35px;
+}
+
+.alert-dismissable .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  color: inherit;
+}
+
+.alert-success {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-success hr {
+  border-top-color: #c9e2b3;
+}
+
+.alert-success .alert-link {
+  color: #356635;
+}
+
+.alert-info {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.alert-info hr {
+  border-top-color: #a6e1ec;
+}
+
+.alert-info .alert-link {
+  color: #2d6987;
+}
+
+.alert-warning {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+.alert-warning hr {
+  border-top-color: #f7e1b5;
+}
+
+.alert-warning .alert-link {
+  color: #a47e3c;
+}
+
+.alert-danger {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.alert-danger hr {
+  border-top-color: #e4b9c0;
+}
+
+.alert-danger .alert-link {
+  color: #953b39;
+}
+
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@-o-keyframes progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 40px 0;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 40px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+.progress {
+  height: 20px;
+  margin-bottom: 20px;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.progress-bar {
+  float: left;
+  width: 0;
+  height: 100%;
+  font-size: 12px;
+  line-height: 20px;
+  color: #ffffff;
+  text-align: center;
+  background-color: #428bca;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+}
+
+.progress-striped .progress-bar {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 40px 40px;
+}
+
+.progress.active .progress-bar {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
+
+.progress-bar-success {
+  background-color: #5cb85c;
+}
+
+.progress-striped .progress-bar-success {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-bar-info {
+  background-color: #5bc0de;
+}
+
+.progress-striped .progress-bar-info {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-bar-warning {
+  background-color: #f0ad4e;
+}
+
+.progress-striped .progress-bar-warning {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.progress-bar-danger {
+  background-color: #d9534f;
+}
+
+.progress-striped .progress-bar-danger {
+  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+
+.media,
+.media-body {
+  overflow: hidden;
+  zoom: 1;
+}
+
+.media,
+.media .media {
+  margin-top: 15px;
+}
+
+.media:first-child {
+  margin-top: 0;
+}
+
+.media-object {
+  display: block;
+}
+
+.media-heading {
+  margin: 0 0 5px;
+}
+
+.media > .pull-left {
+  margin-right: 10px;
+}
+
+.media > .pull-right {
+  margin-left: 10px;
+}
+
+.media-list {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-group {
+  padding-left: 0;
+  margin-bottom: 20px;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  margin-bottom: -1px;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+}
+
+.list-group-item:first-child {
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+
+.list-group-item:last-child {
+  margin-bottom: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.list-group-item > .badge {
+  float: right;
+}
+
+.list-group-item > .badge + .badge {
+  margin-right: 5px;
+}
+
+a.list-group-item {
+  color: #555555;
+}
+
+a.list-group-item .list-group-item-heading {
+  color: #333333;
+}
+
+a.list-group-item:hover,
+a.list-group-item:focus {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+a.list-group-item.active,
+a.list-group-item.active:hover,
+a.list-group-item.active:focus {
+  z-index: 2;
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+a.list-group-item.active .list-group-item-heading,
+a.list-group-item.active:hover .list-group-item-heading,
+a.list-group-item.active:focus .list-group-item-heading {
+  color: inherit;
+}
+
+a.list-group-item.active .list-group-item-text,
+a.list-group-item.active:hover .list-group-item-text,
+a.list-group-item.active:focus .list-group-item-text {
+  color: #e1edf7;
+}
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
+
+.panel {
+  margin-bottom: 20px;
+  background-color: #ffffff;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.panel-body {
+  padding: 15px;
+}
+
+.panel-body:before,
+.panel-body:after {
+  display: table;
+  content: " ";
+}
+
+.panel-body:after {
+  clear: both;
+}
+
+.panel-body:before,
+.panel-body:after {
+  display: table;
+  content: " ";
+}
+
+.panel-body:after {
+  clear: both;
+}
+
+.panel > .list-group {
+  margin-bottom: 0;
+}
+
+.panel > .list-group .list-group-item {
+  border-width: 1px 0;
+}
+
+.panel > .list-group .list-group-item:first-child {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.panel > .list-group .list-group-item:last-child {
+  border-bottom: 0;
+}
+
+.panel-heading + .list-group .list-group-item:first-child {
+  border-top-width: 0;
+}
+
+.panel > .table,
+.panel > .table-responsive {
+  margin-bottom: 0;
+}
+
+.panel > .panel-body + .table,
+.panel > .panel-body + .table-responsive {
+  border-top: 1px solid #dddddd;
+}
+
+.panel > .table-bordered,
+.panel > .table-responsive > .table-bordered {
+  border: 0;
+}
+
+.panel > .table-bordered > thead > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
+.panel > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
+.panel > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+.panel > .table-bordered > thead > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
+.panel > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
+.panel > .table-bordered > tfoot > tr > td:first-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+  border-left: 0;
+}
+
+.panel > .table-bordered > thead > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
+.panel > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
+.panel > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+.panel > .table-bordered > thead > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
+.panel > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
+.panel > .table-bordered > tfoot > tr > td:last-child,
+.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+  border-right: 0;
+}
+
+.panel > .table-bordered > thead > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > thead > tr:last-child > th,
+.panel > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
+.panel > .table-bordered > tfoot > tr:last-child > th,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+.panel > .table-bordered > thead > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > thead > tr:last-child > td,
+.panel > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
+.panel > .table-bordered > tfoot > tr:last-child > td,
+.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+  border-bottom: 0;
+}
+
+.panel-heading {
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.panel-heading > .dropdown .dropdown-toggle {
+  color: inherit;
+}
+
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 16px;
+}
+
+.panel-title > a {
+  color: inherit;
+}
+
+.panel-footer {
+  padding: 10px 15px;
+  background-color: #f5f5f5;
+  border-top: 1px solid #dddddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+.panel-group .panel {
+  margin-bottom: 0;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.panel-group .panel + .panel {
+  margin-top: 5px;
+}
+
+.panel-group .panel-heading {
+  border-bottom: 0;
+}
+
+.panel-group .panel-heading + .panel-collapse .panel-body {
+  border-top: 1px solid #dddddd;
+}
+
+.panel-group .panel-footer {
+  border-top: 0;
+}
+
+.panel-group .panel-footer + .panel-collapse .panel-body {
+  border-bottom: 1px solid #dddddd;
+}
+
+.panel-default {
+  border-color: #dddddd;
+}
+
+.panel-default > .panel-heading {
+  color: #333333;
+  background-color: #f5f5f5;
+  border-color: #dddddd;
+}
+
+.panel-default > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #dddddd;
+}
+
+.panel-default > .panel-heading > .dropdown .caret {
+  border-color: #333333 transparent;
+}
+
+.panel-default > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #dddddd;
+}
+
+.panel-primary {
+  border-color: #428bca;
+}
+
+.panel-primary > .panel-heading {
+  color: #ffffff;
+  background-color: #428bca;
+  border-color: #428bca;
+}
+
+.panel-primary > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #428bca;
+}
+
+.panel-primary > .panel-heading > .dropdown .caret {
+  border-color: #ffffff transparent;
+}
+
+.panel-primary > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #428bca;
+}
+
+.panel-success {
+  border-color: #d6e9c6;
+}
+
+.panel-success > .panel-heading {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.panel-success > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #d6e9c6;
+}
+
+.panel-success > .panel-heading > .dropdown .caret {
+  border-color: #468847 transparent;
+}
+
+.panel-success > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #d6e9c6;
+}
+
+.panel-warning {
+  border-color: #faebcc;
+}
+
+.panel-warning > .panel-heading {
+  color: #c09853;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+
+.panel-warning > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #faebcc;
+}
+
+.panel-warning > .panel-heading > .dropdown .caret {
+  border-color: #c09853 transparent;
+}
+
+.panel-warning > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #faebcc;
+}
+
+.panel-danger {
+  border-color: #ebccd1;
+}
+
+.panel-danger > .panel-heading {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+
+.panel-danger > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #ebccd1;
+}
+
+.panel-danger > .panel-heading > .dropdown .caret {
+  border-color: #b94a48 transparent;
+}
+
+.panel-danger > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #ebccd1;
+}
+
+.panel-info {
+  border-color: #bce8f1;
+}
+
+.panel-info > .panel-heading {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.panel-info > .panel-heading + .panel-collapse .panel-body {
+  border-top-color: #bce8f1;
+}
+
+.panel-info > .panel-heading > .dropdown .caret {
+  border-color: #3a87ad transparent;
+}
+
+.panel-info > .panel-footer + .panel-collapse .panel-body {
+  border-bottom-color: #bce8f1;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+}
+
+.well blockquote {
+  border-color: #ddd;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+
+.well-lg {
+  padding: 24px;
+  border-radius: 6px;
+}
+
+.well-sm {
+  padding: 9px;
+  border-radius: 3px;
+}
+
+.close {
+  float: right;
+  font-size: 21px;
+  font-weight: bold;
+  line-height: 1;
+  color: #000000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+
+.close:hover,
+.close:focus {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  display: none;
+  overflow: auto;
+  overflow-y: scroll;
+}
+
+.modal.fade .modal-dialog {
+  -webkit-transform: translate(0, -25%);
+      -ms-transform: translate(0, -25%);
+          transform: translate(0, -25%);
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+     -moz-transition: -moz-transform 0.3s ease-out;
+       -o-transition: -o-transform 0.3s ease-out;
+          transition: transform 0.3s ease-out;
+}
+
+.modal.in .modal-dialog {
+  -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+          transform: translate(0, 0);
+}
+
+.modal-dialog {
+  position: relative;
+  z-index: 1050;
+  width: auto;
+  padding: 10px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.modal-content {
+  position: relative;
+  background-color: #ffffff;
+  border: 1px solid #999999;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  outline: none;
+  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+          box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
+  background-clip: padding-box;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+  background-color: #000000;
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+.modal-backdrop.in {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+.modal-header {
+  min-height: 16.428571429px;
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.modal-header .close {
+  margin-top: -2px;
+}
+
+.modal-title {
+  margin: 0;
+  line-height: 1.428571429;
+}
+
+.modal-body {
+  position: relative;
+  padding: 20px;
+}
+
+.modal-footer {
+  padding: 19px 20px 20px;
+  margin-top: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  content: " ";
+}
+
+.modal-footer:after {
+  clear: both;
+}
+
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  content: " ";
+}
+
+.modal-footer:after {
+  clear: both;
+}
+
+.modal-footer .btn + .btn {
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+
+.modal-footer .btn-group .btn + .btn {
+  margin-left: -1px;
+}
+
+.modal-footer .btn-block + .btn-block {
+  margin-left: 0;
+}
+
+@media screen and (min-width: 768px) {
+  .modal-dialog {
+    width: 600px;
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+  .modal-content {
+    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+  }
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 1030;
+  display: block;
+  font-size: 12px;
+  line-height: 1.4;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  visibility: visible;
+}
+
+.tooltip.in {
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+
+.tooltip.top {
+  padding: 5px 0;
+  margin-top: -3px;
+}
+
+.tooltip.right {
+  padding: 0 5px;
+  margin-left: 3px;
+}
+
+.tooltip.bottom {
+  padding: 5px 0;
+  margin-top: 3px;
+}
+
+.tooltip.left {
+  padding: 0 5px;
+  margin-left: -3px;
+}
+
+.tooltip-inner {
+  max-width: 200px;
+  padding: 3px 8px;
+  color: #ffffff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #000000;
+  border-radius: 4px;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tooltip.top .tooltip-arrow {
+  bottom: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-top-color: #000000;
+  border-width: 5px 5px 0;
+}
+
+.tooltip.top-left .tooltip-arrow {
+  bottom: 0;
+  left: 5px;
+  border-top-color: #000000;
+  border-width: 5px 5px 0;
+}
+
+.tooltip.top-right .tooltip-arrow {
+  right: 5px;
+  bottom: 0;
+  border-top-color: #000000;
+  border-width: 5px 5px 0;
+}
+
+.tooltip.right .tooltip-arrow {
+  top: 50%;
+  left: 0;
+  margin-top: -5px;
+  border-right-color: #000000;
+  border-width: 5px 5px 5px 0;
+}
+
+.tooltip.left .tooltip-arrow {
+  top: 50%;
+  right: 0;
+  margin-top: -5px;
+  border-left-color: #000000;
+  border-width: 5px 0 5px 5px;
+}
+
+.tooltip.bottom .tooltip-arrow {
+  top: 0;
+  left: 50%;
+  margin-left: -5px;
+  border-bottom-color: #000000;
+  border-width: 0 5px 5px;
+}
+
+.tooltip.bottom-left .tooltip-arrow {
+  top: 0;
+  left: 5px;
+  border-bottom-color: #000000;
+  border-width: 0 5px 5px;
+}
+
+.tooltip.bottom-right .tooltip-arrow {
+  top: 0;
+  right: 5px;
+  border-bottom-color: #000000;
+  border-width: 0 5px 5px;
+}
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1010;
+  display: none;
+  max-width: 276px;
+  padding: 1px;
+  text-align: left;
+  white-space: normal;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  background-clip: padding-box;
+}
+
+.popover.top {
+  margin-top: -10px;
+}
+
+.popover.right {
+  margin-left: 10px;
+}
+
+.popover.bottom {
+  margin-top: 10px;
+}
+
+.popover.left {
+  margin-left: -10px;
+}
+
+.popover-title {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  border-radius: 5px 5px 0 0;
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+.popover .arrow,
+.popover .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.popover .arrow {
+  border-width: 11px;
+}
+
+.popover .arrow:after {
+  border-width: 10px;
+  content: "";
+}
+
+.popover.top .arrow {
+  bottom: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-top-color: #999999;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  border-bottom-width: 0;
+}
+
+.popover.top .arrow:after {
+  bottom: 1px;
+  margin-left: -10px;
+  border-top-color: #ffffff;
+  border-bottom-width: 0;
+  content: " ";
+}
+
+.popover.right .arrow {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-right-color: #999999;
+  border-right-color: rgba(0, 0, 0, 0.25);
+  border-left-width: 0;
+}
+
+.popover.right .arrow:after {
+  bottom: -10px;
+  left: 1px;
+  border-right-color: #ffffff;
+  border-left-width: 0;
+  content: " ";
+}
+
+.popover.bottom .arrow {
+  top: -11px;
+  left: 50%;
+  margin-left: -11px;
+  border-bottom-color: #999999;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+  border-top-width: 0;
+}
+
+.popover.bottom .arrow:after {
+  top: 1px;
+  margin-left: -10px;
+  border-bottom-color: #ffffff;
+  border-top-width: 0;
+  content: " ";
+}
+
+.popover.left .arrow {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-left-color: #999999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+  border-right-width: 0;
+}
+
+.popover.left .arrow:after {
+  right: 1px;
+  bottom: -10px;
+  border-left-color: #ffffff;
+  border-right-width: 0;
+  content: " ";
+}
+
+.carousel {
+  position: relative;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-inner > .item {
+  position: relative;
+  display: none;
+  -webkit-transition: 0.6s ease-in-out left;
+          transition: 0.6s ease-in-out left;
+}
+
+.carousel-inner > .item > img,
+.carousel-inner > .item > a > img {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  line-height: 1;
+}
+
+.carousel-inner > .active,
+.carousel-inner > .next,
+.carousel-inner > .prev {
+  display: block;
+}
+
+.carousel-inner > .active {
+  left: 0;
+}
+
+.carousel-inner > .next,
+.carousel-inner > .prev {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.carousel-inner > .next {
+  left: 100%;
+}
+
+.carousel-inner > .prev {
+  left: -100%;
+}
+
+.carousel-inner > .next.left,
+.carousel-inner > .prev.right {
+  left: 0;
+}
+
+.carousel-inner > .active.left {
+  left: -100%;
+}
+
+.carousel-inner > .active.right {
+  left: 100%;
+}
+
+.carousel-control {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 15%;
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+.carousel-control.left {
+  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
+  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
+}
+
+.carousel-control.right {
+  right: 0;
+  left: auto;
+  background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
+  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
+  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
+}
+
+.carousel-control:hover,
+.carousel-control:focus {
+  color: #ffffff;
+  text-decoration: none;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+
+.carousel-control .icon-prev,
+.carousel-control .icon-next,
+.carousel-control .glyphicon-chevron-left,
+.carousel-control .glyphicon-chevron-right {
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+  display: inline-block;
+}
+
+.carousel-control .icon-prev,
+.carousel-control .glyphicon-chevron-left {
+  left: 50%;
+}
+
+.carousel-control .icon-next,
+.carousel-control .glyphicon-chevron-right {
+  right: 50%;
+}
+
+.carousel-control .icon-prev,
+.carousel-control .icon-next {
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  margin-left: -10px;
+  font-family: serif;
+}
+
+.carousel-control .icon-prev:before {
+  content: '\2039';
+}
+
+.carousel-control .icon-next:before {
+  content: '\203a';
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  z-index: 15;
+  width: 60%;
+  padding-left: 0;
+  margin-left: -30%;
+  text-align: center;
+  list-style: none;
+}
+
+.carousel-indicators li {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  margin: 1px;
+  text-indent: -999px;
+  cursor: pointer;
+  background-color: #000 \9;
+  background-color: rgba(0, 0, 0, 0);
+  border: 1px solid #ffffff;
+  border-radius: 10px;
+}
+
+.carousel-indicators .active {
+  width: 12px;
+  height: 12px;
+  margin: 0;
+  background-color: #ffffff;
+}
+
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 20px;
+  left: 15%;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #ffffff;
+  text-align: center;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+}
+
+.carousel-caption .btn {
+  text-shadow: none;
+}
+
+@media screen and (min-width: 768px) {
+  .carousel-control .glyphicons-chevron-left,
+  .carousel-control .glyphicons-chevron-right,
+  .carousel-control .icon-prev,
+  .carousel-control .icon-next {
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: -15px;
+    font-size: 30px;
+  }
+  .carousel-caption {
+    right: 20%;
+    left: 20%;
+    padding-bottom: 30px;
+  }
+  .carousel-indicators {
+    bottom: 20px;
+  }
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: " ";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.center-block {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.pull-right {
+  float: right !important;
+}
+
+.pull-left {
+  float: left !important;
+}
+
+.hide {
+  display: none !important;
+}
+
+.show {
+  display: block !important;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.text-hide {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.affix {
+  position: fixed;
+}
+
+@-ms-viewport {
+  width: device-width;
+}
+
+.visible-xs,
+tr.visible-xs,
+th.visible-xs,
+td.visible-xs {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .visible-xs {
+    display: block !important;
+  }
+  tr.visible-xs {
+    display: table-row !important;
+  }
+  th.visible-xs,
+  td.visible-xs {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-xs.visible-sm {
+    display: block !important;
+  }
+  tr.visible-xs.visible-sm {
+    display: table-row !important;
+  }
+  th.visible-xs.visible-sm,
+  td.visible-xs.visible-sm {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-xs.visible-md {
+    display: block !important;
+  }
+  tr.visible-xs.visible-md {
+    display: table-row !important;
+  }
+  th.visible-xs.visible-md,
+  td.visible-xs.visible-md {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .visible-xs.visible-lg {
+    display: block !important;
+  }
+  tr.visible-xs.visible-lg {
+    display: table-row !important;
+  }
+  th.visible-xs.visible-lg,
+  td.visible-xs.visible-lg {
+    display: table-cell !important;
+  }
+}
+
+.visible-sm,
+tr.visible-sm,
+th.visible-sm,
+td.visible-sm {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .visible-sm.visible-xs {
+    display: block !important;
+  }
+  tr.visible-sm.visible-xs {
+    display: table-row !important;
+  }
+  th.visible-sm.visible-xs,
+  td.visible-sm.visible-xs {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-sm {
+    display: block !important;
+  }
+  tr.visible-sm {
+    display: table-row !important;
+  }
+  th.visible-sm,
+  td.visible-sm {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-sm.visible-md {
+    display: block !important;
+  }
+  tr.visible-sm.visible-md {
+    display: table-row !important;
+  }
+  th.visible-sm.visible-md,
+  td.visible-sm.visible-md {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .visible-sm.visible-lg {
+    display: block !important;
+  }
+  tr.visible-sm.visible-lg {
+    display: table-row !important;
+  }
+  th.visible-sm.visible-lg,
+  td.visible-sm.visible-lg {
+    display: table-cell !important;
+  }
+}
+
+.visible-md,
+tr.visible-md,
+th.visible-md,
+td.visible-md {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .visible-md.visible-xs {
+    display: block !important;
+  }
+  tr.visible-md.visible-xs {
+    display: table-row !important;
+  }
+  th.visible-md.visible-xs,
+  td.visible-md.visible-xs {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-md.visible-sm {
+    display: block !important;
+  }
+  tr.visible-md.visible-sm {
+    display: table-row !important;
+  }
+  th.visible-md.visible-sm,
+  td.visible-md.visible-sm {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-md {
+    display: block !important;
+  }
+  tr.visible-md {
+    display: table-row !important;
+  }
+  th.visible-md,
+  td.visible-md {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .visible-md.visible-lg {
+    display: block !important;
+  }
+  tr.visible-md.visible-lg {
+    display: table-row !important;
+  }
+  th.visible-md.visible-lg,
+  td.visible-md.visible-lg {
+    display: table-cell !important;
+  }
+}
+
+.visible-lg,
+tr.visible-lg,
+th.visible-lg,
+td.visible-lg {
+  display: none !important;
+}
+
+@media (max-width: 767px) {
+  .visible-lg.visible-xs {
+    display: block !important;
+  }
+  tr.visible-lg.visible-xs {
+    display: table-row !important;
+  }
+  th.visible-lg.visible-xs,
+  td.visible-lg.visible-xs {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .visible-lg.visible-sm {
+    display: block !important;
+  }
+  tr.visible-lg.visible-sm {
+    display: table-row !important;
+  }
+  th.visible-lg.visible-sm,
+  td.visible-lg.visible-sm {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .visible-lg.visible-md {
+    display: block !important;
+  }
+  tr.visible-lg.visible-md {
+    display: table-row !important;
+  }
+  th.visible-lg.visible-md,
+  td.visible-lg.visible-md {
+    display: table-cell !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .visible-lg {
+    display: block !important;
+  }
+  tr.visible-lg {
+    display: table-row !important;
+  }
+  th.visible-lg,
+  td.visible-lg {
+    display: table-cell !important;
+  }
+}
+
+.hidden-xs {
+  display: block !important;
+}
+
+tr.hidden-xs {
+  display: table-row !important;
+}
+
+th.hidden-xs,
+td.hidden-xs {
+  display: table-cell !important;
+}
+
+@media (max-width: 767px) {
+  .hidden-xs,
+  tr.hidden-xs,
+  th.hidden-xs,
+  td.hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-xs.hidden-sm,
+  tr.hidden-xs.hidden-sm,
+  th.hidden-xs.hidden-sm,
+  td.hidden-xs.hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-xs.hidden-md,
+  tr.hidden-xs.hidden-md,
+  th.hidden-xs.hidden-md,
+  td.hidden-xs.hidden-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hidden-xs.hidden-lg,
+  tr.hidden-xs.hidden-lg,
+  th.hidden-xs.hidden-lg,
+  td.hidden-xs.hidden-lg {
+    display: none !important;
+  }
+}
+
+.hidden-sm {
+  display: block !important;
+}
+
+tr.hidden-sm {
+  display: table-row !important;
+}
+
+th.hidden-sm,
+td.hidden-sm {
+  display: table-cell !important;
+}
+
+@media (max-width: 767px) {
+  .hidden-sm.hidden-xs,
+  tr.hidden-sm.hidden-xs,
+  th.hidden-sm.hidden-xs,
+  td.hidden-sm.hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-sm,
+  tr.hidden-sm,
+  th.hidden-sm,
+  td.hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-sm.hidden-md,
+  tr.hidden-sm.hidden-md,
+  th.hidden-sm.hidden-md,
+  td.hidden-sm.hidden-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hidden-sm.hidden-lg,
+  tr.hidden-sm.hidden-lg,
+  th.hidden-sm.hidden-lg,
+  td.hidden-sm.hidden-lg {
+    display: none !important;
+  }
+}
+
+.hidden-md {
+  display: block !important;
+}
+
+tr.hidden-md {
+  display: table-row !important;
+}
+
+th.hidden-md,
+td.hidden-md {
+  display: table-cell !important;
+}
+
+@media (max-width: 767px) {
+  .hidden-md.hidden-xs,
+  tr.hidden-md.hidden-xs,
+  th.hidden-md.hidden-xs,
+  td.hidden-md.hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-md.hidden-sm,
+  tr.hidden-md.hidden-sm,
+  th.hidden-md.hidden-sm,
+  td.hidden-md.hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-md,
+  tr.hidden-md,
+  th.hidden-md,
+  td.hidden-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hidden-md.hidden-lg,
+  tr.hidden-md.hidden-lg,
+  th.hidden-md.hidden-lg,
+  td.hidden-md.hidden-lg {
+    display: none !important;
+  }
+}
+
+.hidden-lg {
+  display: block !important;
+}
+
+tr.hidden-lg {
+  display: table-row !important;
+}
+
+th.hidden-lg,
+td.hidden-lg {
+  display: table-cell !important;
+}
+
+@media (max-width: 767px) {
+  .hidden-lg.hidden-xs,
+  tr.hidden-lg.hidden-xs,
+  th.hidden-lg.hidden-xs,
+  td.hidden-lg.hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-lg.hidden-sm,
+  tr.hidden-lg.hidden-sm,
+  th.hidden-lg.hidden-sm,
+  td.hidden-lg.hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-lg.hidden-md,
+  tr.hidden-lg.hidden-md,
+  th.hidden-lg.hidden-md,
+  td.hidden-lg.hidden-md {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .hidden-lg,
+  tr.hidden-lg,
+  th.hidden-lg,
+  td.hidden-lg {
+    display: none !important;
+  }
+}
+
+.visible-print,
+tr.visible-print,
+th.visible-print,
+td.visible-print {
+  display: none !important;
+}
+
+@media print {
+  .visible-print {
+    display: block !important;
+  }
+  tr.visible-print {
+    display: table-row !important;
+  }
+  th.visible-print,
+  td.visible-print {
+    display: table-cell !important;
+  }
+  .hidden-print,
+  tr.hidden-print,
+  th.hidden-print,
+  td.hidden-print {
+    display: none !important;
+  }
+}

diff --git a/src/web/css/bootstrap-datetimepicker.css b/src/web/css/bootstrap-datetimepicker.css
new file mode 100644
index 0000000..e5eb7a6
--- /dev/null
+++ b/src/web/css/bootstrap-datetimepicker.css
@@ -0,0 +1,174 @@
+/**
+ * Build file for the dist version of datetimepicker.css
+ */
+/*!
+ * Datetimepicker for Bootstrap v3
+ * https://github.com/Eonasdan/bootstrap-datetimepicker/
+ * Copyright 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */
+.bootstrap-datetimepicker-widget {
+  top: 0;
+  left: 0;
+  width: 250px;
+  padding: 4px;
+  margin-top: 1px;
+  z-index: 9999;
+  border-radius: 4px;
+  /*.dow {
+  border-top: 1px solid #ddd !important;
+  }*/
+}
+.bootstrap-datetimepicker-widget .btn {
+  padding: 6px;
+}
+.bootstrap-datetimepicker-widget:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+  top: -7px;
+  left: 6px;
+}
+.bootstrap-datetimepicker-widget:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid white;
+  position: absolute;
+  top: -6px;
+  left: 7px;
+}
+.bootstrap-datetimepicker-widget.pull-right:before {
+  left: auto;
+  right: 6px;
+}
+.bootstrap-datetimepicker-widget.pull-right:after {
+  left: auto;
+  right: 7px;
+}
+.bootstrap-datetimepicker-widget > ul {
+  list-style-type: none;
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget .timepicker-hour,
+.bootstrap-datetimepicker-widget .timepicker-minute,
+.bootstrap-datetimepicker-widget .timepicker-second {
+  width: 100%;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+.bootstrap-datetimepicker-widget table[data-hour-format="12"] .separator {
+  width: 4px;
+  padding: 0;
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget .datepicker > div {
+  display: none;
+}
+.bootstrap-datetimepicker-widget .picker-switch {
+  text-align: center;
+}
+.bootstrap-datetimepicker-widget table {
+  width: 100%;
+  margin: 0;
+}
+.bootstrap-datetimepicker-widget td,
+.bootstrap-datetimepicker-widget th {
+  text-align: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+.bootstrap-datetimepicker-widget td.day:hover,
+.bootstrap-datetimepicker-widget td.hour:hover,
+.bootstrap-datetimepicker-widget td.minute:hover,
+.bootstrap-datetimepicker-widget td.second:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.bootstrap-datetimepicker-widget td.old,
+.bootstrap-datetimepicker-widget td.new {
+  color: #999999;
+}
+.bootstrap-datetimepicker-widget td.active,
+.bootstrap-datetimepicker-widget td.active:hover {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.bootstrap-datetimepicker-widget td.disabled,
+.bootstrap-datetimepicker-widget td.disabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget td span {
+  display: block;
+  width: 47px;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 2px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.bootstrap-datetimepicker-widget td span:hover {
+  background: #eeeeee;
+}
+.bootstrap-datetimepicker-widget td span.active {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.bootstrap-datetimepicker-widget td span.old {
+  color: #999999;
+}
+.bootstrap-datetimepicker-widget td span.disabled,
+.bootstrap-datetimepicker-widget td span.disabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget th.switch {
+  width: 145px;
+}
+.bootstrap-datetimepicker-widget th.next,
+.bootstrap-datetimepicker-widget th.prev {
+  font-size: 21px;
+}
+.bootstrap-datetimepicker-widget th.disabled,
+.bootstrap-datetimepicker-widget th.disabled:hover {
+  background: none;
+  color: #999999;
+  cursor: not-allowed;
+}
+.bootstrap-datetimepicker-widget thead tr:first-child th {
+  cursor: pointer;
+}
+.bootstrap-datetimepicker-widget thead tr:first-child th:hover {
+  background: #eeeeee;
+}
+.input-group.date .input-group-addon span {
+  display: block;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+}
+.bootstrap-datetimepicker-widget.left-oriented:before {
+  left: auto;
+  right: 6px;
+}
+.bootstrap-datetimepicker-widget.left-oriented:after {
+  left: auto;
+  right: 7px;
+}
+.bootstrap-datetimepicker-widget ul.list-unstyled li.in div.timepicker div.timepicker-picker table.table-condensed tbody > tr > td {
+  padding: 0px !important;
+}

diff --git a/src/web/css/bootstrap-fileinput.css b/src/web/css/bootstrap-fileinput.css
new file mode 100644
index 0000000..1929506
--- /dev/null
+++ b/src/web/css/bootstrap-fileinput.css
@@ -0,0 +1,93 @@
+
+.fileinput {
+  display: inline-block;
+  margin-bottom: 9px;
+}
+
+.fileinput .uneditable-input {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+  cursor: text;
+}
+
+.fileinput .thumbnail {
+  display: inline-block;
+  margin-bottom: 5px;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.fileinput .thumbnail > img {
+  max-height: 100%;
+}
+
+.fileinput .btn {
+  vertical-align: middle;
+}
+
+.fileinput-exists .fileinput-new,
+.fileinput-new .fileinput-exists {
+  display: none;
+}
+
+.fileinput-inline .fileinput-controls {
+  display: inline;
+}
+
+.fileinput .uneditable-input {
+  white-space: normal;
+}
+
+.fileinput-new .input-group .btn-file {
+  border-radius: 0 4px 4px 0;
+}
+
+.fileinput-new .input-group .btn-file.btn-xs,
+.fileinput-new .input-group .btn-file.btn-sm {
+  border-radius: 0 3px 3px 0;
+}
+
+.fileinput-new .input-group .btn-file.btn-lg {
+  border-radius: 0 6px 6px 0;
+}
+
+.form-group.has-warning .fileinput .uneditable-input {
+  color: #c09853;
+  border-color: #faebcc;
+}
+
+.form-group.has-warning .fileinput .fileinput-preview {
+  color: #c09853;
+}
+
+.form-group.has-warning .fileinput .thumbnail {
+  border-color: #faebcc;
+}
+
+.form-group.has-error .fileinput .uneditable-input {
+  color: #b94a48;
+  border-color: #ebccd1;
+}
+
+.form-group.has-error .fileinput .fileinput-preview {
+  color: #b94a48;
+}
+
+.form-group.has-error .fileinput .thumbnail {
+  border-color: #ebccd1;
+}
+
+.form-group.has-success .fileinput .uneditable-input {
+  color: #468847;
+  border-color: #d6e9c6;
+}
+
+.form-group.has-success .fileinput .fileinput-preview {
+  color: #468847;
+}
+
+.form-group.has-success .fileinput .thumbnail {
+  border-color: #d6e9c6;
+}

diff --git a/src/web/fonts/glyphicons-halflings-regular.eot b/src/web/fonts/glyphicons-halflings-regular.eot
new file mode 100644
index 0000000..423bd5d
Binary files /dev/null and b/src/web/fonts/glyphicons-halflings-regular.eot differ

diff --git a/src/web/fonts/glyphicons-halflings-regular.svg b/src/web/fonts/glyphicons-halflings-regular.svg
new file mode 100644
index 0000000..4469488
--- /dev/null
+++ b/src/web/fonts/glyphicons-halflings-regular.svg
@@ -0,0 +1,229 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata></metadata>
+<defs>
+<font id="glyphicons_halflingsregular" horiz-adv-x="1200" >
+<font-face units-per-em="1200" ascent="960" descent="-240" />
+<missing-glyph horiz-adv-x="500" />
+<glyph />
+<glyph />
+<glyph unicode="&#xd;" />
+<glyph unicode=" " />
+<glyph unicode="*" d="M100 500v200h259l-183 183l141 141l183 -183v259h200v-259l183 183l141 -141l-183 -183h259v-200h-259l183 -183l-141 -141l-183 183v-259h-200v259l-183 -183l-141 141l183 183h-259z" />
+<glyph unicode="+" d="M0 400v300h400v400h300v-400h400v-300h-400v-400h-300v400h-400z" />
+<glyph unicode="&#xa0;" />
+<glyph unicode="&#x2000;" horiz-adv-x="652" />
+<glyph unicode="&#x2001;" horiz-adv-x="1304" />
+<glyph unicode="&#x2002;" horiz-adv-x="652" />
+<glyph unicode="&#x2003;" horiz-adv-x="1304" />
+<glyph unicode="&#x2004;" horiz-adv-x="434" />
+<glyph unicode="&#x2005;" horiz-adv-x="326" />
+<glyph unicode="&#x2006;" horiz-adv-x="217" />
+<glyph unicode="&#x2007;" horiz-adv-x="217" />
+<glyph unicode="&#x2008;" horiz-adv-x="163" />
+<glyph unicode="&#x2009;" horiz-adv-x="260" />
+<glyph unicode="&#x200a;" horiz-adv-x="72" />
+<glyph unicode="&#x202f;" horiz-adv-x="260" />
+<glyph unicode="&#x205f;" horiz-adv-x="326" />
+<glyph unicode="&#x20ac;" d="M100 500l100 100h113q0 47 5 100h-218l100 100h135q37 167 112 257q117 141 297 141q242 0 354 -189q60 -103 66 -209h-181q0 55 -25.5 99t-63.5 68t-75 36.5t-67 12.5q-24 0 -52.5 -10t-62.5 -32t-65.5 -67t-50.5 -107h379l-100 -100h-300q-6 -46 -6 -100h406l-100 -100 h-300q9 -74 33 -132t52.5 -91t62 -54.5t59 -29t46.5 -7.5q29 0 66 13t75 37t63.5 67.5t25.5 96.5h174q-31 -172 -128 -278q-107 -117 -274 -117q-205 0 -324 158q-36 46 -69 131.5t-45 205.5h-217z" />
+<glyph unicode="&#x2212;" d="M200 400h900v300h-900v-300z" />
+<glyph unicode="&#x2601;" d="M-14 494q0 -80 56.5 -137t135.5 -57h750q120 0 205 86t85 208q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5z" />
+<glyph unicode="&#x2709;" d="M0 100l400 400l200 -200l200 200l400 -400h-1200zM0 300v600l300 -300zM0 1100l600 -603l600 603h-1200zM900 600l300 300v-600z" />
+<glyph unicode="&#x270f;" d="M-13 -13l333 112l-223 223zM187 403l214 -214l614 614l-214 214zM887 1103l214 -214l99 92q13 13 13 32.5t-13 33.5l-153 153q-15 13 -33 13t-33 -13z" />
+<glyph unicode="&#xe000;" horiz-adv-x="500" d="M0 0z" />
+<glyph unicode="&#xe001;" d="M0 1200h1200l-500 -550v-550h300v-100h-800v100h300v550z" />
+<glyph unicode="&#xe002;" d="M14 84q18 -55 86 -75.5t147 5.5q65 21 109 69t44 90v606l600 155v-521q-64 16 -138 -7q-79 -26 -122.5 -83t-25.5 -111q17 -55 85.5 -75.5t147.5 4.5q70 23 111.5 63.5t41.5 95.5v881q0 10 -7 15.5t-17 2.5l-752 -193q-10 -3 -17 -12.5t-7 -19.5v-689q-64 17 -138 -7 q-79 -25 -122.5 -82t-25.5 -112z" />
+<glyph unicode="&#xe003;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233z" />
+<glyph unicode="&#xe005;" d="M100 784q0 64 28 123t73 100.5t104.5 64t119 20.5t120 -38.5t104.5 -104.5q48 69 109.5 105t121.5 38t118.5 -20.5t102.5 -64t71 -100.5t27 -123q0 -57 -33.5 -117.5t-94 -124.5t-126.5 -127.5t-150 -152.5t-146 -174q-62 85 -145.5 174t-149.5 152.5t-126.5 127.5 t-94 124.5t-33.5 117.5z" />
+<glyph unicode="&#xe006;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1z" />
+<glyph unicode="&#xe007;" d="M-72 800h479l146 400h2l146 -400h472l-382 -278l145 -449l-384 275l-382 -275l146 447zM168 71l2 1zM237 700l196 -142l-73 -226l192 140l195 -141l-74 229l193 140h-235l-77 211l-78 -211h-239z" />
+<glyph unicode="&#xe008;" d="M0 0v143l400 257v100q-37 0 -68.5 74.5t-31.5 125.5v200q0 124 88 212t212 88t212 -88t88 -212v-200q0 -51 -31.5 -125.5t-68.5 -74.5v-100l400 -257v-143h-1200z" />
+<glyph unicode="&#xe009;" d="M0 0v1100h1200v-1100h-1200zM100 100h100v100h-100v-100zM100 300h100v100h-100v-100zM100 500h100v100h-100v-100zM100 700h100v100h-100v-100zM100 900h100v100h-100v-100zM300 100h600v400h-600v-400zM300 600h600v400h-600v-400zM1000 100h100v100h-100v-100z M1000 300h100v100h-100v-100zM1000 500h100v100h-100v-100zM1000 700h100v100h-100v-100zM1000 900h100v100h-100v-100z" />
+<glyph unicode="&#xe010;" d="M0 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM0 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400 q-21 0 -35.5 14.5t-14.5 35.5zM600 50v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5zM600 650v400q0 21 14.5 35.5t35.5 14.5h400q21 0 35.5 -14.5t14.5 -35.5v-400 q0 -21 -14.5 -35.5t-35.5 -14.5h-400q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe011;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200 q-21 0 -35.5 14.5t-14.5 35.5zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 450v200q0 21 14.5 35.5t35.5 14.5h200 q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM800 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe012;" d="M0 50v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM0 450q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v200q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5 t-14.5 -35.5v-200zM0 850v200q0 21 14.5 35.5t35.5 14.5h200q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5zM400 50v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5 t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 450v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5zM400 850v200q0 21 14.5 35.5t35.5 14.5h700q21 0 35.5 -14.5t14.5 -35.5 v-200q0 -21 -14.5 -35.5t-35.5 -14.5h-700q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe013;" d="M29 454l419 -420l818 820l-212 212l-607 -607l-206 207z" />
+<glyph unicode="&#xe014;" d="M106 318l282 282l-282 282l212 212l282 -282l282 282l212 -212l-282 -282l282 -282l-212 -212l-282 282l-282 -282z" />
+<glyph unicode="&#xe015;" d="M23 693q0 200 142 342t342 142t342 -142t142 -342q0 -142 -78 -261l300 -300q7 -8 7 -18t-7 -18l-109 -109q-8 -7 -18 -7t-18 7l-300 300q-119 -78 -261 -78q-200 0 -342 142t-142 342zM176 693q0 -136 97 -233t234 -97t233.5 96.5t96.5 233.5t-96.5 233.5t-233.5 96.5 t-234 -97t-97 -233zM300 600v200h100v100h200v-100h100v-200h-100v-100h-200v100h-100z" />
+<glyph unicode="&#xe016;" d="M23 694q0 200 142 342t342 142t342 -142t142 -342q0 -141 -78 -262l300 -299q7 -7 7 -18t-7 -18l-109 -109q-8 -8 -18 -8t-18 8l-300 299q-120 -77 -261 -77q-200 0 -342 142t-142 342zM176 694q0 -136 97 -233t234 -97t233.5 97t96.5 233t-96.5 233t-233.5 97t-234 -97 t-97 -233zM300 601h400v200h-400v-200z" />
+<glyph unicode="&#xe017;" d="M23 600q0 183 105 331t272 210v-166q-103 -55 -165 -155t-62 -220q0 -177 125 -302t302 -125t302 125t125 302q0 120 -62 220t-165 155v166q167 -62 272 -210t105 -331q0 -118 -45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5 zM500 750q0 -21 14.5 -35.5t35.5 -14.5h100q21 0 35.5 14.5t14.5 35.5v400q0 21 -14.5 35.5t-35.5 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-400z" />
+<glyph unicode="&#xe018;" d="M100 1h200v300h-200v-300zM400 1v500h200v-500h-200zM700 1v800h200v-800h-200zM1000 1v1200h200v-1200h-200z" />
+<glyph unicode="&#xe019;" d="M26 601q0 -33 6 -74l151 -38l2 -6q14 -49 38 -93l3 -5l-80 -134q45 -59 105 -105l133 81l5 -3q45 -26 94 -39l5 -2l38 -151q40 -5 74 -5q27 0 74 5l38 151l6 2q46 13 93 39l5 3l134 -81q56 44 104 105l-80 134l3 5q24 44 39 93l1 6l152 38q5 40 5 74q0 28 -5 73l-152 38 l-1 6q-16 51 -39 93l-3 5l80 134q-44 58 -104 105l-134 -81l-5 3q-45 25 -93 39l-6 1l-38 152q-40 5 -74 5q-27 0 -74 -5l-38 -152l-5 -1q-50 -14 -94 -39l-5 -3l-133 81q-59 -47 -105 -105l80 -134l-3 -5q-25 -47 -38 -93l-2 -6l-151 -38q-6 -48 -6 -73zM385 601 q0 88 63 151t152 63t152 -63t63 -151q0 -89 -63 -152t-152 -63t-152 63t-63 152z" />
+<glyph unicode="&#xe020;" d="M100 1025v50q0 10 7.5 17.5t17.5 7.5h275v100q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5v-100h275q10 0 17.5 -7.5t7.5 -17.5v-50q0 -11 -7 -18t-18 -7h-1050q-11 0 -18 7t-7 18zM200 100v800h900v-800q0 -41 -29.5 -71t-70.5 -30h-700q-41 0 -70.5 30 t-29.5 71zM300 100h100v700h-100v-700zM500 100h100v700h-100v-700zM500 1100h300v100h-300v-100zM700 100h100v700h-100v-700zM900 100h100v700h-100v-700z" />
+<glyph unicode="&#xe021;" d="M1 601l656 644l644 -644h-200v-600h-300v400h-300v-400h-300v600h-200z" />
+<glyph unicode="&#xe022;" d="M100 25v1150q0 11 7 18t18 7h475v-500h400v-675q0 -11 -7 -18t-18 -7h-850q-11 0 -18 7t-7 18zM700 800v300l300 -300h-300z" />
+<glyph unicode="&#xe023;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 500v400h100 v-300h200v-100h-300z" />
+<glyph unicode="&#xe024;" d="M-100 0l431 1200h209l-21 -300h162l-20 300h208l431 -1200h-538l-41 400h-242l-40 -400h-539zM488 500h224l-27 300h-170z" />
+<glyph unicode="&#xe025;" d="M0 0v400h490l-290 300h200v500h300v-500h200l-290 -300h490v-400h-1100zM813 200h175v100h-175v-100z" />
+<glyph unicode="&#xe026;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM188 600q0 -170 121 -291t291 -121t291 121t121 291t-121 291t-291 121 t-291 -121t-121 -291zM350 600h150v300h200v-300h150l-250 -300z" />
+<glyph unicode="&#xe027;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM350 600l250 300 l250 -300h-150v-300h-200v300h-150z" />
+<glyph unicode="&#xe028;" d="M0 25v475l200 700h800q199 -700 200 -700v-475q0 -11 -7 -18t-18 -7h-1150q-11 0 -18 7t-7 18zM200 500h200l50 -200h300l50 200h200l-97 500h-606z" />
+<glyph unicode="&#xe029;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM500 397v401 l297 -200z" />
+<glyph unicode="&#xe030;" d="M23 600q0 -118 45.5 -224.5t123 -184t184 -123t224.5 -45.5t224.5 45.5t184 123t123 184t45.5 224.5h-150q0 -177 -125 -302t-302 -125t-302 125t-125 302t125 302t302 125q136 0 246 -81l-146 -146h400v400l-145 -145q-157 122 -355 122q-118 0 -224.5 -45.5t-184 -123 t-123 -184t-45.5 -224.5z" />
+<glyph unicode="&#xe031;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5q198 0 355 -122l145 145v-400h-400l147 147q-112 80 -247 80q-177 0 -302 -125t-125 -302h-150zM100 0v400h400l-147 -147q112 -80 247 -80q177 0 302 125t125 302h150q0 -118 -45.5 -224.5t-123 -184t-184 -123 t-224.5 -45.5q-198 0 -355 122z" />
+<glyph unicode="&#xe032;" d="M100 0h1100v1200h-1100v-1200zM200 100v900h900v-900h-900zM300 200v100h100v-100h-100zM300 400v100h100v-100h-100zM300 600v100h100v-100h-100zM300 800v100h100v-100h-100zM500 200h500v100h-500v-100zM500 400v100h500v-100h-500zM500 600v100h500v-100h-500z M500 800v100h500v-100h-500z" />
+<glyph unicode="&#xe033;" d="M0 100v600q0 41 29.5 70.5t70.5 29.5h100v200q0 82 59 141t141 59h300q82 0 141 -59t59 -141v-200h100q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-900q-41 0 -70.5 29.5t-29.5 70.5zM400 800h300v150q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-150z" />
+<glyph unicode="&#xe034;" d="M100 0v1100h100v-1100h-100zM300 400q60 60 127.5 84t127.5 17.5t122 -23t119 -30t110 -11t103 42t91 120.5v500q-40 -81 -101.5 -115.5t-127.5 -29.5t-138 25t-139.5 40t-125.5 25t-103 -29.5t-65 -115.5v-500z" />
+<glyph unicode="&#xe035;" d="M0 275q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 127 70.5 231.5t184.5 161.5t245 57t245 -57t184.5 -161.5t70.5 -231.5v-300q0 -11 7 -18t18 -7h50q11 0 18 7t7 18v300q0 116 -49.5 227t-131 192.5t-192.5 131t-227 49.5t-227 -49.5t-192.5 -131t-131 -192.5 t-49.5 -227v-300zM200 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14zM800 20v460q0 8 6 14t14 6h160q8 0 14 -6t6 -14v-460q0 -8 -6 -14t-14 -6h-160q-8 0 -14 6t-6 14z" />
+<glyph unicode="&#xe036;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM688 459l141 141l-141 141l71 71l141 -141l141 141l71 -71l-141 -141l141 -141l-71 -71l-141 141l-141 -141z" />
+<glyph unicode="&#xe037;" d="M0 400h300l300 -200v800l-300 -200h-300v-400zM700 857l69 53q111 -135 111 -310q0 -169 -106 -302l-67 54q86 110 86 248q0 146 -93 257z" />
+<glyph unicode="&#xe038;" d="M0 401v400h300l300 200v-800l-300 200h-300zM702 858l69 53q111 -135 111 -310q0 -170 -106 -303l-67 55q86 110 86 248q0 145 -93 257zM889 951l7 -8q123 -151 123 -344q0 -189 -119 -339l-7 -8l81 -66l6 8q142 178 142 405q0 230 -144 408l-6 8z" />
+<glyph unicode="&#xe039;" d="M0 0h500v500h-200v100h-100v-100h-200v-500zM0 600h100v100h400v100h100v100h-100v300h-500v-600zM100 100v300h300v-300h-300zM100 800v300h300v-300h-300zM200 200v100h100v-100h-100zM200 900h100v100h-100v-100zM500 500v100h300v-300h200v-100h-100v-100h-200v100 h-100v100h100v200h-200zM600 0v100h100v-100h-100zM600 1000h100v-300h200v-300h300v200h-200v100h200v500h-600v-200zM800 800v300h300v-300h-300zM900 0v100h300v-100h-300zM900 900v100h100v-100h-100zM1100 200v100h100v-100h-100z" />
+<glyph unicode="&#xe040;" d="M0 200h100v1000h-100v-1000zM100 0v100h300v-100h-300zM200 200v1000h100v-1000h-100zM500 0v91h100v-91h-100zM500 200v1000h200v-1000h-200zM700 0v91h100v-91h-100zM800 200v1000h100v-1000h-100zM900 0v91h200v-91h-200zM1000 200v1000h200v-1000h-200z" />
+<glyph unicode="&#xe041;" d="M1 700v475q0 10 7.5 17.5t17.5 7.5h474l700 -700l-500 -500zM148 953q0 -42 29 -71q30 -30 71.5 -30t71.5 30q29 29 29 71t-29 71q-30 30 -71.5 30t-71.5 -30q-29 -29 -29 -71z" />
+<glyph unicode="&#xe042;" d="M2 700v475q0 11 7 18t18 7h474l700 -700l-500 -500zM148 953q0 -42 30 -71q29 -30 71 -30t71 30q30 29 30 71t-30 71q-29 30 -71 30t-71 -30q-30 -29 -30 -71zM701 1200h100l700 -700l-500 -500l-50 50l450 450z" />
+<glyph unicode="&#xe043;" d="M100 0v1025l175 175h925v-1000l-100 -100v1000h-750l-100 -100h750v-1000h-900z" />
+<glyph unicode="&#xe044;" d="M200 0l450 444l450 -443v1150q0 20 -14.5 35t-35.5 15h-800q-21 0 -35.5 -15t-14.5 -35v-1151z" />
+<glyph unicode="&#xe045;" d="M0 100v700h200l100 -200h600l100 200h200v-700h-200v200h-800v-200h-200zM253 829l40 -124h592l62 124l-94 346q-2 11 -10 18t-18 7h-450q-10 0 -18 -7t-10 -18zM281 24l38 152q2 10 11.5 17t19.5 7h500q10 0 19.5 -7t11.5 -17l38 -152q2 -10 -3.5 -17t-15.5 -7h-600 q-10 0 -15.5 7t-3.5 17z" />
+<glyph unicode="&#xe046;" d="M0 200q0 -41 29.5 -70.5t70.5 -29.5h1000q41 0 70.5 29.5t29.5 70.5v600q0 41 -29.5 70.5t-70.5 29.5h-150q-4 8 -11.5 21.5t-33 48t-53 61t-69 48t-83.5 21.5h-200q-41 0 -82 -20.5t-70 -50t-52 -59t-34 -50.5l-12 -20h-150q-41 0 -70.5 -29.5t-29.5 -70.5v-600z M356 500q0 100 72 172t172 72t172 -72t72 -172t-72 -172t-172 -72t-172 72t-72 172zM494 500q0 -44 31 -75t75 -31t75 31t31 75t-31 75t-75 31t-75 -31t-31 -75zM900 700v100h100v-100h-100z" />
+<glyph unicode="&#xe047;" d="M53 0h365v66q-41 0 -72 11t-49 38t1 71l92 234h391l82 -222q16 -45 -5.5 -88.5t-74.5 -43.5v-66h417v66q-34 1 -74 43q-18 19 -33 42t-21 37l-6 13l-385 998h-93l-399 -1006q-24 -48 -52 -75q-12 -12 -33 -25t-36 -20l-15 -7v-66zM416 521l178 457l46 -140l116 -317h-340 z" />
+<glyph unicode="&#xe048;" d="M100 0v89q41 7 70.5 32.5t29.5 65.5v827q0 28 -1 39.5t-5.5 26t-15.5 21t-29 14t-49 14.5v70h471q120 0 213 -88t93 -228q0 -55 -11.5 -101.5t-28 -74t-33.5 -47.5t-28 -28l-12 -7q8 -3 21.5 -9t48 -31.5t60.5 -58t47.5 -91.5t21.5 -129q0 -84 -59 -156.5t-142 -111 t-162 -38.5h-500zM400 200h161q89 0 153 48.5t64 132.5q0 90 -62.5 154.5t-156.5 64.5h-159v-400zM400 700h139q76 0 130 61.5t54 138.5q0 82 -84 130.5t-239 48.5v-379z" />
+<glyph unicode="&#xe049;" d="M200 0v57q77 7 134.5 40.5t65.5 80.5l173 849q10 56 -10 74t-91 37q-6 1 -10.5 2.5t-9.5 2.5v57h425l2 -57q-33 -8 -62 -25.5t-46 -37t-29.5 -38t-17.5 -30.5l-5 -12l-128 -825q-10 -52 14 -82t95 -36v-57h-500z" />
+<glyph unicode="&#xe050;" d="M-75 200h75v800h-75l125 167l125 -167h-75v-800h75l-125 -167zM300 900v300h150h700h150v-300h-50q0 29 -8 48.5t-18.5 30t-33.5 15t-39.5 5.5t-50.5 1h-200v-850l100 -50v-100h-400v100l100 50v850h-200q-34 0 -50.5 -1t-40 -5.5t-33.5 -15t-18.5 -30t-8.5 -48.5h-49z " />
+<glyph unicode="&#xe051;" d="M33 51l167 125v-75h800v75l167 -125l-167 -125v75h-800v-75zM100 901v300h150h700h150v-300h-50q0 29 -8 48.5t-18 30t-33.5 15t-40 5.5t-50.5 1h-200v-650l100 -50v-100h-400v100l100 50v650h-200q-34 0 -50.5 -1t-39.5 -5.5t-33.5 -15t-18.5 -30t-8 -48.5h-50z" />
+<glyph unicode="&#xe052;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 350q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM0 650q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1000q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 950q0 -20 14.5 -35t35.5 -15h600q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-600q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
+<glyph unicode="&#xe053;" d="M0 50q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM0 650q0 -20 14.5 -35t35.5 -15h1100q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5 v-100zM200 350q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM200 950q0 -20 14.5 -35t35.5 -15h700q21 0 35.5 15t14.5 35v100q0 21 -14.5 35.5t-35.5 14.5h-700q-21 0 -35.5 -14.5 t-14.5 -35.5v-100z" />
+<glyph unicode="&#xe054;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM100 650v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1000q-21 0 -35.5 15 t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM500 950v100q0 21 14.5 35.5t35.5 14.5h600q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-600 q-21 0 -35.5 15t-14.5 35z" />
+<glyph unicode="&#xe055;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h1100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-1100 q-21 0 -35.5 15t-14.5 35z" />
+<glyph unicode="&#xe056;" d="M0 50v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 350v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM0 650v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15t-14.5 35zM0 950v100q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-100q-21 0 -35.5 15 t-14.5 35zM300 50v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 350v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800 q-21 0 -35.5 15t-14.5 35zM300 650v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15h-800q-21 0 -35.5 15t-14.5 35zM300 950v100q0 21 14.5 35.5t35.5 14.5h800q21 0 35.5 -14.5t14.5 -35.5v-100q0 -20 -14.5 -35t-35.5 -15 h-800q-21 0 -35.5 15t-14.5 35z" />
+<glyph unicode="&#xe057;" d="M-101 500v100h201v75l166 -125l-166 -125v75h-201zM300 0h100v1100h-100v-1100zM500 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35 v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 650q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM500 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100 q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100z" />
+<glyph unicode="&#xe058;" d="M1 50q0 -20 14.5 -35t35.5 -15h600q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-600q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 350q0 -20 14.5 -35t35.5 -15h300q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-300q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 650 q0 -20 14.5 -35t35.5 -15h500q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-500q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM1 950q0 -20 14.5 -35t35.5 -15h100q20 0 35 15t15 35v100q0 21 -15 35.5t-35 14.5h-100q-21 0 -35.5 -14.5t-14.5 -35.5v-100zM801 0v1100h100v-1100 h-100zM934 550l167 -125v75h200v100h-200v75z" />
+<glyph unicode="&#xe059;" d="M0 275v650q0 31 22 53t53 22h750q31 0 53 -22t22 -53v-650q0 -31 -22 -53t-53 -22h-750q-31 0 -53 22t-22 53zM900 600l300 300v-600z" />
+<glyph unicode="&#xe060;" d="M0 44v1012q0 18 13 31t31 13h1112q19 0 31.5 -13t12.5 -31v-1012q0 -18 -12.5 -31t-31.5 -13h-1112q-18 0 -31 13t-13 31zM100 263l247 182l298 -131l-74 156l293 318l236 -288v500h-1000v-737zM208 750q0 56 39 95t95 39t95 -39t39 -95t-39 -95t-95 -39t-95 39t-39 95z " />
+<glyph unicode="&#xe062;" d="M148 745q0 124 60.5 231.5t165 172t226.5 64.5q123 0 227 -63t164.5 -169.5t60.5 -229.5t-73 -272q-73 -114 -166.5 -237t-150.5 -189l-57 -66q-10 9 -27 26t-66.5 70.5t-96 109t-104 135.5t-100.5 155q-63 139 -63 262zM342 772q0 -107 75.5 -182.5t181.5 -75.5 q107 0 182.5 75.5t75.5 182.5t-75.5 182t-182.5 75t-182 -75.5t-75 -181.5z" />
+<glyph unicode="&#xe063;" d="M1 600q0 122 47.5 233t127.5 191t191 127.5t233 47.5t233 -47.5t191 -127.5t127.5 -191t47.5 -233t-47.5 -233t-127.5 -191t-191 -127.5t-233 -47.5t-233 47.5t-191 127.5t-127.5 191t-47.5 233zM173 600q0 -177 125.5 -302t301.5 -125v854q-176 0 -301.5 -125 t-125.5 -302z" />
+<glyph unicode="&#xe064;" d="M117 406q0 94 34 186t88.5 172.5t112 159t115 177t87.5 194.5q21 -71 57.5 -142.5t76 -130.5t83 -118.5t82 -117t70 -116t50 -125.5t18.5 -136q0 -89 -39 -165.5t-102 -126.5t-140 -79.5t-156 -33.5q-114 6 -211.5 53t-161.5 138.5t-64 210.5zM243 414q14 -82 59.5 -136 t136.5 -80l16 98q-7 6 -18 17t-34 48t-33 77q-15 73 -14 143.5t10 122.5l9 51q-92 -110 -119.5 -185t-12.5 -156z" />
+<glyph unicode="&#xe065;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5q366 -6 397 -14l-186 -186h-311q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v125l200 200v-225q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM436 341l161 50l412 412l-114 113l-405 -405zM995 1015l113 -113l113 113l-21 85l-92 28z" />
+<glyph unicode="&#xe066;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h261l2 -80q-133 -32 -218 -120h-145q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5l200 153v-53q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5 zM423 524q30 38 81.5 64t103 35.5t99 14t77.5 3.5l29 -1v-209l360 324l-359 318v-216q-7 0 -19 -1t-48 -8t-69.5 -18.5t-76.5 -37t-76.5 -59t-62 -88t-39.5 -121.5z" />
+<glyph unicode="&#xe067;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q60 0 127 -23l-178 -177h-349q-41 0 -70.5 -29.5t-29.5 -70.5v-500q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v69l200 200v-169q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5 t-117.5 282.5zM342 632l283 -284l566 567l-136 137l-430 -431l-147 147z" />
+<glyph unicode="&#xe068;" d="M0 603l300 296v-198h200v200h-200l300 300l295 -300h-195v-200h200v198l300 -296l-300 -300v198h-200v-200h195l-295 -300l-300 300h200v200h-200v-198z" />
+<glyph unicode="&#xe069;" d="M200 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-1100l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe070;" d="M0 50v1000q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-437l500 487v-487l500 487v-1100l-500 488v-488l-500 488v-438q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5z" />
+<glyph unicode="&#xe071;" d="M136 550l564 550v-487l500 487v-1100l-500 488v-488z" />
+<glyph unicode="&#xe072;" d="M200 0l900 550l-900 550v-1100z" />
+<glyph unicode="&#xe073;" d="M200 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200q-21 0 -35.5 -14.5t-14.5 -35.5v-800zM600 150q0 -21 14.5 -35.5t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v800q0 21 -14.5 35.5t-35.5 14.5h-200 q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
+<glyph unicode="&#xe074;" d="M200 150q0 -20 14.5 -35t35.5 -15h800q21 0 35.5 15t14.5 35v800q0 21 -14.5 35.5t-35.5 14.5h-800q-21 0 -35.5 -14.5t-14.5 -35.5v-800z" />
+<glyph unicode="&#xe075;" d="M0 0v1100l500 -487v487l564 -550l-564 -550v488z" />
+<glyph unicode="&#xe076;" d="M0 0v1100l500 -487v487l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438l-500 -488v488z" />
+<glyph unicode="&#xe077;" d="M300 0v1100l500 -487v437q0 21 14.5 35.5t35.5 14.5h100q21 0 35.5 -14.5t14.5 -35.5v-1000q0 -21 -14.5 -35.5t-35.5 -14.5h-100q-21 0 -35.5 14.5t-14.5 35.5v438z" />
+<glyph unicode="&#xe078;" d="M100 250v100q0 21 14.5 35.5t35.5 14.5h1000q21 0 35.5 -14.5t14.5 -35.5v-100q0 -21 -14.5 -35.5t-35.5 -14.5h-1000q-21 0 -35.5 14.5t-14.5 35.5zM100 500h1100l-550 564z" />
+<glyph unicode="&#xe079;" d="M185 599l592 -592l240 240l-353 353l353 353l-240 240z" />
+<glyph unicode="&#xe080;" d="M272 194l353 353l-353 353l241 240l572 -571l21 -22l-1 -1v-1l-592 -591z" />
+<glyph unicode="&#xe081;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -300t-217.5 -218t-299.5 -80t-299.5 80t-217.5 218t-80 300zM300 500h200v-200h200v200h200v200h-200v200h-200v-200h-200v-200z" />
+<glyph unicode="&#xe082;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -300t-217.5 -218t-299.5 -80t-299.5 80t-217.5 218t-80 300zM300 500h600v200h-600v-200z" />
+<glyph unicode="&#xe083;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -300t-217.5 -218t-299.5 -80t-299.5 80t-217.5 218t-80 300zM246 459l213 -213l141 142l141 -142l213 213l-142 141l142 141l-213 212l-141 -141l-141 142l-212 -213l141 -141z" />
+<glyph unicode="&#xe084;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -299.5t-217.5 -217.5t-299.5 -80t-299.5 80t-217.5 217.5t-80 299.5zM270 551l276 -277l411 411l-175 174l-236 -236l-102 102z" />
+<glyph unicode="&#xe085;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -300t-217.5 -218t-299.5 -80t-299.5 80t-217.5 218t-80 300zM363 700h144q4 0 11.5 -1t11 -1t6.5 3t3 9t1 11t3.5 8.5t3.5 6t5.5 4t6.5 2.5t9 1.5t9 0.5h11.5h12.5q19 0 30 -10t11 -26 q0 -22 -4 -28t-27 -22q-5 -1 -12.5 -3t-27 -13.5t-34 -27t-26.5 -46t-11 -68.5h200q5 3 14 8t31.5 25.5t39.5 45.5t31 69t14 94q0 51 -17.5 89t-42 58t-58.5 32t-58.5 15t-51.5 3q-105 0 -172 -56t-67 -183zM500 300h200v100h-200v-100z" />
+<glyph unicode="&#xe086;" d="M3 600q0 162 80 299.5t217.5 217.5t299.5 80t299.5 -80t217.5 -217.5t80 -299.5t-80 -300t-217.5 -218t-299.5 -80t-299.5 80t-217.5 218t-80 300zM400 300h400v100h-100v300h-300v-100h100v-200h-100v-100zM500 800h200v100h-200v-100z" />
+<glyph unicode="&#xe087;" d="M0 500v200h194q15 60 36 104.5t55.5 86t88 69t126.5 40.5v200h200v-200q54 -20 113 -60t112.5 -105.5t71.5 -134.5h203v-200h-203q-25 -102 -116.5 -186t-180.5 -117v-197h-200v197q-140 27 -208 102.5t-98 200.5h-194zM290 500q24 -73 79.5 -127.5t130.5 -78.5v206h200 v-206q149 48 201 206h-201v200h200q-25 74 -76 127.5t-124 76.5v-204h-200v203q-75 -24 -130 -77.5t-79 -125.5h209v-200h-210z" />
+<glyph unicode="&#xe088;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM356 465l135 135 l-135 135l109 109l135 -135l135 135l109 -109l-135 -135l135 -135l-109 -109l-135 135l-135 -135z" />
+<glyph unicode="&#xe089;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM322 537l141 141 l87 -87l204 205l142 -142l-346 -345z" />
+<glyph unicode="&#xe090;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -115 62 -215l568 567q-100 62 -216 62q-171 0 -292.5 -121.5t-121.5 -292.5zM391 245q97 -59 209 -59q171 0 292.5 121.5t121.5 292.5 q0 112 -59 209z" />
+<glyph unicode="&#xe091;" d="M0 547l600 453v-300h600v-300h-600v-301z" />
+<glyph unicode="&#xe092;" d="M0 400v300h600v300l600 -453l-600 -448v301h-600z" />
+<glyph unicode="&#xe093;" d="M204 600l450 600l444 -600h-298v-600h-300v600h-296z" />
+<glyph unicode="&#xe094;" d="M104 600h296v600h300v-600h298l-449 -600z" />
+<glyph unicode="&#xe095;" d="M0 200q6 132 41 238.5t103.5 193t184 138t271.5 59.5v271l600 -453l-600 -448v301q-95 -2 -183 -20t-170 -52t-147 -92.5t-100 -135.5z" />
+<glyph unicode="&#xe096;" d="M0 0v400l129 -129l294 294l142 -142l-294 -294l129 -129h-400zM635 777l142 -142l294 294l129 -129v400h-400l129 -129z" />
+<glyph unicode="&#xe097;" d="M34 176l295 295l-129 129h400v-400l-129 130l-295 -295zM600 600v400l129 -129l295 295l142 -141l-295 -295l129 -130h-400z" />
+<glyph unicode="&#xe101;" d="M23 600q0 118 45.5 224.5t123 184t184 123t224.5 45.5t224.5 -45.5t184 -123t123 -184t45.5 -224.5t-45.5 -224.5t-123 -184t-184 -123t-224.5 -45.5t-224.5 45.5t-184 123t-123 184t-45.5 224.5zM456 851l58 -302q4 -20 21.5 -34.5t37.5 -14.5h54q20 0 37.5 14.5 t21.5 34.5l58 302q4 20 -8 34.5t-33 14.5h-207q-20 0 -32 -14.5t-8 -34.5zM500 300h200v100h-200v-100z" />
+<glyph unicode="&#xe102;" d="M0 800h100v-200h400v300h200v-300h400v200h100v100h-111v6t-1 15t-3 18l-34 172q-11 39 -41.5 63t-69.5 24q-32 0 -61 -17l-239 -144q-22 -13 -40 -35q-19 24 -40 36l-238 144q-33 18 -62 18q-39 0 -69.5 -23t-40.5 -61l-35 -177q-2 -8 -3 -18t-1 -15v-6h-111v-100z M100 0h400v400h-400v-400zM200 900q-3 0 14 48t35 96l18 47l214 -191h-281zM700 0v400h400v-400h-400zM731 900l202 197q5 -12 12 -32.5t23 -64t25 -72t7 -28.5h-269z" />
+<glyph unicode="&#xe103;" d="M0 -22v143l216 193q-9 53 -13 83t-5.5 94t9 113t38.5 114t74 124q47 60 99.5 102.5t103 68t127.5 48t145.5 37.5t184.5 43.5t220 58.5q0 -189 -22 -343t-59 -258t-89 -181.5t-108.5 -120t-122 -68t-125.5 -30t-121.5 -1.5t-107.5 12.5t-87.5 17t-56.5 7.5l-99 -55z M238.5 300.5q19.5 -6.5 86.5 76.5q55 66 367 234q70 38 118.5 69.5t102 79t99 111.5t86.5 148q22 50 24 60t-6 19q-7 5 -17 5t-26.5 -14.5t-33.5 -39.5q-35 -51 -113.5 -108.5t-139.5 -89.5l-61 -32q-369 -197 -458 -401q-48 -111 -28.5 -117.5z" />
+<glyph unicode="&#xe104;" d="M111 408q0 -33 5 -63q9 -56 44 -119.5t105 -108.5q31 -21 64 -16t62 23.5t57 49.5t48 61.5t35 60.5q32 66 39 184.5t-13 157.5q79 -80 122 -164t26 -184q-5 -33 -20.5 -69.5t-37.5 -80.5q-10 -19 -14.5 -29t-12 -26t-9 -23.5t-3 -19t2.5 -15.5t11 -9.5t19.5 -5t30.5 2.5 t42 8q57 20 91 34t87.5 44.5t87 64t65.5 88.5t47 122q38 172 -44.5 341.5t-246.5 278.5q22 -44 43 -129q39 -159 -32 -154q-15 2 -33 9q-79 33 -120.5 100t-44 175.5t48.5 257.5q-13 -8 -34 -23.5t-72.5 -66.5t-88.5 -105.5t-60 -138t-8 -166.5q2 -12 8 -41.5t8 -43t6 -39.5 t3.5 -39.5t-1 -33.5t-6 -31.5t-13.5 -24t-21 -20.5t-31 -12q-38 -10 -67 13t-40.5 61.5t-15 81.5t10.5 75q-52 -46 -83.5 -101t-39 -107t-7.5 -85z" />
+<glyph unicode="&#xe105;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5t145.5 -23.5t132.5 -59t116.5 -83.5t97 -90t74.5 -85.5t49 -63.5t20 -30l26 -40l-26 -40q-6 -10 -20 -30t-49 -63.5t-74.5 -85.5t-97 -90t-116.5 -83.5t-132.5 -59t-145.5 -23.5 t-145.5 23.5t-132.5 59t-116.5 83.5t-97 90t-74.5 85.5t-49 63.5t-20 30zM120 600q7 -10 40.5 -58t56 -78.5t68 -77.5t87.5 -75t103 -49.5t125 -21.5t123.5 20t100.5 45.5t85.5 71.5t66.5 75.5t58 81.5t47 66q-1 1 -28.5 37.5t-42 55t-43.5 53t-57.5 63.5t-58.5 54 q49 -74 49 -163q0 -124 -88 -212t-212 -88t-212 88t-88 212q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l105 105q-37 24 -75 72t-57 84l-20 36z" />
+<glyph unicode="&#xe106;" d="M-61 600l26 40q6 10 20 30t49 63.5t74.5 85.5t97 90t116.5 83.5t132.5 59t145.5 23.5q61 0 121 -17l37 142h148l-314 -1200h-148l37 143q-82 21 -165 71.5t-140 102t-109.5 112t-72 88.5t-29.5 43zM120 600q210 -282 393 -336l37 141q-107 18 -178.5 101.5t-71.5 193.5 q0 85 46 158q-102 -87 -226 -258zM377 656q49 -124 154 -191l47 47l23 87q-30 28 -59 69t-44 68l-14 26zM780 161l38 145q22 15 44.5 34t46 44t40.5 44t41 50.5t33.5 43.5t33 44t24.5 34q-97 127 -140 175l39 146q67 -54 131.5 -125.5t87.5 -103.5t36 -52l26 -40l-26 -40 q-7 -12 -25.5 -38t-63.5 -79.5t-95.5 -102.5t-124 -100t-146.5 -79z" />
+<glyph unicode="&#xe107;" d="M-97.5 34q13.5 -34 50.5 -34h1294q37 0 50.5 35.5t-7.5 67.5l-642 1056q-20 33 -48 36t-48 -29l-642 -1066q-21 -32 -7.5 -66zM155 200l445 723l445 -723h-345v100h-200v-100h-345zM500 600l100 -300l100 300v100h-200v-100z" />
+<glyph unicode="&#xe108;" d="M100 262v41q0 20 11 44.5t26 38.5l363 325v339q0 62 44 106t106 44t106 -44t44 -106v-339l363 -325q15 -14 26 -38.5t11 -44.5v-41q0 -20 -12 -26.5t-29 5.5l-359 249v-263q100 -91 100 -113v-64q0 -21 -13 -29t-32 1l-94 78h-222l-94 -78q-19 -9 -32 -1t-13 29v64 q0 22 100 113v263l-359 -249q-17 -12 -29 -5.5t-12 26.5z" />
+<glyph unicode="&#xe109;" d="M0 50q0 -20 14.5 -35t35.5 -15h1000q21 0 35.5 15t14.5 35v750h-1100v-750zM0 900h1100v150q0 21 -14.5 35.5t-35.5 14.5h-150v100h-100v-100h-500v100h-100v-100h-150q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 100v100h100v-100h-100zM100 300v100h100v-100h-100z M100 500v100h100v-100h-100zM300 100v100h100v-100h-100zM300 300v100h100v-100h-100zM300 500v100h100v-100h-100zM500 100v100h100v-100h-100zM500 300v100h100v-100h-100zM500 500v100h100v-100h-100zM700 100v100h100v-100h-100zM700 300v100h100v-100h-100zM700 500 v100h100v-100h-100zM900 100v100h100v-100h-100zM900 300v100h100v-100h-100zM900 500v100h100v-100h-100z" />
+<glyph unicode="&#xe110;" d="M0 200v200h259l600 600h241v198l300 -295l-300 -300v197h-159l-600 -600h-341zM0 800h259l122 -122l141 142l-181 180h-341v-200zM678 381l141 142l122 -123h159v198l300 -295l-300 -300v197h-241z" />
+<glyph unicode="&#xe111;" d="M0 400v600q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-600q0 -41 -29.5 -70.5t-70.5 -29.5h-596l-304 -300v300h-100q-41 0 -70.5 29.5t-29.5 70.5z" />
+<glyph unicode="&#xe112;" d="M100 600v200h300v-250q0 -113 6 -145q17 -92 102 -117q39 -11 92 -11q37 0 66.5 5.5t50 15.5t36 24t24 31.5t14 37.5t7 42t2.5 45t0 47v25v250h300v-200q0 -42 -3 -83t-15 -104t-31.5 -116t-58 -109.5t-89 -96.5t-129 -65.5t-174.5 -25.5t-174.5 25.5t-129 65.5t-89 96.5 t-58 109.5t-31.5 116t-15 104t-3 83zM100 900v300h300v-300h-300zM800 900v300h300v-300h-300z" />
+<glyph unicode="&#xe113;" d="M-30 411l227 -227l352 353l353 -353l226 227l-578 579z" />
+<glyph unicode="&#xe114;" d="M70 797l580 -579l578 579l-226 227l-353 -353l-352 353z" />
+<glyph unicode="&#xe115;" d="M-198 700l299 283l300 -283h-203v-400h385l215 -200h-800v600h-196zM402 1000l215 -200h381v-400h-198l299 -283l299 283h-200v600h-796z" />
+<glyph unicode="&#xe116;" d="M18 939q-5 24 10 42q14 19 39 19h896l38 162q5 17 18.5 27.5t30.5 10.5h94q20 0 35 -14.5t15 -35.5t-15 -35.5t-35 -14.5h-54l-201 -961q-2 -4 -6 -10.5t-19 -17.5t-33 -11h-31v-50q0 -20 -14.5 -35t-35.5 -15t-35.5 15t-14.5 35v50h-300v-50q0 -20 -14.5 -35t-35.5 -15 t-35.5 15t-14.5 35v50h-50q-21 0 -35.5 15t-14.5 35q0 21 14.5 35.5t35.5 14.5h535l48 200h-633q-32 0 -54.5 21t-27.5 43z" />
+<glyph unicode="&#xe117;" d="M0 0v800h1200v-800h-1200zM0 900v100h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-100h-1200z" />
+<glyph unicode="&#xe118;" d="M1 0l300 700h1200l-300 -700h-1200zM1 400v600h200q0 41 29.5 70.5t70.5 29.5h300q41 0 70.5 -29.5t29.5 -70.5h500v-200h-1000z" />
+<glyph unicode="&#xe119;" d="M302 300h198v600h-198l298 300l298 -300h-198v-600h198l-298 -300z" />
+<glyph unicode="&#xe120;" d="M0 600l300 298v-198h600v198l300 -298l-300 -297v197h-600v-197z" />
+<glyph unicode="&#xe121;" d="M0 100v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM31 400l172 739q5 22 23 41.5t38 19.5h672q19 0 37.5 -22.5t23.5 -45.5l172 -732h-1138zM800 100h100v100h-100v-100z M1000 100h100v100h-100v-100z" />
+<glyph unicode="&#xe122;" d="M-101 600v50q0 24 25 49t50 38l25 13v-250l-11 5.5t-24 14t-30 21.5t-24 27.5t-11 31.5zM99 500v250v5q0 13 0.5 18.5t2.5 13t8 10.5t15 3h200l675 250v-850l-675 200h-38l47 -276q2 -12 -3 -17.5t-11 -6t-21 -0.5h-8h-83q-20 0 -34.5 14t-18.5 35q-56 337 -56 351z M1100 200v850q0 21 14.5 35.5t35.5 14.5q20 0 35 -14.5t15 -35.5v-850q0 -20 -15 -35t-35 -15q-21 0 -35.5 15t-14.5 35z" />
+<glyph unicode="&#xe123;" d="M74 350q0 21 13.5 35.5t33.5 14.5h17l118 173l63 327q15 77 76 140t144 83l-18 32q-6 19 3 32t29 13h94q20 0 29 -10.5t3 -29.5l-18 -37q83 -19 144 -82.5t76 -140.5l63 -327l118 -173h17q20 0 33.5 -14.5t13.5 -35.5q0 -20 -13 -40t-31 -27q-22 -9 -63 -23t-167.5 -37 t-251.5 -23t-245.5 20.5t-178.5 41.5l-58 20q-18 7 -31 27.5t-13 40.5zM497 110q12 -49 40 -79.5t63 -30.5t63 30.5t39 79.5q-48 -6 -102 -6t-103 6z" />
+<glyph unicode="&#xe124;" d="M21 445l233 -45l-78 -224l224 78l45 -233l155 179l155 -179l45 233l224 -78l-78 224l234 45l-180 155l180 156l-234 44l78 225l-224 -78l-45 233l-155 -180l-155 180l-45 -233l-224 78l78 -225l-233 -44l179 -156z" />
+<glyph unicode="&#xe125;" d="M0 200h200v600h-200v-600zM300 275q0 -75 100 -75h61q123 -100 139 -100h250q46 0 83 57l238 344q29 31 29 74v100q0 44 -30.5 84.5t-69.5 40.5h-328q28 118 28 125v150q0 44 -30.5 84.5t-69.5 40.5h-50q-27 0 -51 -20t-38 -48l-96 -198l-145 -196q-20 -26 -20 -63v-400z M400 300v375l150 212l100 213h50v-175l-50 -225h450v-125l-250 -375h-214l-136 100h-100z" />
+<glyph unicode="&#xe126;" d="M0 400v600h200v-600h-200zM300 525v400q0 75 100 75h61q123 100 139 100h250q46 0 83 -57l238 -344q29 -31 29 -74v-100q0 -44 -30.5 -84.5t-69.5 -40.5h-328q28 -118 28 -125v-150q0 -44 -30.5 -84.5t-69.5 -40.5h-50q-27 0 -51 20t-38 48l-96 198l-145 196 q-20 26 -20 63zM400 525l150 -212l100 -213h50v175l-50 225h450v125l-250 375h-214l-136 -100h-100v-375z" />
+<glyph unicode="&#xe127;" d="M8 200v600h200v-600h-200zM308 275v525q0 17 14 35.5t28 28.5l14 9l362 230q14 6 25 6q17 0 29 -12l109 -112q14 -14 14 -34q0 -18 -11 -32l-85 -121h302q85 0 138.5 -38t53.5 -110t-54.5 -111t-138.5 -39h-107l-130 -339q-7 -22 -20.5 -41.5t-28.5 -19.5h-341 q-7 0 -90 81t-83 94zM408 289l100 -89h293l131 339q6 21 19.5 41t28.5 20h203q16 0 25 15t9 36q0 20 -9 34.5t-25 14.5h-457h-6.5h-7.5t-6.5 0.5t-6 1t-5 1.5t-5.5 2.5t-4 4t-4 5.5q-5 12 -5 20q0 14 10 27l147 183l-86 83l-339 -236v-503z" />
+<glyph unicode="&#xe128;" d="M-101 651q0 72 54 110t139 37h302l-85 121q-11 16 -11 32q0 21 14 34l109 113q13 12 29 12q11 0 25 -6l365 -230q7 -4 16.5 -10.5t26 -26t16.5 -36.5v-526q0 -13 -85.5 -93.5t-93.5 -80.5h-342q-15 0 -28.5 20t-19.5 41l-131 339h-106q-84 0 -139 39t-55 111zM-1 601h222 q15 0 28.5 -20.5t19.5 -40.5l131 -339h293l106 89v502l-342 237l-87 -83l145 -184q10 -11 10 -26q0 -11 -5 -20q-1 -3 -3.5 -5.5l-4 -4t-5 -2.5t-5.5 -1.5t-6.5 -1t-6.5 -0.5h-7.5h-6.5h-476v-100zM999 201v600h200v-600h-200z" />
+<glyph unicode="&#xe129;" d="M97 719l230 -363q4 -6 10.5 -15.5t26 -25t36.5 -15.5h525q13 0 94 83t81 90v342q0 15 -20 28.5t-41 19.5l-339 131v106q0 84 -39 139t-111 55t-110 -53.5t-38 -138.5v-302l-121 84q-15 12 -33.5 11.5t-32.5 -13.5l-112 -110q-22 -22 -6 -53zM172 739l83 86l183 -146 q22 -18 47 -5q3 1 5.5 3.5l4 4t2.5 5t1.5 5.5t1 6.5t0.5 6v7.5v7v456q0 22 25 31t50 -0.5t25 -30.5v-202q0 -16 20 -29.5t41 -19.5l339 -130v-294l-89 -100h-503zM400 0v200h600v-200h-600z" />
+<glyph unicode="&#xe130;" d="M1 585q-15 -31 7 -53l112 -110q13 -13 32 -13.5t34 10.5l121 85l-1 -302q0 -84 38.5 -138t110.5 -54t111 55t39 139v106l339 131q20 6 40.5 19.5t20.5 28.5v342q0 7 -81 90t-94 83h-525q-17 0 -35.5 -14t-28.5 -28l-10 -15zM76 565l237 339h503l89 -100v-294l-340 -130 q-20 -6 -40 -20t-20 -29v-202q0 -22 -25 -31t-50 0t-25 31v456v14.5t-1.5 11.5t-5 12t-9.5 7q-24 13 -46 -5l-184 -146zM305 1104v200h600v-200h-600z" />
+<glyph unicode="&#xe131;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q162 0 299.5 -80t217.5 -218t80 -300t-80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 500h300l-2 -194l402 294l-402 298v-197h-298v-201z" />
+<glyph unicode="&#xe132;" d="M0 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t231.5 47.5q122 0 232.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-218 -217.5t-300 -80t-299.5 80t-217.5 217.5t-80 299.5zM200 600l400 -294v194h302v201h-300v197z" />
+<glyph unicode="&#xe133;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600h200v-300h200v300h200l-300 400z" />
+<glyph unicode="&#xe134;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM300 600l300 -400l300 400h-200v300h-200v-300h-200z" />
+<glyph unicode="&#xe135;" d="M5 597q0 122 47.5 232.5t127.5 190.5t190.5 127.5t232.5 47.5q121 0 231.5 -47.5t190.5 -127.5t127.5 -190.5t47.5 -232.5q0 -162 -80 -299.5t-217.5 -217.5t-299.5 -80t-300 80t-218 217.5t-80 299.5zM254 780q-8 -34 5.5 -93t7.5 -87q0 -9 17 -44t16 -60q12 0 23 -5.5 t23 -15t20 -13.5q20 -10 108 -42q22 -8 53 -31.5t59.5 -38.5t57.5 -11q8 -18 -15 -55.5t-20 -57.5q12 -21 22.5 -34.5t28 -27t36.5 -17.5q0 -6 -3 -15.5t-3.5 -14.5t4.5 -17q101 -2 221 111q31 30 47 48t34 49t21 62q-14 9 -37.5 9.5t-35.5 7.5q-14 7 -49 15t-52 19 q-9 0 -39.5 -0.5t-46.5 -1.5t-39 -6.5t-39 -16.5q-50 -35 -66 -12q-4 2 -3.5 25.5t0.5 25.5q-6 13 -26.5 17t-24.5 7q2 22 -2 41t-16.5 28t-38.5 -20q-23 -25 -42 4q-19 28 -8 58q8 16 22 22q6 -1 26 -1.5t33.5 -4.5t19.5 -13q12 -19 32 -37.5t34 -27.5l14 -8q0 3 9.5 39.5 t5.5 57.5q-4 23 14.5 44.5t22.5 31.5q5 14 10 35t8.5 31t15.5 22.5t34 21.5q-6 18 10 37q8 0 23.5 -1.5t24.5 -1.5t20.5 4.5t20.5 15.5q-10 23 -30.5 42.5t-38 30t-49 26.5t-43.5 23q11 41 1 44q31 -13 58.5 -14.5t39.5 3.5l11 4q6 36 -17 53.5t-64 28.5t-56 23 q-19 -3 -37 0q-15 -12 -36.5 -21t-34.5 -12t-44 -8t-39 -6q-15 -3 -46 0t-45 -3q-20 -6 -51.5 -25.5t-34.5 -34.5q-3 -11 6.5 -22.5t8.5 -18.5q-3 -34 -27.5 -91t-29.5 -79zM518 915q3 12 16 30.5t16 25.5q10 -10 18.5 -10t14 6t14.5 14.5t16 12.5q0 -18 8 -42.5t16.5 -44 t9.5 -23.5q-6 1 -39 5t-53.5 10t-36.5 16z" />
+<glyph unicode="&#xe136;" d="M0 164.5q0 21.5 15 37.5l600 599q-33 101 6 201.5t135 154.5q164 92 306 -9l-259 -138l145 -232l251 126q13 -175 -151 -267q-123 -70 -253 -23l-596 -596q-15 -16 -36.5 -16t-36.5 16l-111 110q-15 15 -15 36.5z" />
+<glyph unicode="&#xe137;" horiz-adv-x="1220" d="M0 196v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 596v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000 q-41 0 -70.5 29.5t-29.5 70.5zM0 996v100q0 41 29.5 70.5t70.5 29.5h1000q41 0 70.5 -29.5t29.5 -70.5v-100q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM600 596h500v100h-500v-100zM800 196h300v100h-300v-100zM900 996h200v100h-200v-100z" />
+<glyph unicode="&#xe138;" d="M100 1100v100h1000v-100h-1000zM150 1000h900l-350 -500v-300l-200 -200v500z" />
+<glyph unicode="&#xe139;" d="M0 200v200h1200v-200q0 -41 -29.5 -70.5t-70.5 -29.5h-1000q-41 0 -70.5 29.5t-29.5 70.5zM0 500v400q0 41 29.5 70.5t70.5 29.5h300v100q0 41 29.5 70.5t70.5 29.5h200q41 0 70.5 -29.5t29.5 -70.5v-100h300q41 0 70.5 -29.5t29.5 -70.5v-400h-500v100h-200v-100h-500z M500 1000h200v100h-200v-100z" />
+<glyph unicode="&#xe140;" d="M0 0v400l129 -129l200 200l142 -142l-200 -200l129 -129h-400zM0 800l129 129l200 -200l142 142l-200 200l129 129h-400v-400zM729 329l142 142l200 -200l129 129v-400h-400l129 129zM729 871l200 200l-129 129h400v-400l-129 129l-200 -200z" />
+<glyph unicode="&#xe141;" d="M0 596q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 596q0 -172 121.5 -293t292.5 -121t292.5 121t121.5 293q0 171 -121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM291 655 q0 23 15.5 38.5t38.5 15.5t39 -16t16 -38q0 -23 -16 -39t-39 -16q-22 0 -38 16t-16 39zM400 850q0 22 16 38.5t39 16.5q22 0 38 -16t16 -39t-16 -39t-38 -16q-23 0 -39 16.5t-16 38.5zM513 609q0 32 21 56.5t52 29.5l122 126l1 1q-9 14 -9 28q0 22 16 38.5t39 16.5 q22 0 38 -16t16 -39t-16 -39t-38 -16q-16 0 -29 10l-55 -145q17 -22 17 -51q0 -36 -25.5 -61.5t-61.5 -25.5q-37 0 -62.5 25.5t-25.5 61.5zM800 655q0 22 16 38t39 16t38.5 -15.5t15.5 -38.5t-16 -39t-38 -16q-23 0 -39 16t-16 39z" />
+<glyph unicode="&#xe142;" d="M-40 375q-13 -95 35 -173q35 -57 94 -89t129 -32q63 0 119 28q33 16 65 40.5t52.5 45.5t59.5 64q40 44 57 61l394 394q35 35 47 84t-3 96q-27 87 -117 104q-20 2 -29 2q-46 0 -79.5 -17t-67.5 -51l-388 -396l-7 -7l69 -67l377 373q20 22 39 38q23 23 50 23q38 0 53 -36 q16 -39 -20 -75l-547 -547q-52 -52 -125 -52q-55 0 -100 33t-54 96q-5 35 2.5 66t31.5 63t42 50t56 54q24 21 44 41l348 348q52 52 82.5 79.5t84 54t107.5 26.5q25 0 48 -4q95 -17 154 -94.5t51 -175.5q-7 -101 -98 -192l-252 -249l-253 -256l7 -7l69 -60l517 511 q67 67 95 157t11 183q-16 87 -67 154t-130 103q-69 33 -152 33q-107 0 -197 -55q-40 -24 -111 -95l-512 -512q-68 -68 -81 -163z" />
+<glyph unicode="&#xe143;" d="M79 784q0 131 99 229.5t230 98.5q144 0 242 -129q103 129 245 129q130 0 227 -98.5t97 -229.5q0 -46 -17.5 -91t-61 -99t-77 -89.5t-104.5 -105.5q-197 -191 -293 -322l-17 -23l-16 23q-43 58 -100 122.5t-92 99.5t-101 100l-84.5 84.5t-68 74t-60 78t-33.5 70.5t-15 78z M250 784q0 -27 30.5 -70t61.5 -75.5t95 -94.5l22 -22q93 -90 190 -201q82 92 195 203l12 12q64 62 97.5 97t64.5 79t31 72q0 71 -48 119.5t-106 48.5q-73 0 -131 -83l-118 -171l-114 174q-51 80 -124 80q-59 0 -108.5 -49.5t-49.5 -118.5z" />
+<glyph unicode="&#xe144;" d="M57 353q0 -94 66 -160l141 -141q66 -66 159 -66q95 0 159 66l283 283q66 66 66 159t-66 159l-141 141q-12 12 -19 17l-105 -105l212 -212l-389 -389l-247 248l95 95l-18 18q-46 45 -75 101l-55 -55q-66 -66 -66 -159zM269 706q0 -93 66 -159l141 -141l19 -17l105 105 l-212 212l389 389l247 -247l-95 -96l18 -18q46 -46 77 -99l29 29q35 35 62.5 88t27.5 96q0 93 -66 159l-141 141q-66 66 -159 66q-95 0 -159 -66l-283 -283q-66 -64 -66 -159z" />
+<glyph unicode="&#xe145;" d="M200 100v953q0 21 30 46t81 48t129 38t163 15t162 -15t127 -38t79 -48t29 -46v-953q0 -41 -29.5 -70.5t-70.5 -29.5h-600q-41 0 -70.5 29.5t-29.5 70.5zM300 300h600v700h-600v-700zM496 150q0 -43 30.5 -73.5t73.5 -30.5t73.5 30.5t30.5 73.5t-30.5 73.5t-73.5 30.5 t-73.5 -30.5t-30.5 -73.5z" />
+<glyph unicode="&#xe146;" d="M0 0l303 380l207 208l-210 212h300l267 279l-35 36q-15 14 -15 35t15 35q14 15 35 15t35 -15l283 -282q15 -15 15 -36t-15 -35q-14 -15 -35 -15t-35 15l-36 35l-279 -267v-300l-212 210l-208 -207z" />
+<glyph unicode="&#xe148;" d="M295 433h139q5 -77 48.5 -126.5t117.5 -64.5v335l-27 7q-46 14 -79 26.5t-72 36t-62.5 52t-40 72.5t-16.5 99q0 92 44 159.5t109 101t144 40.5v78h100v-79q38 -4 72.5 -13.5t75.5 -31.5t71 -53.5t51.5 -84t24.5 -118.5h-159q-8 72 -35 109.5t-101 50.5v-307l64 -14 q34 -7 64 -16.5t70 -31.5t67.5 -52t47.5 -80.5t20 -112.5q0 -139 -89 -224t-244 -96v-77h-100v78q-152 17 -237 104q-40 40 -52.5 93.5t-15.5 139.5zM466 889q0 -29 8 -51t16.5 -34t29.5 -22.5t31 -13.5t38 -10q7 -2 11 -3v274q-61 -8 -97.5 -37.5t-36.5 -102.5zM700 237 q170 18 170 151q0 64 -44 99.5t-126 60.5v-311z" />
+<glyph unicode="&#xe149;" d="M100 600v100h166q-24 49 -44 104q-10 26 -14.5 55.5t-3 72.5t25 90t68.5 87q97 88 263 88q129 0 230 -89t101 -208h-153q0 52 -34 89.5t-74 51.5t-76 14q-37 0 -79 -14.5t-62 -35.5q-41 -44 -41 -101q0 -11 2.5 -24.5t5.5 -24t9.5 -26.5t10.5 -25t14 -27.5t14 -25.5 t15.5 -27t13.5 -24h242v-100h-197q8 -50 -2.5 -115t-31.5 -94q-41 -59 -99 -113q35 11 84 18t70 7q32 1 102 -16t104 -17q76 0 136 30l50 -147q-41 -25 -80.5 -36.5t-59 -13t-61.5 -1.5q-23 0 -128 33t-155 29q-39 -4 -82 -17t-66 -25l-24 -11l-55 145l16.5 11t15.5 10 t13.5 9.5t14.5 12t14.5 14t17.5 18.5q48 55 54 126.5t-30 142.5h-221z" />
+<glyph unicode="&#xe150;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM602 900l298 300l298 -300h-198v-900h-200v900h-198z" />
+<glyph unicode="&#xe151;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v200h100v-100h200v-100h-300zM700 400v100h300v-200h-99v-100h-100v100h99v100h-200zM700 700v500h300v-500h-100v100h-100v-100h-100zM801 900h100v200h-100v-200z" />
+<glyph unicode="&#xe152;" d="M2 300h198v900h200v-900h198l-298 -300zM700 0v500h300v-500h-100v100h-100v-100h-100zM700 700v200h100v-100h200v-100h-300zM700 1100v100h300v-200h-99v-100h-100v100h99v100h-200zM801 200h100v200h-100v-200z" />
+<glyph unicode="&#xe153;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 100v400h300v-500h-100v100h-200zM800 1100v100h200v-500h-100v400h-100zM901 200h100v200h-100v-200z" />
+<glyph unicode="&#xe154;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM800 400v100h200v-500h-100v400h-100zM800 800v400h300v-500h-100v100h-200zM901 900h100v200h-100v-200z" />
+<glyph unicode="&#xe155;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h500v-200h-500zM700 400v200h400v-200h-400zM700 700v200h300v-200h-300zM700 1000v200h200v-200h-200z" />
+<glyph unicode="&#xe156;" d="M2 300l298 -300l298 300h-198v900h-200v-900h-198zM700 100v200h200v-200h-200zM700 400v200h300v-200h-300zM700 700v200h400v-200h-400zM700 1000v200h500v-200h-500z" />
+<glyph unicode="&#xe157;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q162 0 281 -118.5t119 -281.5v-300q0 -165 -118.5 -282.5t-281.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500z" />
+<glyph unicode="&#xe158;" d="M0 400v300q0 163 119 281.5t281 118.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-163 0 -281.5 117.5t-118.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM400 300l333 250l-333 250v-500z" />
+<glyph unicode="&#xe159;" d="M0 400v300q0 163 117.5 281.5t282.5 118.5h300q163 0 281.5 -119t118.5 -281v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-300q-165 0 -282.5 117.5t-117.5 282.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 700l250 -333l250 333h-500z" />
+<glyph unicode="&#xe160;" d="M0 400v300q0 165 117.5 282.5t282.5 117.5h300q165 0 282.5 -117.5t117.5 -282.5v-300q0 -162 -118.5 -281t-281.5 -119h-300q-165 0 -282.5 118.5t-117.5 281.5zM200 300q0 -41 29.5 -70.5t70.5 -29.5h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5 h-500q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM300 400h500l-250 333z" />
+<glyph unicode="&#xe161;" d="M0 400v300h300v200l400 -350l-400 -350v200h-300zM500 0v200h500q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-500v200h400q165 0 282.5 -117.5t117.5 -282.5v-300q0 -165 -117.5 -282.5t-282.5 -117.5h-400z" />
+<glyph unicode="&#xe162;" d="M216 519q10 -19 32 -19h302q-155 -438 -160 -458q-5 -21 4 -32l9 -8l9 -1q13 0 26 16l538 630q15 19 6 36q-8 18 -32 16h-300q1 4 78 219.5t79 227.5q2 17 -6 27l-8 8h-9q-16 0 -25 -15q-4 -5 -98.5 -111.5t-228 -257t-209.5 -238.5q-17 -19 -7 -40z" />
+<glyph unicode="&#xe163;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q47 0 100 15v185h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h500v185q-14 4 -114 7.5t-193 5.5l-93 2q-165 0 -282.5 -117.5t-117.5 -282.5v-300zM600 400v300h300v200l400 -350l-400 -350v200h-300z " />
+<glyph unicode="&#xe164;" d="M0 400q0 -165 117.5 -282.5t282.5 -117.5h300q163 0 281.5 117.5t118.5 282.5v98l-78 73l-122 -123v-148q0 -41 -29.5 -70.5t-70.5 -29.5h-500q-41 0 -70.5 29.5t-29.5 70.5v500q0 41 29.5 70.5t70.5 29.5h156l118 122l-74 78h-100q-165 0 -282.5 -117.5t-117.5 -282.5 v-300zM496 709l353 342l-149 149h500v-500l-149 149l-342 -353z" />
+<glyph unicode="&#xe165;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM406 600 q0 80 57 137t137 57t137 -57t57 -137t-57 -137t-137 -57t-137 57t-57 137z" />
+<glyph unicode="&#xe166;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 800l445 -500l450 500h-295v400h-300v-400h-300zM900 150h100v50h-100v-50z" />
+<glyph unicode="&#xe167;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 700h300v-300h300v300h295l-445 500zM900 150h100v50h-100v-50z" />
+<glyph unicode="&#xe168;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 705l305 -305l596 596l-154 155l-442 -442l-150 151zM900 150h100v50h-100v-50z" />
+<glyph unicode="&#xe169;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM100 988l97 -98l212 213l-97 97zM200 401h700v699l-250 -239l-149 149l-212 -212l149 -149zM900 150h100v50h-100v-50z" />
+<glyph unicode="&#xe170;" d="M0 0v275q0 11 7 18t18 7h1048q11 0 19 -7.5t8 -17.5v-275h-1100zM200 612l212 -212l98 97l-213 212zM300 1200l239 -250l-149 -149l212 -212l149 148l248 -237v700h-699zM900 150h100v50h-100v-50z" />
+<glyph unicode="&#xe171;" d="M23 415l1177 784v-1079l-475 272l-310 -393v416h-392zM494 210l672 938l-672 -712v-226z" />
+<glyph unicode="&#xe172;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-850q0 -21 -15 -35.5t-35 -14.5h-150v400h-700v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200z" />
+<glyph unicode="&#xe173;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-218l-276 -275l-120 120l-126 -127h-378v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM581 306l123 123l120 -120l353 352l123 -123l-475 -476zM600 1000h100v200h-100v-200z" />
+<glyph unicode="&#xe174;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-269l-103 -103l-170 170l-298 -298h-329v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 1000h100v200h-100v-200zM700 133l170 170l-170 170l127 127l170 -170l170 170l127 -128l-170 -169l170 -170 l-127 -127l-170 170l-170 -170z" />
+<glyph unicode="&#xe175;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-300h-400v-200h-500v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300l300 -300l300 300h-200v300h-200v-300h-200zM600 1000v200h100v-200h-100z" />
+<glyph unicode="&#xe176;" d="M0 150v1000q0 20 14.5 35t35.5 15h250v-300h500v300h100l200 -200v-402l-200 200l-298 -298h-402v-400h-150q-21 0 -35.5 14.5t-14.5 35.5zM600 300h200v-300h200v300h200l-300 300zM600 1000v200h100v-200h-100z" />
+<glyph unicode="&#xe177;" d="M0 250q0 -21 14.5 -35.5t35.5 -14.5h1100q21 0 35.5 14.5t14.5 35.5v550h-1200v-550zM0 900h1200v150q0 21 -14.5 35.5t-35.5 14.5h-1100q-21 0 -35.5 -14.5t-14.5 -35.5v-150zM100 300v200h400v-200h-400z" />
+<glyph unicode="&#xe178;" d="M0 400l300 298v-198h400v-200h-400v-198zM100 800v200h100v-200h-100zM300 800v200h100v-200h-100zM500 800v200h400v198l300 -298l-300 -298v198h-400zM800 300v200h100v-200h-100zM1000 300h100v200h-100v-200z" />
+<glyph unicode="&#xe179;" d="M100 700v400l50 100l50 -100v-300h100v300l50 100l50 -100v-300h100v300l50 100l50 -100v-400l-100 -203v-447q0 -21 -14.5 -35.5t-35.5 -14.5h-200q-21 0 -35.5 14.5t-14.5 35.5v447zM800 597q0 -29 10.5 -55.5t25 -43t29 -28.5t25.5 -18l10 -5v-397q0 -21 14.5 -35.5 t35.5 -14.5h200q21 0 35.5 14.5t14.5 35.5v1106q0 31 -18 40.5t-44 -7.5l-276 -117q-25 -16 -43.5 -50.5t-18.5 -65.5v-359z" />
+<glyph unicode="&#xe180;" d="M100 0h400v56q-75 0 -87.5 6t-12.5 44v394h500v-394q0 -38 -12.5 -44t-87.5 -6v-56h400v56q-4 0 -11 0.5t-24 3t-30 7t-24 15t-11 24.5v888q0 22 25 34.5t50 13.5l25 2v56h-400v-56q75 0 87.5 -6t12.5 -44v-394h-500v394q0 38 12.5 44t87.5 6v56h-400v-56q4 0 11 -0.5 t24 -3t30 -7t24 -15t11 -24.5v-888q0 -22 -25 -34.5t-50 -13.5l-25 -2v-56z" />
+<glyph unicode="&#xe181;" d="M0 300q0 -41 29.5 -70.5t70.5 -29.5h300q41 0 70.5 29.5t29.5 70.5v500q0 41 -29.5 70.5t-70.5 29.5h-300q-41 0 -70.5 -29.5t-29.5 -70.5v-500zM100 100h400l200 200h105l295 98v-298h-425l-100 -100h-375zM100 300v200h300v-200h-300zM100 600v200h300v-200h-300z M100 1000h400l200 -200v-98l295 98h105v200h-425l-100 100h-375zM700 402v163l400 133v-163z" />
+<glyph unicode="&#xe182;" d="M16.5 974.5q0.5 -21.5 16 -90t46.5 -140t104 -177.5t175 -208q103 -103 207.5 -176t180 -103.5t137 -47t92.5 -16.5l31 1l163 162q16 17 13 40.5t-22 37.5l-192 136q-19 14 -45 12t-42 -19l-119 -118q-143 103 -267 227q-126 126 -227 268l118 118q17 17 20 41.5 t-11 44.5l-139 194q-14 19 -36.5 22t-40.5 -14l-162 -162q-1 -11 -0.5 -32.5z" />
+<glyph unicode="&#xe183;" d="M0 50v212q0 20 10.5 45.5t24.5 39.5l365 303v50q0 4 1 10.5t12 22.5t30 28.5t60 23t97 10.5t97 -10t60 -23.5t30 -27.5t12 -24l1 -10v-50l365 -303q14 -14 24.5 -39.5t10.5 -45.5v-212q0 -21 -15 -35.5t-35 -14.5h-1100q-21 0 -35.5 14.5t-14.5 35.5zM0 712 q0 -21 14.5 -33.5t34.5 -8.5l202 33q20 4 34.5 21t14.5 38v146q141 24 300 24t300 -24v-146q0 -21 14.5 -38t34.5 -21l202 -33q20 -4 34.5 8.5t14.5 33.5v200q-6 8 -19 20.5t-63 45t-112 57t-171 45t-235 20.5q-92 0 -175 -10.5t-141.5 -27t-108.5 -36.5t-81.5 -40 t-53.5 -36.5t-31 -27.5l-9 -10v-200z" />
+<glyph unicode="&#xe184;" d="M100 0v100h1100v-100h-1100zM175 200h950l-125 150v250l100 100v400h-100v-200h-100v200h-200v-200h-100v200h-200v-200h-100v200h-100v-400l100 -100v-250z" />
+<glyph unicode="&#xe185;" d="M100 0h300v400q0 41 -29.5 70.5t-70.5 29.5h-100q-41 0 -70.5 -29.5t-29.5 -70.5v-400zM500 0v1000q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-1000h-300zM900 0v700q0 41 29.5 70.5t70.5 29.5h100q41 0 70.5 -29.5t29.5 -70.5v-700h-300z" />
+<glyph unicode="&#xe186;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
+<glyph unicode="&#xe187;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h100v200h100v-200h100v500h-100v-200h-100v200h-100v-500zM600 300h200v100h100v300h-100v100h-200v-500 zM700 400v300h100v-300h-100z" />
+<glyph unicode="&#xe188;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v100h-200v300h200v100h-300v-500zM600 300h300v100h-200v300h200v100h-300v-500z" />
+<glyph unicode="&#xe189;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 550l300 -150v300zM600 400l300 150l-300 150v-300z" />
+<glyph unicode="&#xe190;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300v500h700v-500h-700zM300 400h130q41 0 68 42t27 107t-28.5 108t-66.5 43h-130v-300zM575 549 q0 -65 27 -107t68 -42h130v300h-130q-38 0 -66.5 -43t-28.5 -108z" />
+<glyph unicode="&#xe191;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v300h-200v100h200v100h-300v-300h200v-100h-200v-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
+<glyph unicode="&#xe192;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 300h300v400h-200v100h-100v-500zM301 400v200h100v-200h-100zM601 300h100v100h-100v-100zM700 700h100 v-400h100v500h-200v-100z" />
+<glyph unicode="&#xe193;" d="M-100 300v500q0 124 88 212t212 88h700q124 0 212 -88t88 -212v-500q0 -124 -88 -212t-212 -88h-700q-124 0 -212 88t-88 212zM100 200h900v700h-900v-700zM200 700v100h300v-300h-99v-100h-100v100h99v200h-200zM201 300v100h100v-100h-100zM601 300v100h100v-100h-100z M700 700v100h200v-500h-100v400h-100z" />
+<glyph unicode="&#xe194;" d="M4 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM186 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 500v200 l100 100h300v-100h-300v-200h300v-100h-300z" />
+<glyph unicode="&#xe195;" d="M0 600q0 162 80 299t217 217t299 80t299 -80t217 -217t80 -299t-80 -299t-217 -217t-299 -80t-299 80t-217 217t-80 299zM182 600q0 -171 121.5 -292.5t292.5 -121.5t292.5 121.5t121.5 292.5t-121.5 292.5t-292.5 121.5t-292.5 -121.5t-121.5 -292.5zM400 400v400h300 l100 -100v-100h-100v100h-200v-100h200v-100h-200v-100h-100zM700 400v100h100v-100h-100z" />
+<glyph unicode="&#xe197;" d="M-14 494q0 -80 56.5 -137t135.5 -57h222v300h400v-300h128q120 0 205 86t85 208q0 120 -85 206.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200h200v300h200v-300 h200l-300 -300z" />
+<glyph unicode="&#xe198;" d="M-14 494q0 -80 56.5 -137t135.5 -57h8l414 414l403 -403q94 26 154.5 104t60.5 178q0 121 -85 207.5t-205 86.5q-46 0 -90 -14q-44 97 -134.5 156.5t-200.5 59.5q-152 0 -260 -107.5t-108 -260.5q0 -25 2 -37q-66 -14 -108.5 -67.5t-42.5 -122.5zM300 200l300 300 l300 -300h-200v-300h-200v300h-200z" />
+<glyph unicode="&#xe199;" d="M100 200h400v-155l-75 -45h350l-75 45v155h400l-270 300h170l-270 300h170l-300 333l-300 -333h170l-270 -300h170z" />
+<glyph unicode="&#xe200;" d="M121 700q0 -53 28.5 -97t75.5 -65q-4 -16 -4 -38q0 -74 52.5 -126.5t126.5 -52.5q56 0 100 30v-306l-75 -45h350l-75 45v306q46 -30 100 -30q74 0 126.5 52.5t52.5 126.5q0 24 -9 55q50 32 79.5 83t29.5 112q0 90 -61.5 155.5t-150.5 71.5q-26 89 -99.5 145.5 t-167.5 56.5q-116 0 -197.5 -81.5t-81.5 -197.5q0 -4 1 -12t1 -11q-14 2 -23 2q-74 0 -126.5 -52.5t-52.5 -126.5z" />
+</font>
+</defs></svg> 
\ No newline at end of file

diff --git a/src/web/fonts/glyphicons-halflings-regular.ttf b/src/web/fonts/glyphicons-halflings-regular.ttf
new file mode 100644
index 0000000..a498ef4
Binary files /dev/null and b/src/web/fonts/glyphicons-halflings-regular.ttf differ

diff --git a/src/web/fonts/glyphicons-halflings-regular.woff b/src/web/fonts/glyphicons-halflings-regular.woff
new file mode 100644
index 0000000..d83c539
Binary files /dev/null and b/src/web/fonts/glyphicons-halflings-regular.woff differ

diff --git a/src/web/js/azkaban.ajax.utils.js b/src/web/js/azkaban.ajax.utils.js
index 96d4b28..342e2af 100644
--- a/src/web/js/azkaban.ajax.utils.js
+++ b/src/web/js/azkaban.ajax.utils.js
@@ -15,142 +15,145 @@
  */
 
 function ajaxCall(requestURL, data, callback) {
-	$.get(
-		requestURL,
-		data,
-		function(data) {
-			if (data.error == "session") {
-				// We need to relogin.
-				var errorDialog = document.getElementById("invalid-session");
-				if (errorDialog) {
-					  $(errorDialog).modal({
-					      closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-					      position: ["20%",],
-					      containerId: 'confirm-container',
-					      containerCss: {
-					        'height': '220px',
-					        'width': '565px'
-					      },
-					      onClose: function (dialog) {
-					      	window.location.reload();
-					      }
-					    });
-				}
-			}
-			else {
-				callback.call(this,data);
+	var successHandler = function(data) {
+		if (data.error == "session") {
+			// We need to relogin.
+			var errorDialog = document.getElementById("invalid-session");
+			if (errorDialog) {
+				$(errorDialog).modal({
+					closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
+					position: ["20%",],
+					containerId: 'confirm-container',
+					containerCss: {
+						'height': '220px',
+						'width': '565px'
+					},
+					onClose: function (dialog) {
+						window.location.reload();
+					}
+				});
 			}
-		},
-		"json"
-	);
+		}
+		else {
+			callback.call(this,data);
+		}
+	};
+	$.get(requestURL, data, successHandler, "json");
 }
 
 function executeFlow(executingData) {
 	executeURL = contextURL + "/executor";
-	$.get(
-		executeURL,
-		executingData,
-		function(data) {
-			if (data.error) {
-				messageDialogView.show("Error Executing Flow", data.error);
-			}
-			else {
-				messageDialogView.show("Flow submitted", data.message,
-					function() {
-						var redirectURL = contextURL + "/executor?execid=" + data.execid;
-						window.location.href = redirectURL;
-					}
-				);
-			}
-		},
-		"json"
-	);
+	var successHandler = function(data) {
+		if (data.error) {
+			flowExecuteDialogView.hideExecutionOptionPanel();
+			messageDialogView.show("Error Executing Flow", data.error);
+		}
+		else {
+			flowExecuteDialogView.hideExecutionOptionPanel();
+			messageDialogView.show("Flow submitted", data.message,
+				function() {
+					var redirectURL = contextURL + "/executor?execid=" + data.execid;
+					window.location.href = redirectURL;
+				}
+			);
+		}
+	};
+
+	$.get(executeURL, executingData, successHandler, "json");
 }
 
 function fetchFlowInfo(model, projectName, flowId, execId) {
-  	var fetchData = {"project": projectName, "ajax":"flowInfo", "flow":flowId};
-  	if (execId) {
-  		fetchData.execid = execId;
-  	}
-  	
-  	var executeURL = contextURL + "/executor";
-  	$.ajax({
-  		url: executeURL,
-  		data: fetchData,
-  		success: function(data) {
-			if (data.error) {
-				alert(data.error);
-			}
-			else {
-				model.set({
-					"successEmails": data.successEmails, 
-					"failureEmails": data.failureEmails,
-					"failureAction": data.failureAction,
-					"notifyFailure": {"first": data.notifyFailureFirst, "last":data.notifyFailureLast},
-					"flowParams": data.flowParam,
-					"isRunning": data.running,
-					"nodeStatus": data.nodeStatus,
-					"concurrentOption": data.concurrentOptions,
-					"pipelineLevel": data.pipelineLevel,
-					"pipelineExecution": data.pipelineExecution,
-					"queueLevel":data.queueLevel
-				});
-			}
-			
-			model.trigger("change:flowinfo");
-		},
+	var fetchData = {"project": projectName, "ajax":"flowInfo", "flow":flowId};
+	if (execId) {
+		fetchData.execid = execId;
+	}
+	
+	var executeURL = contextURL + "/executor";
+	var successHandler = function(data) {
+		if (data.error) {
+			alert(data.error);
+		}
+		else {
+			model.set({
+				"successEmails": data.successEmails, 
+				"failureEmails": data.failureEmails,
+				"failureAction": data.failureAction,
+				"notifyFailure": {
+					"first": data.notifyFailureFirst, 
+					"last": data.notifyFailureLast
+				},
+				"flowParams": data.flowParam,
+				"isRunning": data.running,
+				"nodeStatus": data.nodeStatus,
+				"concurrentOption": data.concurrentOptions,
+				"pipelineLevel": data.pipelineLevel,
+				"pipelineExecution": data.pipelineExecution,
+				"queueLevel":data.queueLevel
+			});
+		}
+		model.trigger("change:flowinfo");
+	};
+
+	$.ajax({
+		url: executeURL,
+		data: fetchData,
+		success: successHandler,
 		dataType: "json",
 		async: false
-  	});
+	});
 }
 
 function fetchFlow(model, projectName, flowId, sync) {
 	// Just in case people don't set sync
 	sync = sync ? true : false;
-
-  	var managerUrl = contextURL + "/manager";
-  	var fetchData = {
-  		"ajax" : "fetchflowgraph",
-  		"project" : projectName,
-  		"flow" : flowId
-  	};
+	var managerUrl = contextURL + "/manager";
+	var fetchData = {
+		"ajax" : "fetchflowgraph",
+		"project" : projectName,
+		"flow" : flowId
+	};
+	var successHandler = function(data) {
+		if (data.error) {
+			alert(data.error);
+		}
+		else {
+			var disabled = data.disabled ? data.disabled : {};
+			model.set({
+				flowId: data.flowId, 
+				data: data, 
+				disabled: disabled
+			});
+			
+			var nodeMap = {};
+			for (var i = 0; i < data.nodes.length; ++i) {
+				var node = data.nodes[i];
+				nodeMap[node.id] = node;
+			}
+			
+			for (var i = 0; i < data.edges.length; ++i) {
+				 var edge = data.edges[i];
+				 
+				 if (!nodeMap[edge.target].in) {
+					nodeMap[edge.target].in = {};
+				 }
+				 var targetInMap = nodeMap[edge.target].in;
+				 targetInMap[edge.from] = nodeMap[edge.from];
+				 
+				 if (!nodeMap[edge.from].out) {
+					nodeMap[edge.from].out = {};
+				 }
+				 var sourceOutMap = nodeMap[edge.from].out;
+				 sourceOutMap[edge.target] = nodeMap[edge.target];
+			}
+			
+			model.set({nodeMap: nodeMap});
+		}
+	};
 
 	$.ajax({
 		url: managerUrl,
 		data: fetchData,
-		success: function(data) {
-			if (data.error) {
-				alert(data.error);
-			}
-			else {
-				var disabled = data.disabled ? data.disabled : {};
-				model.set({flowId: data.flowId, data:data, disabled: disabled});
-				
-				var nodeMap = {};
-				for (var i = 0; i < data.nodes.length; ++i) {
-					var node = data.nodes[i];
-					nodeMap[node.id] = node;
-				}
-				
-				for (var i = 0; i < data.edges.length; ++i) {
-					 var edge = data.edges[i];
-					 
-					 if (!nodeMap[edge.target].in) {
-					 	nodeMap[edge.target].in = {};
-					 }
-					 var targetInMap = nodeMap[edge.target].in;
-					 targetInMap[edge.from] = nodeMap[edge.from];
-					 
-					 if (!nodeMap[edge.from].out) {
-					 	nodeMap[edge.from].out = {};
-					 }
-					 var sourceOutMap = nodeMap[edge.from].out;
-					 sourceOutMap[edge.target] = nodeMap[edge.target];
-				}
-				
-				model.set({nodeMap: nodeMap});
-			}
-		},
+		success: successHandler,
 		dataType: "json",
 		async: !sync
 	});
@@ -164,34 +167,39 @@ function flowExecutingStatus(projectName, flowId) {
 	var requestURL = contextURL + "/executor";
 	
 	var executionIds;
-	$.ajax( {
+	var successHandler = function(data) {
+		if (data.error == "session") {
+			// We need to relogin.
+			var errorDialog = document.getElementById("invalid-session");
+			if (errorDialog) {
+				$(errorDialog).modal({
+					closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
+					position: ["20%",],
+					containerId: 'confirm-container',
+					containerCss: {
+						'height': '220px',
+						'width': '565px'
+					},
+					onClose: function (dialog) {
+						window.location.reload();
+					}
+				});
+			}
+		}
+		else {
+			executionIds = data.execIds;
+		}
+	};
+	$.ajax({
 		url: requestURL,
 		async: false,
-		data: {"ajax":"getRunning", "project":projectName, "flow":flowId},
+		data: {
+			"ajax": "getRunning", 
+			"project": projectName, 
+			"flow": flowId
+		},
 		error: function(data) {},
-		success: function(data) {
-			if (data.error == "session") {
-				// We need to relogin.
-				var errorDialog = document.getElementById("invalid-session");
-				if (errorDialog) {
-					  $(errorDialog).modal({
-					      closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-					      position: ["20%",],
-					      containerId: 'confirm-container',
-					      containerCss: {
-					        'height': '220px',
-					        'width': '565px'
-					      },
-					      onClose: function (dialog) {
-					      	window.location.reload();
-					      }
-					    });
-				}
-			}
-			else {
-				executionIds = data.execIds;
-			}
-		}
+		success: successHandler
 	});
 	
 	return executionIds;

diff --git a/src/web/js/azkaban.common.utils.js b/src/web/js/azkaban.common.utils.js
index 411de17..147bb94 100644
--- a/src/web/js/azkaban.common.utils.js
+++ b/src/web/js/azkaban.common.utils.js
@@ -16,9 +16,9 @@
 
 function addClass(el, name) {
 	if (!hasClass(el, name)) { 
-			var classes = el.getAttribute("class");
-			classes += classes ? ' ' + name : '' +name;
-			el.setAttribute("class", classes);
+		var classes = el.getAttribute("class");
+		classes += classes ? ' ' + name : '' +name;
+		el.setAttribute("class", classes);
 	}
 }
 
@@ -34,5 +34,5 @@ function hasClass(el, name) {
 	if (classes == null) {
 		return false;
 	}
-   return new RegExp('(\\s|^)'+name+'(\\s|$)').test(classes);
+	return new RegExp('(\\s|^)'+name+'(\\s|$)').test(classes);
 }

diff --git a/src/web/js/azkaban.context.menu.js b/src/web/js/azkaban.context.menu.js
index 0654c2b..0e92dd2 100644
--- a/src/web/js/azkaban.context.menu.js
+++ b/src/web/js/azkaban.context.menu.js
@@ -17,16 +17,18 @@
 $.namespace('azkaban');
 
 azkaban.ContextMenuView = Backbone.View.extend({
-	events :  {
+	events: {
 	},
-	initialize : function(settings) {
+	
+  initialize: function(settings) {
 		var div = this.el;
 		$('body').click(function(e) {
 			$(".contextMenu").remove();
 		});
 		$('body').bind("contextmenu", function(e) {$(".contextMenu").remove()});
 	},
-	show : function(evt, menu) {
+	
+  show: function(evt, menu) {
 		console.log("Show context menu");
 		$(".contextMenu").remove();
 		var x = evt.pageX;
@@ -36,14 +38,17 @@ azkaban.ContextMenuView = Backbone.View.extend({
 		$(contextMenu).css({top: y, left: x});
 		$(this.el).after(contextMenu);
 	},
-	hide : function(evt) {
+	
+  hide: function(evt) {
 		console.log("Hide context menu");
 		$(".contextMenu").remove();
 	},
-	handleClick: function(evt) {
+	
+  handleClick: function(evt) {
 		console.log("handling click");
 	},
-	setupMenu: function(menu) {
+	
+  setupMenu: function(menu) {
 		var contextMenu = document.createElement("div");
 		$(contextMenu).addClass("contextMenu");
 		var ul = document.createElement("ul");
@@ -53,51 +58,51 @@ azkaban.ContextMenuView = Backbone.View.extend({
 			var menuItem = document.createElement("li");
 			if (menu[i].break) {
 				$(menuItem).addClass("break");
+			  $(ul).append(menuItem);
+        continue;
 			}
-			else {
-				var title = menu[i].title;
-				var callback = menu[i].callback;
-				$(menuItem).addClass("menuitem");
-				$(menuItem).text(title);
-				menuItem.callback = callback;
-				$(menuItem).click(function() { 
-					$(contextMenu).hide(); 
-					this.callback.call();});
-					
-				if (menu[i].submenu) {
-					var expandSymbol = document.createElement("div");
-					$(expandSymbol).addClass("expandSymbol");
-					$(menuItem).append(expandSymbol);
-					
-					var subMenu = this.setupMenu(menu[i].submenu);
-					$(subMenu).addClass("subMenu");
-					subMenu.parent = contextMenu;
-					menuItem.subMenu = subMenu;
-					$(subMenu).hide();
-					$(this.el).after(subMenu);
-					
-					$(menuItem).mouseenter(function() {
-						$(".subMenu").hide();
-						var menuItem = this;
-						menuItem.selected = true;
-						setTimeout(function() {
-							if (menuItem.selected) {
-								var offset = $(menuItem).offset();
-								var left = offset.left;
-								var top = offset.top;
-								var width = $(menuItem).width();
-								var subMenu = menuItem.subMenu;
-								
-								var newLeft = left + width - 5;
-								$(subMenu).css({left: newLeft, top: top});
-								$(subMenu).show();
-							}
-						}, 500);
-					});
-					$(menuItem).mouseleave(function() {this.selected = false;});
-				}
-			}
-
+      var title = menu[i].title;
+      var callback = menu[i].callback;
+      $(menuItem).addClass("menuitem");
+      $(menuItem).text(title);
+      menuItem.callback = callback;
+      $(menuItem).click(function() { 
+        $(contextMenu).hide(); 
+        this.callback.call();
+      });
+        
+      if (menu[i].submenu) {
+        var expandSymbol = document.createElement("div");
+        $(expandSymbol).addClass("expandSymbol");
+        $(menuItem).append(expandSymbol);
+        
+        var subMenu = this.setupMenu(menu[i].submenu);
+        $(subMenu).addClass("subMenu");
+        subMenu.parent = contextMenu;
+        menuItem.subMenu = subMenu;
+        $(subMenu).hide();
+        $(this.el).after(subMenu);
+        
+        $(menuItem).mouseenter(function() {
+          $(".subMenu").hide();
+          var menuItem = this;
+          menuItem.selected = true;
+          setTimeout(function() {
+            if (menuItem.selected) {
+              var offset = $(menuItem).offset();
+              var left = offset.left;
+              var top = offset.top;
+              var width = $(menuItem).width();
+              var subMenu = menuItem.subMenu;
+              
+              var newLeft = left + width - 5;
+              $(subMenu).css({left: newLeft, top: top});
+              $(subMenu).show();
+            }
+          }, 500);
+        });
+        $(menuItem).mouseleave(function() {this.selected = false;});
+      }
 			$(ul).append(menuItem);
 		}
 

diff --git a/src/web/js/azkaban.date.utils.js b/src/web/js/azkaban.date.utils.js
index ce90f7b..a65ec50 100644
--- a/src/web/js/azkaban.date.utils.js
+++ b/src/web/js/azkaban.date.utils.js
@@ -67,7 +67,8 @@ var getDateFormat = function(date) {
 	var minutes = getTwoDigitStr(date.getMinutes());
 	var second = getTwoDigitStr(date.getSeconds());
 
-	var datestring = year + "-" + month + "-" + day + "  " + hours + ":" + minutes + " " + second + "s";
+	var datestring = year + "-" + month + "-" + day + "  " + hours + ":" + 
+			minutes + " " + second + "s";
 	return datestring;
 }
 

diff --git a/src/web/js/azkaban.exflow.view.js b/src/web/js/azkaban.exflow.view.js
index 377703b..4ac616b 100644
--- a/src/web/js/azkaban.exflow.view.js
+++ b/src/web/js/azkaban.exflow.view.js
@@ -28,12 +28,12 @@ var handleJobMenuClick = function(action, el, pos) {
 }
 
 var statusView;
-azkaban.StatusView= Backbone.View.extend({
-	initialize : function(settings) {
+azkaban.StatusView = Backbone.View.extend({
+	initialize: function(settings) {
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('change:update', this.statusUpdate, this);
 	},
-	render : function(evt) {
+	render: function(evt) {
 		var data = this.model.get("data");
 		
 		var user = data.submitUser;
@@ -41,7 +41,8 @@ azkaban.StatusView= Backbone.View.extend({
 		
 		this.statusUpdate(evt);
 	},
-	statusUpdate : function(evt) {
+	
+	statusUpdate: function(evt) {
 		var data = this.model.get("data");
 		
 		statusItem = $("#flowStatus");
@@ -83,202 +84,189 @@ azkaban.StatusView= Backbone.View.extend({
 });
 
 var flowTabView;
-azkaban.FlowTabView= Backbone.View.extend({
-  events : {
-  	"click #graphViewLink" : "handleGraphLinkClick",
-  	"click #jobslistViewLink" : "handleJobslistLinkClick",
-  	"click #flowLogViewLink" : "handleLogLinkClick",
-  	"click #cancelbtn" : "handleCancelClick",
-  	"click #executebtn" : "handleRestartClick",
-  	"click #pausebtn" : "handlePauseClick",
-  	"click #resumebtn" : "handleResumeClick",
-  	"click #retrybtn" : "handleRetryClick"
-  },
-  initialize : function(settings) {
-  	$("#cancelbtn").hide();
-  	$("#executebtn").hide();
-  	$("#pausebtn").hide();
-  	$("#resumebtn").hide();
-  	$("#retrybtn").hide();
-  
- 	this.model.bind('change:graph', this.handleFlowStatusChange, this);
-	this.model.bind('change:update', this.handleFlowStatusChange, this);
-	
-  	var selectedView = settings.selectedView;
-  	if (selectedView == "jobslist") {
-  		this.handleJobslistLinkClick();
-  	}
-  	else {
-  		this.handleGraphLinkClick();
-  	}
-  },
-  render: function() {
-  	console.log("render graph");
-  },
-  handleGraphLinkClick: function(){
-  	$("#jobslistViewLink").removeClass("selected");
-  	$("#graphViewLink").addClass("selected");
-  	$("#flowLogViewLink").removeClass("selected");
-  	
-  	$("#jobListView").hide();
-  	$("#graphView").show();
-  	$("#flowLogView").hide();
-  },
-  handleJobslistLinkClick: function() {
-  	$("#graphViewLink").removeClass("selected");
-  	$("#jobslistViewLink").addClass("selected");
-  	$("#flowLogViewLink").removeClass("selected");
-  	
-  	$("#graphView").hide();
-  	$("#jobListView").show();
-  	$("#flowLogView").hide();
-  },
-  handleLogLinkClick: function() {
-  	$("#graphViewLink").removeClass("selected");
-  	$("#jobslistViewLink").removeClass("selected");
-  	$("#flowLogViewLink").addClass("selected");
-  	
-  	$("#graphView").hide();
-  	$("#jobListView").hide();
-  	$("#flowLogView").show();
-  },
-  handleFlowStatusChange: function() {
-  	var data = this.model.get("data");
-  	$("#cancelbtn").hide();
-  	$("#executebtn").hide();
-  	$("#pausebtn").hide();
-  	$("#resumebtn").hide();
-  	$("#retrybtn").hide();
-
-  	if(data.status=="SUCCEEDED") {
-  	  	$("#executebtn").show();
-  	}
-  	else if (data.status=="FAILED") {
-  		$("#executebtn").show();
-  	}
-  	else if (data.status=="FAILED_FINISHING") {
-  		$("#cancelbtn").show();
-  		$("#executebtn").hide();
-  		$("#retrybtn").show();
-  	}
-  	else if (data.status=="RUNNING") {
-  		$("#cancelbtn").show();
-  		$("#pausebtn").show();
-  	}
-  	else if (data.status=="PAUSED") {
-  		$("#cancelbtn").show();
-  		$("#resumebtn").show();
-  	}
-  	else if (data.status=="WAITING") {
-  		$("#cancelbtn").show();
-  	}
-  	else if (data.status=="KILLED") {
-  		$("#executebtn").show();
-  	}
-  },
-  handleCancelClick : function(evt) {
-    var requestURL = contextURL + "/executor";
-	ajaxCall(
-		requestURL,
-		{"execid": execId, "ajax":"cancelFlow"},
-		function(data) {
-          console.log("cancel clicked");
-          if (data.error) {
-          	showDialog("Error", data.error);
-          }
-          else {
-            showDialog("Cancelled", "Flow has been cancelled.");
-
-            setTimeout(function() {updateStatus();}, 1100);
-          }
-      	}
-      );
-  },
-  handleRetryClick : function(evt) {
-      var graphData = graphModel.get("data");
-
-      var requestURL = contextURL + "/executor";
-	  ajaxCall(
-		requestURL,
-		{"execid": execId, "ajax":"retryFailedJobs"},
-		function(data) {
-          console.log("cancel clicked");
-          if (data.error) {
-          	showDialog("Error", data.error);
-          }
-          else {
-            showDialog("Retry", "Flow has been retried.");
-            setTimeout(function() {updateStatus();}, 1100);
-          }
-      	}
-      );
-  },
-  handleRestartClick : function(evt) {
-  	var data = graphModel.get("data");
-  	var nodes = data.nodes;
-  
-    var executingData = {
-  		project: projectName,
-  		ajax: "executeFlow",
-  		flow: flowId,
-  		execid: execId
-	};
-
-  	flowExecuteDialogView.show(executingData);
-  },
-  handlePauseClick : function(evt) {
-  	  var requestURL = contextURL + "/executor";
-		ajaxCall(
-	      requestURL,
-	      {"execid": execId, "ajax":"pauseFlow"},
-	      function(data) {
-	          console.log("pause clicked");
-	          if (data.error) {
-	          	showDialog("Error", data.error);
-	          }
-	          else {
-	            showDialog("Paused", "Flow has been paused.");
-	            
-            	setTimeout(function() {updateStatus();}, 1100);
-	          }
-	      }
-      );
-  },
-  handleResumeClick : function(evt) {
-     var requestURL = contextURL + "/executor";
-     ajaxCall(
-          requestURL,
-	      {"execid": execId, "ajax":"resumeFlow"},
-	      function(data) {
-	          console.log("pause clicked");
-	          if (data.error) {
-	          	showDialog("Error", data.error);
-	          }
-	          else {
-	          	showDialog("Resumed", "Flow has been resumed.");
-            	setTimeout(function() {updateStatus();}, 1100);
-	          }
-	      }
-	  );
-  }
+azkaban.FlowTabView = Backbone.View.extend({
+	events: {
+		"click #graphViewLink": "handleGraphLinkClick",
+		"click #jobslistViewLink": "handleJobslistLinkClick",
+		"click #flowLogViewLink": "handleLogLinkClick",
+		"click #cancelbtn": "handleCancelClick",
+		"click #executebtn": "handleRestartClick",
+		"click #pausebtn": "handlePauseClick",
+		"click #resumebtn": "handleResumeClick",
+		"click #retrybtn": "handleRetryClick"
+	},
+	
+	initialize: function(settings) {
+		$("#cancelbtn").hide();
+		$("#executebtn").hide();
+		$("#pausebtn").hide();
+		$("#resumebtn").hide();
+		$("#retrybtn").hide();
+	
+		this.model.bind('change:graph', this.handleFlowStatusChange, this);
+		this.model.bind('change:update', this.handleFlowStatusChange, this);
+	
+		var selectedView = settings.selectedView;
+		if (selectedView == "jobslist") {
+			this.handleJobslistLinkClick();
+		}
+		else {
+			this.handleGraphLinkClick();
+		}
+	},
+	
+	render: function() {
+		console.log("render graph");
+	},
+	
+	handleGraphLinkClick: function(){
+		$("#jobslistViewLink").removeClass("active");
+		$("#graphViewLink").addClass("active");
+		$("#flowLogViewLink").removeClass("active");
+		
+		$("#jobListView").hide();
+		$("#graphView").show();
+		$("#flowLogView").hide();
+	},
+	
+	handleJobslistLinkClick: function() {
+		$("#graphViewLink").removeClass("active");
+		$("#jobslistViewLink").addClass("active");
+		$("#flowLogViewLink").removeClass("active");
+		
+		$("#graphView").hide();
+		$("#jobListView").show();
+		$("#flowLogView").hide();
+	},
+	
+	handleLogLinkClick: function() {
+		$("#graphViewLink").removeClass("active");
+		$("#jobslistViewLink").removeClass("active");
+		$("#flowLogViewLink").addClass("active");
+		
+		$("#graphView").hide();
+		$("#jobListView").hide();
+		$("#flowLogView").show();
+	},
+	
+	handleFlowStatusChange: function() {
+		var data = this.model.get("data");
+		$("#cancelbtn").hide();
+		$("#executebtn").hide();
+		$("#pausebtn").hide();
+		$("#resumebtn").hide();
+		$("#retrybtn").hide();
+
+		if (data.status == "SUCCEEDED") {
+      $("#executebtn").show();
+		}
+		else if (data.status == "FAILED") {
+			$("#executebtn").show();
+		}
+		else if (data.status == "FAILED_FINISHING") {
+			$("#cancelbtn").show();
+			$("#executebtn").hide();
+			$("#retrybtn").show();
+		}
+		else if (data.status == "RUNNING") {
+			$("#cancelbtn").show();
+			$("#pausebtn").show();
+		}
+		else if (data.status == "PAUSED") {
+			$("#cancelbtn").show();
+			$("#resumebtn").show();
+		}
+		else if (data.status == "WAITING") {
+			$("#cancelbtn").show();
+		}
+		else if (data.status == "KILLED") {
+			$("#executebtn").show();
+		}
+	},
+	
+	handleCancelClick: function(evt) {
+		var requestURL = contextURL + "/executor";
+		var requestData = {"execid": execId, "ajax": "cancelFlow"};
+		var successHandler = function(data) {
+			console.log("cancel clicked");
+			if (data.error) {
+				showDialog("Error", data.error);
+			}
+			else {
+				showDialog("Cancelled", "Flow has been cancelled.");
+				setTimeout(function() {updateStatus();}, 1100);
+			}
+		};
+		ajaxCall(requestURL, requestData, successHandler);
+	},
+	
+	handleRetryClick: function(evt) {
+		var graphData = graphModel.get("data");
+		var requestURL = contextURL + "/executor";
+		var requestData = {"execid": execId, "ajax": "retryFailedJobs"};
+		var successHandler = function(data) {
+			console.log("cancel clicked");
+			if (data.error) {
+				showDialog("Error", data.error);
+			}
+			else {
+				showDialog("Retry", "Flow has been retried.");
+				setTimeout(function() {updateStatus();}, 1100);
+			}
+		};
+		ajaxCall(requestURL, requestData, successHandler);
+	},
+	
+	handleRestartClick: function(evt) {
+    console.log("handleRestartClick");
+		var data = graphModel.get("data");
+		var nodes = data.nodes;
+		var executingData = {
+			project: projectName,
+			ajax: "executeFlow",
+			flow: flowId,
+			execid: execId
+		};
+		flowExecuteDialogView.show(executingData);
+	},
+	
+	handlePauseClick: function(evt) {
+		var requestURL = contextURL + "/executor";
+		var requestData = {"execid": execId, "ajax":"pauseFlow"};
+		var successHandler = function(data) {
+			console.log("pause clicked");
+			if (data.error) {
+				showDialog("Error", data.error);
+			}
+			else {
+				showDialog("Paused", "Flow has been paused.");
+				setTimeout(function() {updateStatus();}, 1100);
+			}
+		};
+		ajaxCall(requestURL, requestData, successHandler);
+	},
+	
+	handleResumeClick: function(evt) {
+		var requestURL = contextURL + "/executor";
+		var requestData = {"execid": execId, "ajax":"resumeFlow"};
+		var successHandler = function(data) {
+			console.log("pause clicked");
+			if (data.error) {
+				showDialog("Error", data.error);
+			}
+			else {
+				showDialog("Resumed", "Flow has been resumed.");
+				setTimeout(function() {updateStatus();}, 1100);
+			}
+		};
+		ajaxCall(requestURL, requestData, successHandler);
+	}
 });
 
 var showDialog = function(title, message) {
-  $('#messageTitle').text(title);
-
-  $('#messageBox').text(message);
-
-  $('#messageDialog').modal({
-      closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-      position: ["20%",],
-      containerId: 'confirm-container',
-      containerCss: {
-        'height': '220px',
-        'width': '565px'
-      },
-      onShow: function (dialog) {
-      }
-    });
+	$('#messageTitle').text(title);
+	$('#messageBox').text(message);
+	$('#messageDialog').modal();
 }
 
 var jobListView;
@@ -287,19 +275,22 @@ var mainSvgGraphView;
 var executionListView;
 azkaban.ExecutionListView = Backbone.View.extend({
 	events: {
-//		"click .progressBox" : "handleProgressBoxClick"
+		//"click .flow-progress-bar": "handleProgressBoxClick"
 	},
+	
 	initialize: function(settings) {
 		this.model.bind('change:graph', this.renderJobs, this);
 		this.model.bind('change:update', this.updateJobs, this);
 	},
+	
 	renderJobs: function(evt) {
 		var data = this.model.get("data");
 		var lastTime = data.endTime == -1 ? (new Date()).getTime() : data.endTime;
 		this.updateJobRow(data.nodes);
 		this.updateProgressBar(data);
 	},
-/*	handleProgressBoxClick: function(evt) {
+
+	/*handleProgressBoxClick: function(evt) {
 		var target = evt.currentTarget;
 		var job = target.job;
 		var attempt = target.attempt;
@@ -317,6 +308,7 @@ azkaban.ExecutionListView = Backbone.View.extend({
 	
 		contextMenuView.show(evt, menu);
 	},*/
+	
 	updateJobs: function(evt) {
 		var data = this.model.get("update");
 		var lastTime = data.endTime == -1 ? (new Date()).getTime() : data.endTime;
@@ -324,84 +316,87 @@ azkaban.ExecutionListView = Backbone.View.extend({
 		this.updateJobRow(data.nodes);
 		this.updateProgressBar(this.model.get("data"));
 	},
+	
 	updateJobRow: function(nodes) {
 		var executingBody = $("#executableBody");
 		nodes.sort(function(a,b) { return a.startTime - b.startTime; });
 		
 		for (var i = 0; i < nodes.length; ++i) {
 			var node = nodes[i];
-			if (node.startTime > -1) {
-				var nodeId = node.id.replace(".", "\\\\.");
-				var row = document.getElementById(nodeId + "-row");
-				if (!row) {
-					this.addNodeRow(node);
-				}
-				
-				var div = $("#" + nodeId + "-status-div");
-				div.text(statusStringMap[node.status]);
-				$(div).attr("class", "status " + node.status);
-				
-				var startdate = new Date(node.startTime);
-				$("#" + nodeId + "-start").text(getDateFormat(startdate));
-				
-				var endTime = node.endTime;
-				if (node.endTime == -1) {
-					$("#" + nodeId + "-end").text("-");
-					endTime = node.startTime + 1;
-				}
-				else {
-					var enddate = new Date(node.endTime);
-					$("#" + nodeId + "-end").text(getDateFormat(enddate));
-				}
-				
-				var progressBar = $("#" + nodeId + "-progressbar");
-				if (!progressBar.hasClass(node.status)) {
-					for (var j = 0; j < statusList.length; ++j) {
-						var status = statusList[j];
-						progressBar.removeClass(status);
-					}
-					progressBar.addClass(node.status);
-				}
-				
-				// Create past attempts
-				if (node.pastAttempts) {
-					for (var a = 0; a < node.pastAttempts.length; ++a) {
-						var attemptBarId = nodeId + "-progressbar-" + a;
-						var attempt = node.pastAttempts[a];
-						if ($("#" + attemptBarId).length == 0) {
-							var attemptBox = document.createElement("div");
-							$(attemptBox).attr("id", attemptBarId);
-							$(attemptBox).addClass("progressBox");
-							$(attemptBox).addClass("attempt");
-							$(attemptBox).addClass(attempt.status);
-							$(attemptBox).css("float","left");
-							$(attemptBox).bind("contextmenu", attemptRightClick);
-							$(progressBar).before(attemptBox);
-							attemptBox.job = nodeId;
-							attemptBox.attempt = a;
-						}
-					}
-				}
-				
-				if (node.endTime == -1) {
-//					$("#" + node.id + "-elapse").text("0 sec");
-					$("#" + nodeId + "-elapse").text(getDuration(node.startTime, (new Date()).getTime()));					
-				}
-				else {
-					$("#" + nodeId + "-elapse").text(getDuration(node.startTime, node.endTime));
-				}
-			}
+			if (node.startTime < 0) {
+        continue;
+      }
+      var nodeId = node.id.replace(".", "\\\\.");
+      var row = document.getElementById(nodeId + "-row");
+      if (!row) {
+        this.addNodeRow(node);
+      }
+      
+      var div = $("#" + nodeId + "-status-div");
+      div.text(statusStringMap[node.status]);
+      $(div).attr("class", "status " + node.status);
+      
+      var startdate = new Date(node.startTime);
+      $("#" + nodeId + "-start").text(getDateFormat(startdate));
+      
+      var endTime = node.endTime;
+      if (node.endTime == -1) {
+        $("#" + nodeId + "-end").text("-");
+        endTime = node.startTime + 1;
+      }
+      else {
+        var enddate = new Date(node.endTime);
+        $("#" + nodeId + "-end").text(getDateFormat(enddate));
+      }
+      
+      var progressBar = $("#" + nodeId + "-progressbar");
+      if (!progressBar.hasClass(node.status)) {
+        for (var j = 0; j < statusList.length; ++j) {
+          var status = statusList[j];
+          progressBar.removeClass(status);
+        }
+        progressBar.addClass(node.status);
+      }
+      
+      // Create past attempts
+      if (node.pastAttempts) {
+        for (var a = 0; a < node.pastAttempts.length; ++a) {
+          var attemptBarId = nodeId + "-progressbar-" + a;
+          var attempt = node.pastAttempts[a];
+          if ($("#" + attemptBarId).length == 0) {
+            var attemptBox = document.createElement("div");
+            $(attemptBox).attr("id", attemptBarId);
+            $(attemptBox).addClass("flow-progress-bar");
+            $(attemptBox).addClass("attempt");
+            $(attemptBox).addClass(attempt.status);
+            $(attemptBox).css("float","left");
+            $(attemptBox).bind("contextmenu", attemptRightClick);
+            $(progressBar).before(attemptBox);
+            attemptBox.job = nodeId;
+            attemptBox.attempt = a;
+          }
+        }
+      }
+      
+      if (node.endTime == -1) {
+        //$("#" + node.id + "-elapse").text("0 sec");
+        $("#" + nodeId + "-elapse").text(getDuration(node.startTime, (new Date()).getTime()));					
+      }
+      else {
+        $("#" + nodeId + "-elapse").text(getDuration(node.startTime, node.endTime));
+      }
 		}
 	},
+	
 	updateProgressBar: function(data) {
-		if(data.startTime == -1) {
+		if (data.startTime == -1) {
 			return;
 		}
 		
 		var flowLastTime = data.endTime == -1 ? (new Date()).getTime() : data.endTime;
 		var flowStartTime = data.startTime;
 
-		var outerWidth = $(".outerProgress").css("width");
+		var outerWidth = $(".flow-progress").css("width");
 		if (outerWidth) {
 			if (outerWidth.substring(outerWidth.length - 2, outerWidth.length) == "px") {
 				outerWidth = outerWidth.substring(0, outerWidth.length - 2);
@@ -424,24 +419,24 @@ azkaban.ExecutionListView = Backbone.View.extend({
 			
 			// Add all the attempts
 			if (node.pastAttempts) {
-				var logURL = contextURL + "/executor?execid=" + execId + "&job=" + node.id + "&attempt=" +  node.pastAttempts.length;
+				var logURL = contextURL + "/executor?execid=" + execId + "&job=" + node.id + "&attempt=" +	node.pastAttempts.length;
 				var aId = node.id + "-log-link";
 				$("#" + aId).attr("href", logURL);
 				elem.attempt = node.pastAttempts.length;
 				
 				// Calculate the node attempt bars
-				for(var p = 0; p < node.pastAttempts.length; ++p) {
+				for (var p = 0; p < node.pastAttempts.length; ++p) {
 					var pastAttempt = node.pastAttempts[p];
 					var pastAttemptBox = $("#" + nodeId + "-progressbar-" + p);
 					
 					var left = (pastAttempt.startTime - flowStartTime)*factor;
-					var width =  Math.max((pastAttempt.endTime - pastAttempt.startTime)*factor, 3);
+					var width =	Math.max((pastAttempt.endTime - pastAttempt.startTime)*factor, 3);
 					
 					var margin = left - offsetLeft;
 					$(pastAttemptBox).css("margin-left", left - offsetLeft);
 					$(pastAttemptBox).css("width", width);
 					
-					$(pastAttemptBox).attr("title", "attempt:" + p + "  start:" + getHourMinSec(new Date(pastAttempt.startTime)) + "  end:" + getHourMinSec(new Date(pastAttempt.endTime)));
+					$(pastAttemptBox).attr("title", "attempt:" + p + "	start:" + getHourMinSec(new Date(pastAttempt.startTime)) + "	end:" + getHourMinSec(new Date(pastAttempt.endTime)));
 					offsetLeft += width + margin;
 				}
 			}
@@ -454,9 +449,10 @@ azkaban.ExecutionListView = Backbone.View.extend({
 			
 			elem.css("margin-left", left)
 			elem.css("width", width);
-			elem.attr("title", "attempt:" + elem.attempt + "  start:" + getHourMinSec(new Date(node.startTime)) + "  end:" + getHourMinSec(new Date(node.endTime)));
+			elem.attr("title", "attempt:" + elem.attempt + "	start:" + getHourMinSec(new Date(node.startTime)) + "	end:" + getHourMinSec(new Date(node.endTime)));
 		}
 	},
+	
 	addNodeRow: function(node) {
 		var executingBody = $("#executableBody");
 		var tr = document.createElement("tr");
@@ -466,7 +462,7 @@ azkaban.ExecutionListView = Backbone.View.extend({
 		var tdEnd = document.createElement("td");
 		var tdElapse = document.createElement("td");
 		var tdStatus = document.createElement("td");
-		var tdLog = document.createElement("td");
+		var tdDetails = document.createElement("td");
 		
 		$(tr).append(tdName);
 		$(tr).append(tdTimeline);
@@ -474,7 +470,7 @@ azkaban.ExecutionListView = Backbone.View.extend({
 		$(tr).append(tdEnd);
 		$(tr).append(tdElapse);
 		$(tr).append(tdStatus);
-		$(tr).append(tdLog);
+		$(tr).append(tdDetails);
 		$(tr).attr("id", node.id + "-row");
 		$(tdTimeline).attr("id", node.id + "-timeline");
 		$(tdStart).attr("id", node.id + "-start");
@@ -484,12 +480,12 @@ azkaban.ExecutionListView = Backbone.View.extend({
 
 		var outerProgressBar = document.createElement("div");
 		$(outerProgressBar).attr("id", node.id + "-outerprogressbar");
-		$(outerProgressBar).addClass("outerProgress");
+		$(outerProgressBar).addClass("flow-progress");
 
 		var progressBox = document.createElement("div");
 		progressBox.job = node.id;
 		$(progressBox).attr("id", node.id + "-progressbar");
-		$(progressBox).addClass("progressBox");
+		$(progressBox).addClass("flow-progress-bar");
 		$(outerProgressBar).append(progressBox);
 		$(tdTimeline).append(outerProgressBar);
 		$(tdTimeline).addClass("timeline");
@@ -513,10 +509,10 @@ azkaban.ExecutionListView = Backbone.View.extend({
 		var a = document.createElement("a");
 		$(a).attr("href", logURL);
 		$(a).attr("id", node.id + "-log-link");
-		$(a).text("Log");
-		$(tdLog).addClass("logLink");
-		$(tdLog).append(a);
-
+		$(a).text("Details");
+		$(tdDetails).addClass("details");
+		$(tdDetails).append(a);
+		
 		executingBody.append(tr);
 	}
 });
@@ -536,31 +532,36 @@ azkaban.FlowLogView = Backbone.View.extend({
 		var model = this.model;
 		console.log("fetchLogs offset is " + offset)
 
-		$.ajax({async:false, 
-			url:requestURL,
-			data:{"execid": execId, "ajax":"fetchExecFlowLogs", "offset": offset, "length": 50000},
-			success:
-				function(data) {
-					console.log("fetchLogs");
-					if (data.error) {
-						console.log(data.error);
+		$.ajax({
+			async: false, 
+			url: requestURL,
+			data: {
+				"execid": execId, 
+				"ajax": "fetchExecFlowLogs", 
+				"offset": offset, 
+				"length": 50000
+			},
+			success: function(data) {
+				console.log("fetchLogs");
+				if (data.error) {
+					console.log(data.error);
+				}
+				else {
+					var log = $("#logSection").text();
+					if (!log) {
+						log = data.data;
 					}
 					else {
-						var log = $("#logSection").text();
-						if (!log) {
-							log = data.data;
-						}
-						else {
-							log += data.data;
-						}
-	
-						var newOffset = data.offset + data.length;
-	
-						$("#logSection").text(log);
-						model.set({"offset": newOffset, "log": log});
-						$(".logViewer").scrollTop(9999);
+						log += data.data;
 					}
+
+					var newOffset = data.offset + data.length;
+
+					$("#logSection").text(log);
+					model.set({"offset": newOffset, "log": log});
+					$(".logViewer").scrollTop(9999);
 				}
+			}
 		});
 	}
 });
@@ -576,48 +577,57 @@ var updateStatus = function() {
 	var oldData = graphModel.get("data");
 	var nodeMap = graphModel.get("nodeMap");
 	
-	ajaxCall(
-	      requestURL,
-	      {"execid": execId, "ajax":"fetchexecflowupdate", "lastUpdateTime": updateTime},
-	      function(data) {
-	          console.log("data updated");
-	          updateTime = data.updateTime;
-	          oldData.submitTime = data.submitTime;
-	          oldData.startTime = data.startTime;
-	          oldData.endTime = data.endTime;
-	          oldData.status = data.status;
-	          
-	          for (var i = 0; i < data.nodes.length; ++i) {
-	          	var node = data.nodes[i];
-	          	var oldNode = nodeMap[node.id];
-	          	oldNode.startTime = node.startTime;
-	          	oldNode.updateTime = node.updateTime;
-	          	oldNode.endTime = node.endTime;
-	          	oldNode.status = node.status;
-	          	oldNode.attempt = node.attempt;
-	          	if (oldNode.attempt > 0) {
-	          		oldNode.pastAttempts = node.pastAttempts;
-	          	}
-	          }
-
-	          graphModel.set({"update": data});
-	          graphModel.trigger("change:update");
-	      });
+	var requestData = {
+		"execid": execId, 
+		"ajax": "fetchexecflowupdate", 
+		"lastUpdateTime": updateTime
+	};
+
+	var successHandler = function(data) {
+		console.log("data updated");
+		updateTime = data.updateTime;
+		oldData.submitTime = data.submitTime;
+		oldData.startTime = data.startTime;
+		oldData.endTime = data.endTime;
+		oldData.status = data.status;
+		
+		for (var i = 0; i < data.nodes.length; ++i) {
+			var node = data.nodes[i];
+			var oldNode = nodeMap[node.id];
+			oldNode.startTime = node.startTime;
+			oldNode.updateTime = node.updateTime;
+			oldNode.endTime = node.endTime;
+			oldNode.status = node.status;
+			oldNode.attempt = node.attempt;
+			if (oldNode.attempt > 0) {
+				oldNode.pastAttempts = node.pastAttempts;
+			}
+		}
+
+		graphModel.set({"update": data});
+		graphModel.trigger("change:update");
+	};
+	ajaxCall(requestURL, requestData, successHandler);
 }
 
 var updateTime = -1;
 var updaterFunction = function() {
 	var oldData = graphModel.get("data");
-	var keepRunning = oldData.status != "SUCCEEDED" && oldData.status != "FAILED" && oldData.status != "KILLED";
+	var keepRunning = 
+			oldData.status != "SUCCEEDED" && 
+			oldData.status != "FAILED" && 
+			oldData.status != "KILLED";
 
 	if (keepRunning) {
 		updateStatus();
 
 		var data = graphModel.get("data");
-		if (data.status == "UNKNOWN" || data.status == "WAITING" || data.status == "PREPARING") {
+		if (data.status == "UNKNOWN" || 
+				data.status == "WAITING" || 
+				data.status == "PREPARING") {
 			setTimeout(function() {updaterFunction();}, 1000);
 		}
-		else if (data.status != "SUCCEEDED" && data.status != "FAILED" ) {
+		else if (data.status != "SUCCEEDED" && data.status != "FAILED") {
 			// 5 sec updates
 			setTimeout(function() {updaterFunction();}, 5000);
 		}
@@ -632,7 +642,10 @@ var updaterFunction = function() {
 
 var logUpdaterFunction = function() {
 	var oldData = graphModel.get("data");
-	var keepRunning = oldData.status != "SUCCEEDED" && oldData.status != "FAILED" && oldData.status != "KILLED";
+	var keepRunning = 
+			oldData.status != "SUCCEEDED" && 
+			oldData.status != "FAILED" && 
+			oldData.status != "KILLED";
 	if (keepRunning) {
 		// update every 30 seconds for the logs until finished
 		flowLogView.handleUpdate();
@@ -650,9 +663,9 @@ var exNodeClickCallback = function(event) {
 	var visualizerURL = contextURL + "/pigvisualizer?execid=" + execId + "&jobid=" + jobId;
 
 	var menu = [	
-			{title: "Open Job...", callback: function() {window.location.href = requestURL;}},
-			{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
-			{title: "Visualize Job...", callback: function() {window.location.href = visualizerURL;}}
+		{title: "Open Job...", callback: function() {window.location.href = requestURL;}},
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
+		{title: "Visualize Job...", callback: function() {window.location.href = visualizerURL;}}
 	];
 
 	contextMenuView.show(event, menu);
@@ -665,9 +678,9 @@ var exJobClickCallback = function(event) {
 	var visualizerURL = contextURL + "/pigvisualizer?execid=" + execId + "&jobid=" + jobId;
 
 	var menu = [	
-			{title: "Open Job...", callback: function() {window.location.href = requestURL;}},
-			{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
-			{title: "Visualize Job...", callback: function() {window.location.href = visualizerURL;}}
+		{title: "Open Job...", callback: function() {window.location.href = requestURL;}},
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
+		{title: "Visualize Job...", callback: function() {window.location.href = visualizerURL;}}
 	];
 
 	contextMenuView.show(event, menu);
@@ -700,8 +713,8 @@ var attemptRightClick = function(event) {
 	var requestURL = contextURL + "/executor?project=" + projectName + "&execid=" + execId + "&job=" + job + "&attempt=" + attempt;
 
 	var menu = [	
-			{title: "Open Attempt Log...", callback: function() {window.location.href=requestURL;}},
-			{title: "Open Attempt Log in New Window...", callback: function() {window.open(requestURL);}}
+		{title: "Open Attempt Log...", callback: function() {window.location.href=requestURL;}},
+		{title: "Open Attempt Log in New Window...", callback: function() {window.open(requestURL);}}
 	];
 
 	contextMenuView.show(event, menu);
@@ -714,66 +727,92 @@ $(function() {
 	graphModel = new azkaban.GraphModel();
 	logModel = new azkaban.LogModel();
 	
-	flowTabView = new azkaban.FlowTabView({el:$( '#headertabs'), model: graphModel});
-	mainSvgGraphView = new azkaban.SvgGraphView({el:$('#svgDiv'), model: graphModel, rightClick:  { "node": exNodeClickCallback, "edge": exEdgeClickCallback, "graph": exGraphClickCallback }});
-	jobsListView = new azkaban.JobListView({el:$('#jobList'), model: graphModel, contextMenuCallback: exJobClickCallback});
-	flowLogView = new azkaban.FlowLogView({el:$('#flowLogView'), model: logModel});
-	statusView = new azkaban.StatusView({el:$('#flow-status'), model: graphModel});
+	flowTabView = new azkaban.FlowTabView({
+		el: $('#headertabs'), 
+		model: graphModel
+	});
+	
+  mainSvgGraphView = new azkaban.SvgGraphView({
+		el: $('#svgDiv'), 
+		model: graphModel, 
+		rightClick:	{ 
+			"node": exNodeClickCallback, 
+			"edge": exEdgeClickCallback, 
+			"graph": exGraphClickCallback 
+		}
+	});
+	
+  jobsListView = new azkaban.JobListView({
+		el: $('#jobList'), 
+		model: graphModel, 
+		contextMenuCallback: exJobClickCallback
+	});
+	
+  flowLogView = new azkaban.FlowLogView({
+		el: $('#flowLogView'), 
+		model: logModel
+	});
+	
+  statusView = new azkaban.StatusView({
+		el: $('#flow-status'), 
+		model: graphModel
+	});
 	
-	executionListView = new azkaban.ExecutionListView({el: $('#jobListView'), model:graphModel});
+	executionListView = new azkaban.ExecutionListView({
+		el: $('#jobListView'), 
+		model: graphModel
+	});
 	
 	var requestURL = contextURL + "/executor";
-
-	ajaxCall(
-	      requestURL,
-	      {"execid": execId, "ajax":"fetchexecflow"},
-	      function(data) {
-	          console.log("data fetched");
-	          graphModel.set({data: data});
-	          graphModel.set({disabled: {}});
-	          graphModel.trigger("change:graph");
-	          
-	          updateTime = Math.max(updateTime, data.submitTime);
-	          updateTime = Math.max(updateTime, data.startTime);
-	          updateTime = Math.max(updateTime, data.endTime);
-	          
-	          var nodeMap = {};
-	          for (var i = 0; i < data.nodes.length; ++i) {
-	             var node = data.nodes[i];
-	             nodeMap[node.id] = node;
-	             updateTime = Math.max(updateTime, node.startTime);
-	             updateTime = Math.max(updateTime, node.endTime);
-	          }
-	          for (var i = 0; i < data.edges.length; ++i) {
-	          	 var edge = data.edges[i];
-	          	 
-	          	 if (!nodeMap[edge.target].in) {
-	          	 	nodeMap[edge.target].in = {};
-	          	 }
-	          	 var targetInMap = nodeMap[edge.target].in;
-	          	 targetInMap[edge.from] = nodeMap[edge.from];
-	          	 
-	          	 if (!nodeMap[edge.from].out) {
-	          	 	nodeMap[edge.from].out = {};
-	          	 }
-	          	 var sourceOutMap = nodeMap[edge.from].out;
-	          	 sourceOutMap[edge.target] = nodeMap[edge.target];
-	          }
-	          
-	          graphModel.set({nodeMap: nodeMap});
-	          
-	          if (window.location.hash) {
-					var hash = window.location.hash;
-					if (hash == "#jobslist") {
-						flowTabView.handleJobslistLinkClick();
-					}
-					else if (hash == "#log") {
-						flowTabView.handleLogLinkClick();
-					}
-			 }
-	          
-	      	 updaterFunction();
-	      	 logUpdaterFunction();
-	      }
-	    );
+	var requestData = {"execid": execId, "ajax":"fetchexecflow"};
+	var successHandler = function(data) {
+		console.log("data fetched");
+		graphModel.set({data: data});
+		graphModel.set({disabled: {}});
+		graphModel.trigger("change:graph");
+		
+		updateTime = Math.max(updateTime, data.submitTime);
+		updateTime = Math.max(updateTime, data.startTime);
+		updateTime = Math.max(updateTime, data.endTime);
+		
+		var nodeMap = {};
+		for (var i = 0; i < data.nodes.length; ++i) {
+			var node = data.nodes[i];
+			nodeMap[node.id] = node;
+			updateTime = Math.max(updateTime, node.startTime);
+			updateTime = Math.max(updateTime, node.endTime);
+		}
+		for (var i = 0; i < data.edges.length; ++i) {
+			var edge = data.edges[i];
+			 
+			if (!nodeMap[edge.target].in) {
+				nodeMap[edge.target].in = {};
+			}
+			var targetInMap = nodeMap[edge.target].in;
+			targetInMap[edge.from] = nodeMap[edge.from];
+			 
+			if (!nodeMap[edge.from].out) {
+				nodeMap[edge.from].out = {};
+			}
+			var sourceOutMap = nodeMap[edge.from].out;
+			sourceOutMap[edge.target] = nodeMap[edge.target];
+		}
+		
+		graphModel.set({nodeMap: nodeMap});
+		if (window.location.hash) {
+			var hash = window.location.hash;
+			if (hash == "#jobslist") {
+				flowTabView.handleJobslistLinkClick();
+			}
+			else if (hash == "#log") {
+				flowTabView.handleLogLinkClick();
+			}
+		}
+		else {
+			flowTabView.handleGraphLinkClick();
+		}
+		updaterFunction();
+		logUpdaterFunction();
+	};
+	ajaxCall(requestURL, requestData, successHandler);
 });

diff --git a/src/web/js/azkaban.flow.execute.view.js b/src/web/js/azkaban.flow.execute.view.js
index c84ef57..d2940e3 100644
--- a/src/web/js/azkaban.flow.execute.view.js
+++ b/src/web/js/azkaban.flow.execute.view.js
@@ -18,7 +18,6 @@ $.namespace('azkaban');
 
 function recurseAllAncestors(nodes, disabledMap, id, disable) {
 	var node = nodes[id];
-	
 	if (node.in) {
 		for (var key in node.in) {
 			disabledMap[key] = disable;
@@ -29,7 +28,6 @@ function recurseAllAncestors(nodes, disabledMap, id, disable) {
 
 function recurseAllDescendents(nodes, disabledMap, id, disable) {
 	var node = nodes[id];
-	
 	if (node.out) {
 		for (var key in node.out) {
 			disabledMap[key] = disable;
@@ -39,267 +37,282 @@ function recurseAllDescendents(nodes, disabledMap, id, disable) {
 }
 
 var flowExecuteDialogView;
-azkaban.FlowExecuteDialogView= Backbone.View.extend({
-  events : {
-  	"click .closeExecPanel": "hideExecutionOptionPanel",
-  	"click #schedule-btn" : "scheduleClick",
-  	"click #execute-btn" : "handleExecuteFlow"
-  },
-  initialize : function(settings) {
-  	  this.model.bind('change:flowinfo', this.changeFlowInfo, this);
-  	  
-  	  $("#overrideSuccessEmails").click(function(evt) {
-		 if($(this).is(':checked')){
-		 	$('#successEmails').attr('disabled',null);
-		 }
-		 else {
-		 	$('#successEmails').attr('disabled',"disabled");
-		 }
-  	  });
-  	  
-  	   $("#overrideFailureEmails").click(function(evt) {
-		 if($(this).is(':checked')){
-		 	$('#failureEmails').attr('disabled',null);
-		 }
-		 else {
-		 	$('#failureEmails').attr('disabled',"disabled");
-		 }
-  	  });
-  },
-  render: function() {
-  },
-  getExecutionOptionData: function() {
-	var failureAction = $('#failureAction').val();
-	var failureEmails = $('#failureEmails').val();
-	var successEmails = $('#successEmails').val();
-	var notifyFailureFirst = $('#notifyFailureFirst').is(':checked');
-	var notifyFailureLast = $('#notifyFailureLast').is(':checked');
-	var failureEmailsOverride = $("#overrideFailureEmails").is(':checked');
-	var successEmailsOverride = $("#overrideSuccessEmails").is(':checked');
-	
-	var flowOverride = {};
-	var editRows = $(".editRow");
-	for (var i = 0; i < editRows.length; ++i) {
-		var row = editRows[i];
-		var td = $(row).find('td');
-		var key = $(td[0]).text();
-		var val = $(td[1]).text();
+azkaban.FlowExecuteDialogView = Backbone.View.extend({
+	events: {
+		"click .closeExecPanel": "hideExecutionOptionPanel",
+		"click #schedule-btn": "scheduleClick",
+		"click #execute-btn": "handleExecuteFlow"
+	},
+	
+	initialize: function(settings) {
+		this.model.bind('change:flowinfo', this.changeFlowInfo, this);
+		$("#overrideSuccessEmails").click(function(evt) {
+			if ($(this).is(':checked')) {
+				$('#successEmails').attr('disabled', null);
+			}
+			else {
+				$('#successEmails').attr('disabled', "disabled");
+			}
+		});
+				
+		$("#overrideFailureEmails").click(function(evt) {
+			if ($(this).is(':checked')) {
+				$('#failureEmails').attr('disabled', null);
+			}
+			else {
+				$('#failureEmails').attr('disabled', "disabled");
+			}
+		});
+	},
+	
+	render: function() {
+	},
+	
+	getExecutionOptionData: function() {
+		var failureAction = $('#failureAction').val();
+		var failureEmails = $('#failureEmails').val();
+		var successEmails = $('#successEmails').val();
+		var notifyFailureFirst = $('#notifyFailureFirst').is(':checked');
+		var notifyFailureLast = $('#notifyFailureLast').is(':checked');
+		var failureEmailsOverride = $("#overrideFailureEmails").is(':checked');
+		var successEmailsOverride = $("#overrideSuccessEmails").is(':checked');
 		
-		if (key && key.length > 0) {
-			flowOverride[key] = val;
+		var flowOverride = {};
+		var editRows = $(".editRow");
+		for (var i = 0; i < editRows.length; ++i) {
+			var row = editRows[i];
+			var td = $(row).find('td');
+			var key = $(td[0]).text();
+			var val = $(td[1]).text();
+			
+			if (key && key.length > 0) {
+				flowOverride[key] = val;
+			}
 		}
-	}
-	
-	var disabled = "";
-	var disabledMap = this.model.get('disabled');
-	for (var dis in disabledMap) {
-		if (disabledMap[dis]) {
-			disabled += dis + ",";
+		
+		var disabled = "";
+		var disabledMap = this.model.get('disabled');
+		for (var dis in disabledMap) {
+			if (disabledMap[dis]) {
+				disabled += dis + ",";
+			}
 		}
-	}
-	
-	var executingData = {
-		projectId: projectId,
-		project: this.projectName,
-		ajax: "executeFlow",
-		flow: this.flowId,
-		disabled: disabled,
-		failureEmailsOverride:failureEmailsOverride,
-		successEmailsOverride:successEmailsOverride,
-		failureAction: failureAction,
-		failureEmails: failureEmails,
-		successEmails: successEmails,
-		notifyFailureFirst: notifyFailureFirst,
-		notifyFailureLast: notifyFailureLast,
-		flowOverride: flowOverride
-	};
-	
-	// Set concurrency option, default is skip
-
-	var concurrentOption = $('input[name=concurrent]:checked').val();
-	executingData.concurrentOption = concurrentOption;
-	if (concurrentOption == "pipeline") {
-		var pipelineLevel = $("#pipelineLevel").val();
-		executingData.pipelineLevel = pipelineLevel;
-	}
-	else if (concurrentOption == "queue") {
-		executingData.queueLevel = $("#queueLevel").val();
-	}
+		
+		var executingData = {
+			projectId: projectId,
+			project: this.projectName,
+			ajax: "executeFlow",
+			flow: this.flowId,
+			disabled: disabled,
+			failureEmailsOverride:failureEmailsOverride,
+			successEmailsOverride:successEmailsOverride,
+			failureAction: failureAction,
+			failureEmails: failureEmails,
+			successEmails: successEmails,
+			notifyFailureFirst: notifyFailureFirst,
+			notifyFailureLast: notifyFailureLast,
+			flowOverride: flowOverride
+		};
+		
+		// Set concurrency option, default is skip
+
+		var concurrentOption = $('input[name=concurrent]:checked').val();
+		executingData.concurrentOption = concurrentOption;
+		if (concurrentOption == "pipeline") {
+			var pipelineLevel = $("#pipelineLevel").val();
+			executingData.pipelineLevel = pipelineLevel;
+		}
+		else if (concurrentOption == "queue") {
+			executingData.queueLevel = $("#queueLevel").val();
+		}
+		
+		return executingData;
+	},
 	
-	return executingData;
-  },
-  changeFlowInfo: function() {
-  	var successEmails = this.model.get("successEmails");
-  	var failureEmails = this.model.get("failureEmails");
-  	var failureActions = this.model.get("failureAction");
-  	var notifyFailure = this.model.get("notifyFailure");
-  	var flowParams = this.model.get("flowParams");
-  	var isRunning = this.model.get("isRunning");
-  	var concurrentOption = this.model.get("concurrentOption");
-  	var pipelineLevel = this.model.get("pipelineLevel");
-  	var pipelineExecutionId = this.model.get("pipelineExecution");
-  	var queueLevel = this.model.get("queueLevel");
-  	var nodeStatus = this.model.get("nodeStatus");
-  	var overrideSuccessEmails = this.model.get("overrideSuccessEmails");
-  	var overrideFailureEmails = this.model.get("overrideFailureEmails");
-  	
-	if (overrideSuccessEmails) {
-		$('#overrideSuccessEmails').attr('checked', true);
-	}
-	else {
-		$('#successEmails').attr('disabled','disabled');
-	}
-	if (overrideFailureEmails) {
-		$('#overrideFailureEmails').attr('checked', true);
-	}
-	else {
-		$('#failureEmails').attr('disabled','disabled');
-	}
-  	
-  	if (successEmails) {
-  		$('#successEmails').val(successEmails.join());
-  	}
-  	if (failureEmails) {
-  		$('#failureEmails').val(failureEmails.join());
-  	}
-  	if (failureActions) {
+	changeFlowInfo: function() {
+		var successEmails = this.model.get("successEmails");
+		var failureEmails = this.model.get("failureEmails");
+		var failureActions = this.model.get("failureAction");
+		var notifyFailure = this.model.get("notifyFailure");
+		var flowParams = this.model.get("flowParams");
+		var isRunning = this.model.get("isRunning");
+		var concurrentOption = this.model.get("concurrentOption");
+		var pipelineLevel = this.model.get("pipelineLevel");
+		var pipelineExecutionId = this.model.get("pipelineExecution");
+		var queueLevel = this.model.get("queueLevel");
+		var nodeStatus = this.model.get("nodeStatus");
+		var overrideSuccessEmails = this.model.get("overrideSuccessEmails");
+		var overrideFailureEmails = this.model.get("overrideFailureEmails");
+		
+		if (overrideSuccessEmails) {
+			$('#overrideSuccessEmails').attr('checked', true);
+		}
+		else {
+			$('#successEmails').attr('disabled','disabled');
+		}
+		if (overrideFailureEmails) {
+			$('#overrideFailureEmails').attr('checked', true);
+		}
+		else {
+			$('#failureEmails').attr('disabled','disabled');
+		}
+		
+		if (successEmails) {
+			$('#successEmails').val(successEmails.join());
+		}
+		if (failureEmails) {
+			$('#failureEmails').val(failureEmails.join());
+		}
+		if (failureActions) {
 		$('#failureAction').val(failureActions);
-  	}
-  	
-  	if (notifyFailure.first) {
+		}
+		
+		if (notifyFailure.first) {
 		$('#notifyFailureFirst').attr('checked', true);
-  	}
-  	if (notifyFailure.last) {
-  		$('#notifyFailureLast').attr('checked', true);
-  	}
-  	
-  	if (concurrentOption) {
-  		$('input[value='+concurrentOption+'][name="concurrent"]').attr('checked', true);
-  	}
-  	if (pipelineLevel) {
-  		$('#pipelineLevel').val(pipelineLevel);
-  	}
-  	if (queueLevel) {
-  		$('#queueLevel').val(queueLevel);
-  	}
-  	
-  	if (nodeStatus) {
-  		var nodeMap = this.model.get("nodeMap");
-  
-  		var disabled = {};
-  		for (var key in nodeStatus) {
-  			var status = nodeStatus[key];
-  			
-  			var node = nodeMap[key];
-  			if (node) {
-  				node.status = status;
-  				
-				if (node.status == "DISABLED" || node.status == "SKIPPED") {
-					node.status = "READY";
-					disabled[node.id] = true;
-				}
-				if (node.status == "SUCCEEDED" || node.status=="RUNNING") {
-					disabled[node.id] = true;
+		}
+		if (notifyFailure.last) {
+			$('#notifyFailureLast').attr('checked', true);
+		}
+		
+		if (concurrentOption) {
+			$('input[value='+concurrentOption+'][name="concurrent"]').attr('checked', true);
+		}
+		if (pipelineLevel) {
+			$('#pipelineLevel').val(pipelineLevel);
+		}
+		if (queueLevel) {
+			$('#queueLevel').val(queueLevel);
+		}
+		
+		if (nodeStatus) {
+			var nodeMap = this.model.get("nodeMap");
+			var disabled = {};
+			for (var key in nodeStatus) {
+				var status = nodeStatus[key];
+				
+				var node = nodeMap[key];
+				if (node) {
+					node.status = status;
+					if (node.status == "DISABLED" || node.status == "SKIPPED") {
+						node.status = "READY";
+						disabled[node.id] = true;
+					}
+					if (node.status == "SUCCEEDED" || node.status=="RUNNING") {
+						disabled[node.id] = true;
+					}
 				}
-  			}
-  		}
-  		this.model.set({"disabled":disabled});
-  	}
-  	
-	if (flowParams) {
-		for (var key in flowParams) {
-			editTableView.handleAddRow({paramkey: key, paramvalue: flowParams[key]});
+			}
+			this.model.set({"disabled":disabled});
 		}
-	}
-  },
-  show: function(data) {
-  	var projectName = data.project;
-  	var flowId = data.flow;
-  	var jobId = data.job;
-  	
-  	// ExecId is optional
-  	var execId = data.execid;
-  
-  	var loadedId = executableGraphModel.get("flowId");
-  
-  	this.loadGraph(projectName, flowId);
-  	this.loadFlowInfo(projectName, flowId, execId);
-
-  	this.projectName = projectName;
-  	this.flowId = flowId;
-	if (jobId) {
-		this.showExecuteJob(projectName, flowId, jobId, data.withDep);
-	}
-	else {
-		this.showExecuteFlow(projectName, flowId);
-	}
-  },
-  showExecuteFlow: function(projectName, flowId) {
-	$("#execute-flow-panel-title").text("Execute Flow " + flowId);
-	this.showExecutionOptionPanel();
-
-	// Triggers a render
-	this.model.trigger("change:graph");
-  },
-  showExecuteJob: function(projectName, flowId, jobId, withDep) {
-	sideMenuDialogView.menuSelect($("#flowOption"));
-	$("#execute-flow-panel-title").text("Execute Flow " + flowId);
-	
-	var nodes = this.model.get("nodeMap");
-	var disabled = this.model.get("disabled");
-	
-	// Disable all, then re-enable those you want.
-	for(var key in nodes) {
-		disabled[key] = true;
-	}
+		
+		if (flowParams) {
+			for (var key in flowParams) {
+				editTableView.handleAddRow({
+					paramkey: key, 
+					paramvalue: flowParams[key]
+				});
+			}
+		}
+	},
 	
-	var jobNode = nodes[jobId];
-	disabled[jobId] = false;
+	show: function(data) {
+		var projectName = data.project;
+		var flowId = data.flow;
+		var jobId = data.job;
+		
+		// ExecId is optional
+		var execId = data.execid;
 	
-	if (withDep) {
-		recurseAllAncestors(nodes, disabled, jobId, false);
-	}
+		var loadedId = executableGraphModel.get("flowId");
+	
+		this.loadGraph(projectName, flowId);
+		this.loadFlowInfo(projectName, flowId, execId);
+
+		this.projectName = projectName;
+		this.flowId = flowId;
+		if (jobId) {
+			this.showExecuteJob(projectName, flowId, jobId, data.withDep);
+		}
+		else {
+			this.showExecuteFlow(projectName, flowId);
+		}
+	},
+	
+	showExecuteFlow: function(projectName, flowId) {
+		$("#execute-flow-panel-title").text("Execute Flow " + flowId);
+		this.showExecutionOptionPanel();
+
+		// Triggers a render
+		this.model.trigger("change:graph");
+	},
+	
+	showExecuteJob: function(projectName, flowId, jobId, withDep) {
+		sideMenuDialogView.menuSelect($("#flow-option"));
+		$("#execute-flow-panel-title").text("Execute Flow " + flowId);
+		
+		var nodes = this.model.get("nodeMap");
+		var disabled = this.model.get("disabled");
+		
+		// Disable all, then re-enable those you want.
+		for (var key in nodes) {
+			disabled[key] = true;
+		}
+		
+		var jobNode = nodes[jobId];
+		disabled[jobId] = false;
+		
+		if (withDep) {
+			recurseAllAncestors(nodes, disabled, jobId, false);
+		}
 
-	this.showExecutionOptionPanel();
-	this.model.trigger("change:graph");
-  },
-  showExecutionOptionPanel: function() {
-  	sideMenuDialogView.menuSelect($("#flowOption"));
-  	$('#modalBackground').show();
-  	$('#execute-flow-panel').show();
-  },
-  hideExecutionOptionPanel: function() {
-  	$('#modalBackground').hide();
-  	$('#execute-flow-panel').hide();
-  },
-  scheduleClick: function() {
-  	schedulePanelView.showSchedulePanel();
-  },
-  loadFlowInfo: function(projectName, flowId, execId) {
-    console.log("Loading flow " + flowId);
-	fetchFlowInfo(this.model, projectName, flowId, execId);
-  },
-  loadGraph: function(projectName, flowId) {
-  	console.log("Loading flow " + flowId);
-	fetchFlow(this.model, projectName, flowId, true);
-  },
-  handleExecuteFlow: function(evt) {
-  	  	var executeURL = contextURL + "/executor";
+		this.showExecutionOptionPanel();
+		this.model.trigger("change:graph");
+	},
+	
+	showExecutionOptionPanel: function() {
+		sideMenuDialogView.menuSelect($("#flow-option"));
+		$('#execute-flow-panel').modal();
+	},
+	
+	hideExecutionOptionPanel: function() {
+		$('#execute-flow-panel').modal("hide");
+	},
+	
+	scheduleClick: function() {
+		console.log("click schedule button.");
+		this.hideExecutionOptionPanel();
+		schedulePanelView.showSchedulePanel();
+	},
+	
+	loadFlowInfo: function(projectName, flowId, execId) {
+		console.log("Loading flow " + flowId);
+		fetchFlowInfo(this.model, projectName, flowId, execId);
+	},
+	
+	loadGraph: function(projectName, flowId) {
+		console.log("Loading flow " + flowId);
+		fetchFlow(this.model, projectName, flowId, true);
+	},
+	
+	handleExecuteFlow: function(evt) {
+		console.log("click schedule button.");
+		var executeURL = contextURL + "/executor";
 		var executingData = this.getExecutionOptionData();
 		executeFlow(executingData);
-  }
+	}
 });
 
 var editTableView;
 azkaban.EditTableView = Backbone.View.extend({
-	events : {
+	events: {
 		"click table .addRow": "handleAddRow",
 		"click table .editable": "handleEditColumn",
 		"click table .removeIcon": "handleRemoveColumn"
 	},
-	initialize: function(setting) {
 
+	initialize: function(setting) {
 	},
+	
 	handleAddRow: function(data) {
 		var name = "";
 		if (data.paramkey) {
@@ -311,36 +324,37 @@ azkaban.EditTableView = Backbone.View.extend({
 			value = data.paramvalue;
 		}
 	
-	  	var tr = document.createElement("tr");
-	  	var tdName = document.createElement("td");
-	    var tdValue = document.createElement("td");
-	    
-	    var icon = document.createElement("span");
-	    $(icon).addClass("removeIcon");
-	    var nameData = document.createElement("span");
-	    $(nameData).addClass("spanValue");
-	    $(nameData).text(name);
-	    var valueData = document.createElement("span");
-	    $(valueData).addClass("spanValue");
-	    $(valueData).text(value);
-	    	    
+		var tr = document.createElement("tr");
+		var tdName = document.createElement("td");
+		var tdValue = document.createElement("td");
+		
+		var icon = document.createElement("span");
+		$(icon).addClass("removeIcon");
+		var nameData = document.createElement("span");
+		$(nameData).addClass("spanValue");
+		$(nameData).text(name);
+		var valueData = document.createElement("span");
+		$(valueData).addClass("spanValue");
+		$(valueData).text(value);
+						
 		$(tdName).append(icon);
 		$(tdName).append(nameData);
 		$(tdName).addClass("name");
 		$(tdName).addClass("editable");
 		
 		$(tdValue).append(valueData);
-	    $(tdValue).addClass("editable");
+		$(tdValue).addClass("editable");
 		
 		$(tr).addClass("editRow");
-	  	$(tr).append(tdName);
-	  	$(tr).append(tdValue);
-	   
-	  	$(tr).insertBefore(".addRow");
-	  	return tr;
-	  },
-	  handleEditColumn : function(evt) {
-	  	var curTarget = evt.currentTarget;
+		$(tr).append(tdName);
+		$(tr).append(tdValue);
+	 
+		$(tr).insertBefore(".addRow");
+		return tr;
+	},
+	
+	handleEditColumn: function(evt) {
+		var curTarget = evt.currentTarget;
 	
 		var text = $(curTarget).children(".spanValue").text();
 		$(curTarget).empty();
@@ -359,105 +373,90 @@ azkaban.EditTableView = Backbone.View.extend({
 		});
 		
 		$(input).keypress(function(evt) {
-		    if(evt.which == 13) {
-		        obj.closeEditingTarget(evt);
-		    }
+			if (evt.which == 13) {
+				obj.closeEditingTarget(evt);
+			}
 		});
-
-	  },
-	  handleRemoveColumn : function(evt) {
-	  	var curTarget = evt.currentTarget;
-	  	// Should be the table
-	  	var row = curTarget.parentElement.parentElement;
+	},
+	
+	handleRemoveColumn: function(evt) {
+		var curTarget = evt.currentTarget;
+		// Should be the table
+		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
-	  },
-	  closeEditingTarget: function(evt) {
-  		var input = evt.currentTarget;
-  		var text = $(input).val();
-  		var parent = $(input).parent();
-  		$(parent).empty();
-
-	    var valueData = document.createElement("span");
-	    $(valueData).addClass("spanValue");
-	    $(valueData).text(text);
-
-		if($(parent).hasClass("name")) {
+	},
+	
+	closeEditingTarget: function(evt) {
+		var input = evt.currentTarget;
+		var text = $(input).val();
+		var parent = $(input).parent();
+		$(parent).empty();
+
+		var valueData = document.createElement("span");
+		$(valueData).addClass("spanValue");
+		$(valueData).text(text);
+
+		if ($(parent).hasClass("name")) {
 			var icon = document.createElement("span");
 			$(icon).addClass("removeIcon");
 			$(parent).append(icon);
 		}
-	    
-	    $(parent).removeClass("editing");
-	    $(parent).append(valueData);
-	  }
+		
+		$(parent).removeClass("editing");
+		$(parent).append(valueData);
+	}
 });
 
 var sideMenuDialogView;
-azkaban.SideMenuDialogView= Backbone.View.extend({
-	events : {
-		"click .menuHeader" : "menuClick"
-  	},
-  	initialize : function(settings) {
-  		var children = $(this.el).children();
-  		var currentParent;
-  		var parents = [];
-  		var realChildren = [];
-  		for (var i = 0; i < children.length; ++i ) {
-  			var child = children[i];
-  			if ((i % 2) == 0) {
-  				currentParent = child;
-  				$(child).addClass("menuHeader");
-  				parents.push(child);
-  			}
-  			else {
-  				$(child).addClass("menuContent");
-  				$(child).hide();
-  				currentParent.child = child;
-  				realChildren.push(child);
-  			}
-  		}
-  		
-  		this.menuSelect($("#flowOption"));
-  		
-  		this.parents = parents;
-  		this.children = realChildren;
-  	},
-  	menuClick : function(evt) {
-  		this.menuSelect(evt.currentTarget);
-  	},
-  	menuSelect : function(target) {
-  		if ($(target).hasClass("selected")) {
-  			return;
-  		}
-  		
-  		$(".sidePanel").each(function() {
-  			$(this).hide();
-  		});
-  		
-  		$(".menuHeader").each(function() {
-  			$(this.child).slideUp("fast");
-  			$(this).removeClass("selected");
-  		});
-  		
-  		$(".sidePanel").each(function() {
-  			$(this).hide();
-  		});
-  		
-  		$(target).addClass("selected");
-  		$(target.child).slideDown("fast");
-  		var panelName = $(target).attr("viewpanel");
-  		$("#" + panelName).show();
-  	}
+azkaban.SideMenuDialogView = Backbone.View.extend({
+	events: {
+		"click .menu-header": "menuClick"
+	},
+	
+	initialize: function(settings) {
+		var children = $(this.el).children();
+		for (var i = 0; i < children.length; ++i ) {
+			var child = children[i];
+			$(child).addClass("menu-header");
+			var caption = $(child).find(".menu-caption");
+			$(caption).hide();
+		}
+		this.menuSelect($("#flow-option"));
+	},
+	
+	menuClick: function(evt) {
+		this.menuSelect(evt.currentTarget);
+	},
+	
+	menuSelect: function(target) {
+		if ($(target).hasClass("active")) {
+			return;
+		}
+		
+		$(".side-panel").each(function() {
+			$(this).hide();
+		});
+		
+		$(".menu-header").each(function() {
+			$(this).find(".menu-caption").slideUp("fast");
+			$(this).removeClass("active");
+		});
+		
+		$(target).addClass("active");
+		$(target).find(".menu-caption").slideDown("fast");
+		var panelName = $(target).attr("viewpanel");
+		$("#" + panelName).show();
+	}
 });
 
 var handleJobMenuClick = function(action, el, pos) {
 	var jobid = el[0].jobid;
 	
-	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowName + "&job=" + jobid;
+	var requesgURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowName + "&job=" + jobid;
 	if (action == "open") {
 		window.location.href = requestURL;
 	}
-	else if(action == "openwindow") {
+	else if (action == "openwindow") {
 		window.open(requestURL);
 	}
 }
@@ -498,7 +497,7 @@ var touchParents = function(jobid, disable) {
 
 	if (inNodes) {
 		for (var key in inNodes) {
-		  disabled[key] = disable;
+			disabled[key] = disable;
 		}
 	}
 	
@@ -513,7 +512,7 @@ var touchChildren = function(jobid, disable) {
 
 	if (outNodes) {
 		for (var key in outNodes) {
-		  disabledMap[key] = disable;
+			disabledMap[key] = disable;
 		}
 	}
 	
@@ -547,24 +546,23 @@ var nodeClickCallback = function(event) {
 	var flowId = executableGraphModel.get("flowId");
 	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
 
-	var menu = [	{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
-			{break: 1},
-			{title: "Enable", callback: function() {touchNode(jobId, false);}, submenu: [
-									{title: "Parents", callback: function(){touchParents(jobId, false);}},
-									{title: "Ancestors", callback: function(){touchAncestors(jobId, false);}},
-									{title: "Children", callback: function(){touchChildren(jobId, false);}},
-									{title: "Descendents", callback: function(){touchDescendents(jobId, false);}},
-									{title: "Enable All", callback: function(){enableAll();}}
-								]
-			},
-			{title: "Disable", callback: function() {touchNode(jobId, true)}, submenu: [
-									{title: "Parents", callback: function(){touchParents(jobId, true);}},
-									{title: "Ancestors", callback: function(){touchAncestors(jobId, true);}},
-									{title: "Children", callback: function(){touchChildren(jobId, true);}},
-									{title: "Descendents", callback: function(){touchDescendents(jobId, true);}},
-									{title: "Disable All", callback: function(){disableAll();}}
-								]
-			}
+	var menu = [
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}},
+		{break: 1},
+		{title: "Enable", callback: function() {touchNode(jobId, false);}, submenu: [
+			{title: "Parents", callback: function(){touchParents(jobId, false);}},
+			{title: "Ancestors", callback: function(){touchAncestors(jobId, false);}},
+			{title: "Children", callback: function(){touchChildren(jobId, false);}},
+			{title: "Descendents", callback: function(){touchDescendents(jobId, false);}},
+			{title: "Enable All", callback: function(){enableAll();}}
+		]},
+		{title: "Disable", callback: function() {touchNode(jobId, true)}, submenu: [
+			{title: "Parents", callback: function(){touchParents(jobId, true);}},
+			{title: "Ancestors", callback: function(){touchAncestors(jobId, true);}},
+			{title: "Children", callback: function(){touchChildren(jobId, true);}},
+			{title: "Descendents", callback: function(){touchDescendents(jobId, true);}},
+			{title: "Disable All", callback: function(){disableAll();}}
+		]}
 	];
 
 	contextMenuView.show(event, menu);
@@ -579,7 +577,8 @@ var graphClickCallback = function(event) {
 	var flowId = executableGraphModel.get("flowId");
 	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
 	
-	var menu = [	{title: "Open Flow in New Window...", callback: function() {window.open(requestURL);}},
+	var menu = [
+		{title: "Open Flow in New Window...", callback: function() {window.open(requestURL);}},
 		{break: 1},
 		{title: "Enable All", callback: function() {enableAll();}},
 		{title: "Disable All", callback: function() {disableAll();}},
@@ -593,11 +592,30 @@ var graphClickCallback = function(event) {
 var contextMenuView;
 $(function() {
 	executableGraphModel = new azkaban.GraphModel();
-	flowExecuteDialogView = new azkaban.FlowExecuteDialogView({el:$('#execute-flow-panel'), model: executableGraphModel});
-	svgGraphView = new azkaban.SvgGraphView({el:$('#svgDivCustom'), model: executableGraphModel, topGId:"topG", graphMargin: 10, rightClick: { "node": nodeClickCallback, "edge": edgeClickCallback, "graph": graphClickCallback }});
+	flowExecuteDialogView = new azkaban.FlowExecuteDialogView({
+		el: $('#execute-flow-panel'), 
+		model: executableGraphModel
+	});
+	svgGraphView = new azkaban.SvgGraphView({
+		el: $('#svg-div-custom'), 
+		model: executableGraphModel, 
+		topGId: "topG", 
+		graphMargin: 10, 
+		rightClick: { 
+			"node": nodeClickCallback, 
+			"edge": edgeClickCallback, 
+			"graph": graphClickCallback 
+		}
+	});
 	
-	sideMenuDialogView = new azkaban.SideMenuDialogView({el:$('#graphOptions')});
-	editTableView = new azkaban.EditTableView({el:$('#editTable')});
-
-	contextMenuView = new azkaban.ContextMenuView({el:$('#contextMenu')});
+	sideMenuDialogView = new azkaban.SideMenuDialogView({
+		el: $('#graph-options')
+	});
+	editTableView = new azkaban.EditTableView({
+		el: $('#editTable')
+	});
+
+	contextMenuView = new azkaban.ContextMenuView({
+		el: $('#contextMenu')
+	});
 });

diff --git a/src/web/js/azkaban.flow.graph.view.js b/src/web/js/azkaban.flow.graph.view.js
index 338b08c..6ad2100 100644
--- a/src/web/js/azkaban.flow.graph.view.js
+++ b/src/web/js/azkaban.flow.graph.view.js
@@ -156,7 +156,12 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			var x = node.x - offset;
 			var y = node.y - offset;
 			
-			$(this.svgGraph).svgNavigate("transformToBox", {x: x, y: y, width: widthHeight, height: widthHeight});
+			$(this.svgGraph).svgNavigate("transformToBox", {
+        x: x, 
+        y: y, 
+        width: widthHeight, 
+        height: widthHeight
+      });
 		}
 	},
 	handleStatusUpdate: function(evt) {
@@ -294,7 +299,13 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	},
 	resetPanZoom : function(duration) {
 		var bounds = this.graphBounds;
-		var param = {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY), duration: duration };
+		var param = {
+      x: bounds.minX, 
+      y: bounds.minY, 
+      width: (bounds.maxX - bounds.minX), 
+      height: (bounds.maxY - bounds.minY), 
+      duration: duration
+    };
 
 		$(this.svgGraph).svgNavigate("transformToBox", param);
 	}

diff --git a/src/web/js/azkaban.flow.job.view.js b/src/web/js/azkaban.flow.job.view.js
index d4dff6b..fe8cf6d 100644
--- a/src/web/js/azkaban.flow.job.view.js
+++ b/src/web/js/azkaban.flow.job.view.js
@@ -17,94 +17,98 @@
 azkaban.JobListView = Backbone.View.extend({
 	events: {
 		"keyup input": "filterJobs",
-		"click li": "handleJobClick",
-		"click .resetPanZoomBtn" : "handleResetPanZoom",
-		"contextmenu li" : "handleContextMenuClick"
+		"click .job": "handleJobClick",
+		"click .resetPanZoomBtn": "handleResetPanZoom",
+		"contextmenu li": "handleContextMenuClick"
 	},
+	
 	initialize: function(settings) {
 		this.model.bind('change:selected', this.handleSelectionChange, this);
 		this.model.bind('change:disabled', this.handleDisabledChange, this);
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('change:update', this.handleStatusUpdate, this);
 		
-		this.filterInput = $(this.el).find(".filter");
-		this.list = $(this.el).find(".list");
+		this.filterInput = $(this.el).find("#filter");
+		this.list = $(this.el).find("#list");
 		this.contextMenu = settings.contextMenuCallback;
 		this.listNodes = {};
 	},
+	
 	filterJobs: function(self) {
 		var filter = this.filterInput.val();
-		
 		if (filter && filter.trim() != "") {
 			filter = filter.trim();
-			
 			if (filter == "") {
 				if (this.filter) {
-					this.jobs.children().each(
-						function(){
-							var a = $(this).find("a");
-        					$(a).html(this.jobid);
-        					$(this).show();
-						}
-					);
+					this.jobs.children().each(function(){
+						var a = $(this).find("a");
+						$(a).html(this.jobid);
+						$(this).show();
+					});
 				}
-				
 				this.filter = null;
 				return;
 			}
 		}
 		else {
 			if (this.filter) {
-				this.jobs.children().each(
-					function(){
-						var a = $(this).find("a");
-    					$(a).html(this.jobid);
-    					$(this).show();
-					}
-				);
+				this.jobs.children().each(function(){
+					var a = $(this).find("a");
+					$(a).html(this.jobid);
+					$(this).show();
+				});
 			}
 				
 			this.filter = null;
 			return;
 		}
 		
-		this.jobs.children().each(
-			function(){
-        		var jobid = this.jobid;
-        		var index = jobid.indexOf(filter);
-        		if (index != -1) {
-        			var a = $(this).find("a");
-        			
-        			var endIndex = index + filter.length;
-        			var newHTML = jobid.substring(0, index) + "<span>" + jobid.substring(index, endIndex) + "</span>" + jobid.substring(endIndex, jobid.length);
-        			
-        			$(a).html(newHTML);
-        			$(this).show();
-        		}
-        		else {
-        			$(this).hide();
-        		}
-    	});
-    	
-    	this.filter = filter;
+		this.jobs.children().each(function() {
+			var jobid = this.jobid;
+			var index = jobid.indexOf(filter);
+			if (index != -1) {
+				var a = $(this).find("a");
+				var endIndex = index + filter.length;
+				var newHTML = jobid.substring(0, index) + "<span>" + 
+						jobid.substring(index, endIndex) + "</span>" + 
+						jobid.substring(endIndex, jobid.length);
+				
+				$(a).html(newHTML);
+				$(this).show();
+			}
+			else {
+				$(this).hide();
+			}
+		});
+			
+		this.filter = filter;
 	},
+	
 	handleStatusUpdate: function(evt) {
 		var updateData = this.model.get("update");
 		if (updateData.nodes) {
 			for (var i = 0; i < updateData.nodes.length; ++i) {
 				var updateNode = updateData.nodes[i];
-				$(this.listNodes[updateNode.id]).removeClass();
-				$(this.listNodes[updateNode.id]).addClass(updateNode.status);
+				var job = this.listNodes[updateNode.id];
+				$(job).removeClass();
+				$(job).addClass("list-group-item");
+				$(job).addClass(updateNode.status);
 			}
 		}
 	},
+	
 	assignInitialStatus: function(evt) {
 		var data = this.model.get("data");
 		for (var i = 0; i < data.nodes.length; ++i) {
 			var updateNode = data.nodes[i];
-			$(this.listNodes[updateNode.id]).addClass(updateNode.status);
+			var job = this.listNodes[updateNode.id];
+      if (!$(job).hasClass("list-group-item")) {
+        $(job).addClass("list-group-item");
+      }
+			$(job).addClass(updateNode.status);
 		}
 	},
+	
 	render: function(self) {
 		var data = this.model.get("data");
 		var nodes = data.nodes;
@@ -117,7 +121,7 @@ azkaban.JobListView = Backbone.View.extend({
 		};
 	
 		var nodeArray = nodes.slice(0);
-		nodeArray.sort(function(a,b){ 
+		nodeArray.sort(function(a, b) {
 			var diff = a.y - b.y;
 			if (diff == 0) {
 				return a.x - b.x;
@@ -127,40 +131,36 @@ azkaban.JobListView = Backbone.View.extend({
 			}
 		});
 		
-		var ul = document.createElement("ul");
-		$(ul).attr("class", "jobs");
-		this.jobs = $(ul);
-		
+		var list = this.list;
+		this.jobs = $(list);
 		for (var i = 0; i < nodeArray.length; ++i) {
-			var li = document.createElement("li");
-			li.jobid=nodeArray[i].id;
-			
-			var iconDiv = document.createElement("div");
-			$(iconDiv).addClass("icon");
-			li.appendChild(iconDiv);
-			
 			var a = document.createElement("a");
-			$(a).text(nodeArray[i].id);
-			li.appendChild(a);
-			ul.appendChild(li);
-			li.jobid=nodeArray[i].id;
-			
-			this.listNodes[nodeArray[i].id] = li;
+			$(a).addClass('list-group-item').addClass('job');
+      $(a).attr('href', '#');
+      
+      var iconDiv = document.createElement('div');
+      $(iconDiv).addClass('icon');
+      $(a).append(iconDiv);
+			$(a).append(nodeArray[i].id);
+			$(list).append(a);
+			a.jobid = nodeArray[i].id;
+			this.listNodes[nodeArray[i].id] = a;
 		}
 		
-		this.list.append(ul);
 		this.assignInitialStatus(self);
 		this.handleDisabledChange(self);
 	},
+	
 	handleContextMenuClick: function(evt) {
 		if (this.contextMenu) {
 			this.contextMenu(evt);
 			return false;
 		}
 	},
-	handleJobClick : function(evt) {
+	
+	handleJobClick: function(evt) {
 		var jobid = evt.currentTarget.jobid;
-		if(!evt.currentTarget.jobid) {
+		if (!evt.currentTarget.jobid) {
 			return;
 		}
 		
@@ -177,6 +177,7 @@ azkaban.JobListView = Backbone.View.extend({
 			this.model.set({"selected": jobid});
 		}
 	},
+	
 	handleDisabledChange: function(evt) {
 		var disabledMap = this.model.get("disabled");
 		var nodes = this.model.get("nodes");
@@ -190,6 +191,7 @@ azkaban.JobListView = Backbone.View.extend({
 			}
 		}
 	},
+	
 	handleSelectionChange: function(evt) {
 		if (!this.model.hasChanged("selected")) {
 			return;
@@ -199,13 +201,14 @@ azkaban.JobListView = Backbone.View.extend({
 		var current = this.model.get("selected");
 		
 		if (previous) {
-			$(this.listNodes[previous]).removeClass("selected");
+			$(this.listNodes[previous]).removeClass("active");
 		}
 		
 		if (current) {
-			$(this.listNodes[current]).addClass("selected");
+			$(this.listNodes[current]).addClass("active");
 		}
 	},
+	
 	handleResetPanZoom: function(evt) {
 		this.model.trigger("resetPanZoom");
 	}

diff --git a/src/web/js/azkaban.flow.view.js b/src/web/js/azkaban.flow.view.js
index ce01dbc..55d26c4 100644
--- a/src/web/js/azkaban.flow.view.js
+++ b/src/web/js/azkaban.flow.view.js
@@ -31,22 +31,25 @@ var statusStringMap = {
 
 var handleJobMenuClick = function(action, el, pos) {
 	var jobid = el[0].jobid;
-	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobid;
+	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + 
+			flowId + "&job=" + jobid;
 	if (action == "open") {
 		window.location.href = requestURL;
 	}
-	else if(action == "openwindow") {
+	else if (action == "openwindow") {
 		window.open(requestURL);
 	}
 }
 
 var flowTabView;
-azkaban.FlowTabView= Backbone.View.extend({
-	events : {
-		"click #graphViewLink" : "handleGraphLinkClick",
-		"click #executionsViewLink" : "handleExecutionLinkClick"
+azkaban.FlowTabView = Backbone.View.extend({
+	events: {
+		"click #graphViewLink": "handleGraphLinkClick",
+		"click #executionsViewLink": "handleExecutionLinkClick",
+		"click #summaryViewLink": "handleSummaryLinkClick"
 	},
-	initialize : function(settings) {
+	
+	initialize: function(settings) {
 		var selectedView = settings.selectedView;
 		if (selectedView == "executions") {
 			this.handleExecutionLinkClick();
@@ -54,26 +57,42 @@ azkaban.FlowTabView= Backbone.View.extend({
 		else {
 			this.handleGraphLinkClick();
 		}
-
 	},
+	
 	render: function() {
 		console.log("render graph");
 	},
+	
 	handleGraphLinkClick: function(){
-		$("#executionsViewLink").removeClass("selected");
-		$("#graphViewLink").addClass("selected");
+		$("#executionsViewLink").removeClass("active");
+		$("#graphViewLink").addClass("active");
+		$('#summaryViewLink').removeClass('active');
 		
 		$("#executionsView").hide();
 		$("#graphView").show();
+		$('#summaryView').hide();
 	},
+	
 	handleExecutionLinkClick: function() {
-		$("#graphViewLink").removeClass("selected");
-		$("#executionsViewLink").addClass("selected");
+		$("#graphViewLink").removeClass("active");
+		$("#executionsViewLink").addClass("active");
+		$('#summaryViewLink').removeClass('active');
 		
-		 $("#graphView").hide();
-		 $("#executionsView").show();
-		 executionModel.trigger("change:view");
-	}
+		$("#graphView").hide();
+		$("#executionsView").show();
+		$('#summaryView').hide();
+		executionModel.trigger("change:view");
+	},
+
+  handleSummaryLinkClick: function() {
+		$('#graphViewLink').removeClass('active');
+		$('#executionsViewLink').removeClass('active');
+		$('#summaryViewLink').addClass('active');
+
+		$('#graphView').hide();
+		$('#executionsView').hide();
+		$('#summaryView').show();
+	},
 });
 
 var jobListView;
@@ -84,12 +103,14 @@ azkaban.ExecutionsView = Backbone.View.extend({
 	events: {
 		"click #pageSelection li": "handleChangePageSelection"
 	},
+	
 	initialize: function(settings) {
 		this.model.bind('change:view', this.handleChangeView, this);
 		this.model.bind('render', this.render, this);
 		this.model.set({page: 1, pageSize: 16});
 		this.model.bind('change:page', this.handlePageChange, this);
 	},
+	
 	render: function(evt) {
 		console.log("render");
 		// Render page selections
@@ -155,11 +176,12 @@ azkaban.ExecutionsView = Backbone.View.extend({
 		
 		this.renderPagination(evt);
 	},
+	
 	renderPagination: function(evt) {
 		var total = this.model.get("total");
 		total = total? total : 1;
 		var pageSize = this.model.get("pageSize");
-		var numPages = Math.ceil(total/pageSize);
+		var numPages = Math.ceil(total / pageSize);
 		
 		this.model.set({"numPages": numPages});
 		var page = this.model.get("page");
@@ -228,49 +250,131 @@ azkaban.ExecutionsView = Backbone.View.extend({
 			a.attr("href", "#page" + tpage);
 		}
 	},
+	
 	handleChangePageSelection: function(evt) {
 		if ($(evt.currentTarget).hasClass("disabled")) {
 			return;
 		}
 		var page = evt.currentTarget.page;
-		
 		this.model.set({"page": page});
 	},
+	
 	handleChangeView: function(evt) {
 		if (this.init) {
 			return;
 		}
-		
 		console.log("init");
 		this.handlePageChange(evt);
 		this.init = true;
 	},
+	
 	handlePageChange: function(evt) {
 		var page = this.model.get("page") - 1;
 		var pageSize = this.model.get("pageSize");
 		var requestURL = contextURL + "/manager";
 		
 		var model = this.model;
-		$.get(
-			requestURL,
-			{"project": projectName, "flow":flowId, "ajax": "fetchFlowExecutions", "start":page * pageSize, "length": pageSize},
-			function(data) {
-				model.set({"executions": data.executions, "total": data.total});
-				model.trigger("render");
-			},
-			"json"
-		);
+		var requestData = {
+			"project": projectName, 
+			"flow": flowId, 
+			"ajax": "fetchFlowExecutions", 
+			"start": page * pageSize, 
+			"length": pageSize
+		};
+		var successHandler = function(data) {
+			model.set({
+				"executions": data.executions, 
+				"total": data.total
+			});
+			model.trigger("render");
+		};
+		$.get(requestURL, requestData, successHandler, "json");
 	}
 });
 
+var summaryView;
+azkaban.SummaryView = Backbone.View.extend({
+	events: {
+	},
+	
+	initialize: function(settings) {
+		console.log("summaryView initialize");
+
+		this.model.bind('change:view', this.handleChangeView, this);
+		this.model.bind('render', this.render, this);
+		
+		this.fetchDetails();
+    this.fetchSchedule();
+		this.fetchLastRun();
+		this.model.trigger('render');
+	},
+
+  fetchDetails: function() {
+    var requestURL = contextURL + "/manager";
+    var requestData = {
+      'ajax': 'fetchflowdetails',
+      'project': projectName,
+      'flow': flowId
+    };
+		var model = this.model;
+    var successHandler = function(data) {
+      console.log(data);
+      model.set({
+        'jobTypes': data.jobTypes
+      });
+      model.trigger('render');
+    };
+    $.get(requestURL, requestData, successHandler, 'json');
+  },
+
+	fetchSchedule: function() {
+		var requestURL = contextURL + "/schedule"
+		var requestData = {
+			'ajax': 'fetchSchedule',
+			'projectId': projectId,
+			'flowId': flowId
+		};
+		var model = this.model;
+		var successHandler = function(data) {
+      model.set({'schedule': data.schedule});
+      model.trigger('render');
+		};
+		$.get(requestURL, requestData, successHandler, 'json');
+	},
+
+	fetchLastRun: function() {
+
+	},
+
+	handleChangeView: function(evt) {
+		console.log("summaryView handleChangeView");
+	},
+
+	render: function(evt) {
+		console.log("summaryView render");
+		var data = {
+      projectName: projectName,
+			flowName: flowId,
+      jobTypes: this.model.get('jobTypes'),
+			general: this.model.get('general'),
+			schedule: this.model.get('schedule'),
+			lastRun: this.model.get('lastRun')
+		};
+		dust.render("flowsummary", data, function(err, out) {
+			$('#summaryView').html(out);
+		});
+	},
+});
+
 var exNodeClickCallback = function(event) {
 	console.log("Node clicked callback");
 	var jobId = event.currentTarget.jobid;
-	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
+	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + 
+			flowId + "&job=" + jobId;
 
 	var menu = [	
-			{title: "Open Job...", callback: function() {window.location.href=requestURL;}},
-			{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}}
+		{title: "Open Job...", callback: function() {window.location.href=requestURL;}},
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}}
 	];
 
 	contextMenuView.show(event, menu);
@@ -279,11 +383,12 @@ var exNodeClickCallback = function(event) {
 var exJobClickCallback = function(event) {
 	console.log("Node clicked callback");
 	var jobId = event.currentTarget.jobid;
-	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
+	var requestURL = contextURL + "/manager?project=" + projectName + "&flow=" + 
+			flowId + "&job=" + jobId;
 
 	var menu = [	
-			{title: "Open Job...", callback: function() {window.location.href=requestURL;}},
-			{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}}
+		{title: "Open Job...", callback: function() {window.location.href=requestURL;}},
+		{title: "Open Job in New Window...", callback: function() {window.open(requestURL);}}
 	];
 
 	contextMenuView.show(event, menu);
@@ -312,26 +417,44 @@ azkaban.GraphModel = Backbone.Model.extend({});
 
 var executionModel;
 azkaban.ExecutionModel = Backbone.Model.extend({});
+
+var summaryModel;
+azkaban.SummaryModel = Backbone.Model.extend({});
+
 var mainSvgGraphView;
 
 $(function() {
 	var selected;
 	// Execution model has to be created before the window switches the tabs.
 	executionModel = new azkaban.ExecutionModel();
-	executionsView = new azkaban.ExecutionsView({el:$('#executionsView'), model: executionModel});
-	flowTabView = new azkaban.FlowTabView({el:$( '#headertabs'), selectedView: selected });
+	executionsView = new azkaban.ExecutionsView({
+		el: $('#executionsView'), 
+		model: executionModel
+	});
+	
+  summaryModel = new azkaban.SummaryModel();
+	summaryView = new azkaban.SummaryView({
+		el: $('#summaryView'),
+		model: summaryModel
+	});
+	
+  flowTabView = new azkaban.FlowTabView({
+		el: $('#headertabs'), 
+		selectedView: selected 
+	});
 
 	graphModel = new azkaban.GraphModel();
 	mainSvgGraphView = new azkaban.SvgGraphView({
 		el: $('#svgDiv'), 
 		model: graphModel, 
-		rightClick:  { 
+		rightClick: { 
 			"node": exNodeClickCallback, 
 			"edge": exEdgeClickCallback, 
 			"graph": exGraphClickCallback 
 		}
 	});
-	jobsListView = new azkaban.JobListView({
+	
+  jobsListView = new azkaban.JobListView({
 		el: $('#jobList'), 
 		model: graphModel, 
 		contextMenuCallback: exJobClickCallback
@@ -340,7 +463,7 @@ $(function() {
 	var requestURL = contextURL + "/manager";
 
 	// Set up the Flow options view. Create a new one every time :p
-	$('#executebtn').click( function() {
+	$('#executebtn').click(function() {
 		var data = graphModel.get("data");
 		var nodes = data.nodes;
 		var executingData = {
@@ -352,61 +475,65 @@ $(function() {
 		flowExecuteDialogView.show(executingData);
 	});
 
-	$.get(
-		requestURL,
-		{"project": projectName, "ajax":"fetchflowgraph", "flow":flowId},
-		function(data) {
-			// Create the nodes
-			var nodes = {};
-			for (var i=0; i < data.nodes.length; ++i) {
-				var node = data.nodes[i];
-				nodes[node.id] = node;
+	var requestData = {
+		"project": projectName, 
+		"ajax": "fetchflowgraph", 
+		"flow": flowId
+	};
+	var successHandler = function(data) {
+		// Create the nodes
+		var nodes = {};
+		for (var i = 0; i < data.nodes.length; ++i) {
+			var node = data.nodes[i];
+			nodes[node.id] = node;
+		}
+		for (var i = 0; i < data.edges.length; ++i) {
+			var edge = data.edges[i];
+			var fromNode = nodes[edge.from];
+			var toNode = nodes[edge.target];
+			
+			if (!fromNode.outNodes) {
+				fromNode.outNodes = {};
 			}
-			for (var i=0; i < data.edges.length; ++i) {
-				var edge = data.edges[i];
-				var fromNode = nodes[edge.from];
-				var toNode = nodes[edge.target];
-				
-				if (!fromNode.outNodes) {
-					fromNode.outNodes = {};
-				}
-				fromNode.outNodes[toNode.id] = toNode;
-				
-				if (!toNode.inNodes) {
-					toNode.inNodes = {};
-				}
-				toNode.inNodes[fromNode.id] = fromNode;
+			fromNode.outNodes[toNode.id] = toNode;
+			
+			if (!toNode.inNodes) {
+				toNode.inNodes = {};
 			}
+			toNode.inNodes[fromNode.id] = fromNode;
+		}
+	
+		console.log("data fetched");
+		graphModel.set({data: data});
+		graphModel.set({nodes: nodes});
+		graphModel.set({disabled: {}});
+		graphModel.trigger("change:graph");
 		
-			console.log("data fetched");
-			graphModel.set({data: data});
-			graphModel.set({nodes: nodes});
-			graphModel.set({disabled: {}});
-			graphModel.trigger("change:graph");
-			
-			// Handle the hash changes here so the graph finishes rendering first.
-			if (window.location.hash) {
-				var hash = window.location.hash;
-				if (hash == "#executions") {
+		// Handle the hash changes here so the graph finishes rendering first.
+		if (window.location.hash) {
+			var hash = window.location.hash;
+			if (hash == "#executions") {
+				flowTabView.handleExecutionLinkClick();
+			}
+			if (hash == "#summary") {
+				flowTabView.handleSummaryLinkClick();
+			}
+			else if (hash == "#graph") {
+				// Redundant, but we may want to change the default. 
+				selected = "graph";
+			}
+			else {
+				if ("#page" == hash.substring(0, "#page".length)) {
+					var page = hash.substring("#page".length, hash.length);
+					console.log("page " + page);
 					flowTabView.handleExecutionLinkClick();
-				}
-				else if (hash == "#graph") {
-					// Redundant, but we may want to change the default. 
-					selected = "graph";
+					executionModel.set({"page": parseInt(page)});
 				}
 				else {
-					if ("#page" == hash.substring(0, "#page".length)) {
-						var page = hash.substring("#page".length, hash.length);
-						console.log("page " + page);
-						flowTabView.handleExecutionLinkClick();
-						executionModel.set({"page": parseInt(page)});
-					}
-					else {
-						selected = "graph";
-					}
+					selected = "graph";
 				}
 			}
-		},
-		"json"
-	);
+		}
+	};
+	$.get(requestURL, requestData, successHandler, "json");
 });

diff --git a/src/web/js/azkaban.history.view.js b/src/web/js/azkaban.history.view.js
index d1b99c0..a381e74 100644
--- a/src/web/js/azkaban.history.view.js
+++ b/src/web/js/azkaban.history.view.js
@@ -21,87 +21,59 @@ azkaban.AdvFilterView = Backbone.View.extend({
 	events: {
 		"click #filter-btn": "handleAdvFilter"
 	},
+	
 	initialize: function(settings) {
-		$( "#datetimebegin" ).datetimepicker({
-			dateFormat: "mm/dd/yy",
-			separator: '-',
-			timeFormat: "HH:mm"
-		});
-		$( "#datetimeend" ).datetimepicker({
-			dateFormat: "mm/dd/yy",
-			separator: '-',
-			timeFormat: "HH:mm"
-		});
-		$("#errorMsg").hide();
+		$('#datetimebegin').datetimepicker();
+		$('#datetimeend').datetimepicker();
+		$('#datetimebegin').on('change.dp', function(e) {
+      $('#datetimeend').data('DateTimePicker').setStartDate(e.date);
+    });
+		$('#datetimeend').on('change.dp', function(e) {
+      $('#datetimebegin').data('DateTimePicker').setEndDate(e.date);
+    });
+		$('#adv-filter-error-msg').hide();
 	},
+	
 	handleAdvFilter: function(evt) {
 		console.log("handleAdv");
 		var projcontain = $('#projcontain').val();
 		var flowcontain = $('#flowcontain').val();
 		var usercontain = $('#usercontain').val();
 		var status = $('#status').val();
-		var begin  = $('#datetimebegin').val();
-		var end    = $('#datetimeend').val();
+		var begin	= $('#datetimebegin').val();
+		var end		= $('#datetimeend').val();
 		
 		console.log("filtering history");
 
 		var historyURL = contextURL + "/history"
 		var redirectURL = contextURL + "/schedule"	
-		
 
 		var requestURL = historyURL + "?advfilter=true" + "&projcontain=" + projcontain + "&flowcontain=" + flowcontain + "&usercontain=" + usercontain + "&status=" + status + "&begin=" + begin + "&end=" + end ; 
 		window.location = requestURL;
-		
-//		$.get(
-//			historyURL,
-//			{"action": "advfilter", "projre": projre, "flowre": flowre, "userre": userre},
-//			function(data) {
-//				if (data.action == "redirect") {
-//                    window.location = data.redirect;
-//                }
-//			},
-//			"json"
-//		)
-//		$.ajax({
-//        	async: "false",
-//        	url: "history",
-//        	dataType: "json",
-//        	type: "POST",
-//        	data: {
-//        	action:"advfilter",
-//        	projre:projre,
-//        	flowre:flowre,
-//        	userre:userre
-//        	},
-//        	success: function(data) {
-//        		if (data.redirect) {
-//               		window.location = data.redirect;
-//            	}
-//        	}
-//        })
+
+		/*
+		var requestData = {
+			"action": "advfilter", 
+			"projre": projre, 
+			"flowre": flowre, 
+			"userre": userre
+		};
+		var successHandler = function(data) {
+			if (data.action == "redirect") {
+				window.location = data.redirect;
+			}
+		};
+		$.get(historyURL, requestData, successHandler, "json");
+	*/
 	},
-	render: function(){
+
+	render: function() {
 	}
 });
 
 $(function() {
-
 	filterView = new azkaban.AdvFilterView({el: $('#adv-filter')});
-
-	 $('#adv-filter-btn').click( function() {
-		$('#adv-filter').modal({
-        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-          position: ["20%",],
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '500px'
-          },
-          onShow: function (dialog) {
-            var modal = this;
-            $("#errorMsg").hide();
-          }
-        });
-    });
-
+	$('#adv-filter-btn').click( function() {
+		$('#adv-filter').modal();
+	});
 });

diff --git a/src/web/js/azkaban.jmx.view.js b/src/web/js/azkaban.jmx.view.js
index ee189f6..9aa63ea 100644
--- a/src/web/js/azkaban.jmx.view.js
+++ b/src/web/js/azkaban.jmx.view.js
@@ -17,37 +17,38 @@
 $.namespace('azkaban');
 
 var jmxTableView;
-azkaban.JMXTableView= Backbone.View.extend({
-  events : {
-    "click .querybtn": "queryJMX",
-    "click .collapse": "collapseRow"
-  },
-  initialize : function(settings) {
+azkaban.JMXTableView = Backbone.View.extend({
+	events: {
+		"click .query-btn": "queryJMX",
+		"click .collapse-btn": "collapseRow"
+	},
 
-  },
-  queryJMX : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
+	initialize: function(settings) {
+	},
 	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
-	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
+	queryJMX: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
 
-	var data = {"ajax":"getAllMBeanAttributes", "mBean":canonicalName};
-	if ($(target).attr("hostPort")) {
-		data.ajax = "getAllExecutorAttributes";
-		data.hostPort = $(target).attr("hostPort");
-	}
-	$.get(
-		requestURL,
-		data,
-		function(data) {
+		var data = {
+			"ajax": "getAllMBeanAttributes", 
+			"mBean": canonicalName
+		};
+		if ($(target).attr("hostPort")) {
+			data.ajax = "getAllExecutorAttributes";
+			data.hostPort = $(target).attr("hostPort");
+		}
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -64,28 +65,31 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  queryRemote : function(evt) {
-	var target = evt.currentTarget;
-	var id = target.id;
-	
-	var childID = id + "-child";
-	var tbody = id + "-tbody";
+			$(child).fadeIn();
+		};
+		$.get(requestURL, data, successHandler);
+	},
 	
-	var requestURL = contextURL + "/jmx";
-	var canonicalName=$(target).attr("domain") + ":name=" + $(target).attr("name");
-	var hostPort = $(target).attr("hostport");
-	$.get(
-		requestURL,
-		{"ajax":"getAllExecutorAttributes", "mBean":canonicalName, "hostPort": hostPort},
-		function(data) {
+	queryRemote: function(evt) {
+		var target = evt.currentTarget;
+		var id = target.id;
+		
+		var childID = id + "-child";
+		var tbody = id + "-tbody";
+		
+		var requestURL = contextURL + "/jmx";
+		var canonicalName = $(target).attr("domain") + ":name=" + $(target).attr("name");
+		var hostPort = $(target).attr("hostport");
+		var requestData = {
+			"ajax": "getAllExecutorAttributes", 
+			"mBean": canonicalName, 
+			"hostPort": hostPort
+		};
+		var successHandler = function(data) {
 			var table = $('#' + tbody);
 			$(table).empty();
 			
-			for(var key in data.attributes) {
+			for (var key in data.attributes) {
 				var value = data.attributes[key];
 				
 				var tr = document.createElement("tr");
@@ -102,20 +106,22 @@ azkaban.JMXTableView= Backbone.View.extend({
 			}
 			
 			var child = $("#" + childID);
-	    	$(child).fadeIn();
-		}
-	);
-  },
-  collapseRow: function(evt) {
-  	$(evt.currentTarget).parent().parent().fadeOut();
-  },
-  render: function() {
-  }
+				$(child).fadeIn();
+		};
+		$.get(requestURL, requestData, successHandler);
+	},
+	
+	collapseRow: function(evt) {
+		$(evt.currentTarget).parent().parent().fadeOut();
+	},
+
+	render: function() {
+	}
 });
 
 var remoteTables = new Array();
 $(function() {
-	jmxTableView = new azkaban.JMXTableView({el:$('#all-jobs')});
+	jmxTableView = new azkaban.JMXTableView({el:$('#all-jmx')});
 	
 	$(".remoteJMX").each(function(item) {
 		var newTableView = new azkaban.JMXTableView({el:$(this)});

diff --git a/src/web/js/azkaban.jobdetails.view.js b/src/web/js/azkaban.jobdetails.view.js
new file mode 100644
index 0000000..3f2b7a2
--- /dev/null
+++ b/src/web/js/azkaban.jobdetails.view.js
@@ -0,0 +1,341 @@
+/*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+$.namespace('azkaban');
+
+var logModel;
+azkaban.LogModel = Backbone.Model.extend({});
+
+var jobLogView;
+azkaban.JobLogView = Backbone.View.extend({
+	events: {
+		"click #updateLogBtn" : "handleUpdate"
+	},
+	initialize: function(settings) {
+		this.model.set({"offset": 0});
+		this.handleUpdate();
+	},
+	handleUpdate: function(evt) {
+		var requestURL = contextURL + "/executor"; 
+		var model = this.model;
+		var finished = false;
+
+		var date = new Date();
+		var startTime = date.getTime();
+		
+		while (!finished) {
+			var offset = this.model.get("offset");
+			var requestData = {
+				"execid": execId, 
+				"jobId": jobId, 
+				"ajax":"fetchExecJobLogs", 
+				"offset": offset, 
+				"length": 50000, 
+				"attempt": attempt
+			};
+
+			var successHandler = function(data) {
+				console.log("fetchLogs");
+				if (data.error) {
+					console.log(data.error);
+					finished = true;
+				}
+				else if (data.length == 0) {
+					finished = true;
+				}
+				else {
+					var date = new Date();
+					var endTime = date.getTime();
+					if ((endTime - startTime) > 10000) {
+						finished = true;
+						showDialog("Alert","The log is taking a long time to finish loading. Azkaban has stopped loading them. Please click Refresh to restart the load.");
+					} 
+
+					var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/g;
+					var log = $("#logSection").text();
+					if (!log) {
+						log = data.data;
+					}
+					else {
+						log += data.data;
+					}
+
+					var newOffset = data.offset + data.length;
+					$("#logSection").text(log);
+					log = $("#logSection").html();
+					log = log.replace(re, "<a href=\"$1\" title=\"\">$1</a>");
+					$("#logSection").html(log);
+
+					model.set({"offset": newOffset, "log": log});
+					$(".logViewer").scrollTop(9999);
+				}
+			}
+
+			$.ajax({
+				url: requestURL,
+				type: "get",
+				async: false,
+				data: requestData,
+				dataType: "json",
+				error: function(data) {
+					console.log(data);
+					finished = true;
+				},
+				success: successHandler
+			});
+		}
+	}
+});
+
+var summaryModel;
+azkaban.SummaryModel = Backbone.Model.extend({});
+
+var jobSummaryView;
+azkaban.JobSummaryView = Backbone.View.extend({
+	events: {
+		"click #updateSummaryBtn" : "handleUpdate"
+	},
+	initialize: function(settings) {
+		this.handleUpdate();
+	},
+	handleUpdate: function(evt) {
+		var requestURL = contextURL + "/executor"; 
+		var model = this.model;
+		var self = this;
+
+		var requestData = {
+			"execid": execId, 
+			"jobId": jobId, 
+			"ajax":"fetchExecJobSummary", 
+			"attempt": attempt
+		};
+
+		$.ajax({
+			url: requestURL,
+			dataType: "json",
+			data: requestData,
+			error: function(data) {
+				console.log(data);
+			},
+			success: function(data) {
+				console.log("fetchSummary");
+				if (data.error) {
+					console.log(data.error);
+				}
+				else {
+					self.renderCommandTable(data.commandProperties);
+					self.renderJobTable(data.summaryTableHeaders, data.summaryTableData, "summary");
+					self.renderJobTable(data.statTableHeaders, data.statTableData, "stats");
+					self.renderHiveTable(data.hiveQueries, data.hiveQueryJobs);
+				}
+			}
+		});
+	},
+	renderCommandTable: function(commandProperties) {
+		if (commandProperties) {
+			var commandTable = $("#commandTable");
+			
+			for (var i = 0; i < commandProperties.length; i++) {
+				var prop = commandProperties[i];
+				var tr = document.createElement("tr");
+				var name = document.createElement("td");
+				var value = document.createElement("td");
+				$(name).html("<b>" + prop.first + "</b>");
+				$(value).html(prop.second);
+				$(tr).append(name);
+				$(tr).append(value);
+				commandTable.append(tr);
+			}
+		}
+	},
+	renderJobTable: function(headers, data, prefix) {
+		if (headers) {
+			// Add table headers
+			var header = $("#" + prefix + "Header");
+			var tr = document.createElement("tr");
+			var i;
+			for (i = 0; i < headers.length; i++) {
+				var th = document.createElement("th");
+				$(th).text(headers[i]);
+				$(tr).append(th);
+			}
+			header.append(tr);
+			
+			// Add table body
+			var body = $("#" + prefix + "Body");
+			for (i = 0; i < data.length; i++) {
+				tr = document.createElement("tr");
+				var row = data[i];
+				for (var j = 0; j < row.length; j++) {
+					var td = document.createElement("td");
+					if (j == 0) {
+						// first column is a link to job details page 
+						$(td).html(row[j]);
+					} else {
+						$(td).text(row[j]);
+					}
+					$(tr).append(td);
+				}
+				body.append(tr);
+			}
+		} else {
+			$("#job" + prefix).hide();
+		}
+	},
+	renderHiveTable: function(queries, queryJobs) {
+		if (queries) {
+			// Set up table column headers
+			var header = $("#hiveTableHeader");
+			var tr = document.createElement("tr");
+			var headers = ["Query","Job","Map","Reduce","HDFS Read","HDFS Write"];
+			var i;
+			
+			for (i = 0; i < headers.length; i++) {
+				var th = document.createElement("th");
+				$(th).text(headers[i]);
+				$(tr).append(th);
+			}
+			header.append(tr);
+			
+			// Construct table body
+			var body = $("#hiveTableBody");
+			for (i = 0; i < queries.length; i++) {
+				// new query
+				tr = document.createElement("tr");
+				var td = document.createElement("td");
+				$(td).html("<b>" + queries[i] + "</b>");
+				$(tr).append(td);
+				
+				var jobs = queryJobs[i];
+				if (jobs != null) {
+					// add first job for this query
+					var jobValues = jobs[0];
+					var j;
+					for (j = 0; j < jobValues.length; j++) {
+						td = document.createElement("td");
+						$(td).html(jobValues[j]);
+						$(tr).append(td);
+					}
+					body.append(tr);
+					
+					// add remaining jobs for this query
+					for (j = 1; j < jobs.length; j++) {
+						jobValues = jobs[j];
+						tr = document.createElement("tr");
+						
+						// add empty cell for query column
+						td = document.createElement("td");
+						$(td).html("&nbsp;");
+						$(tr).append(td);
+						
+						// add job values
+						for (var k = 0; k < jobValues.length; k++) {
+							td = document.createElement("td");
+							$(td).html(jobValues[k]);
+							$(tr).append(td);
+						}
+						body.append(tr);
+					}
+					
+				} else {
+					body.append(tr);
+				}
+			}
+		} else {
+			$("#hiveTable").hide();
+		}
+	}
+});
+
+var jobTabView;
+azkaban.JobTabView = Backbone.View.extend({
+	events: {
+		'click #jobSummaryViewLink': 'handleJobSummaryViewLinkClick',
+		'click #jobLogViewLink': 'handleJobLogViewLinkClick'
+	},
+
+	initialize: function(settings) {
+		var selectedView = settings.selectedView;
+		if (selectedView == 'joblog') {
+			this.handleJobLogViewLinkClick();
+		}
+		else {
+			this.handleJobSummaryViewLinkClick();
+		}
+	},
+
+	render: function() {
+	},
+
+	handleJobLogViewLinkClick: function() {
+		$('#jobSummaryViewLink').removeClass('active');
+		$('#jobSummaryView').hide();
+		$('#jobLogViewLink').addClass('active');
+		$('#jobLogView').show();
+	},
+	
+	handleJobSummaryViewLinkClick: function() {
+		$('#jobSummaryViewLink').addClass('active');
+		$('#jobSummaryView').show();
+		$('#jobLogViewLink').removeClass('active');
+		$('#jobLogView').hide();
+	},
+});
+
+var showDialog = function(title, message) {
+  $('#messageTitle').text(title);
+  $('#messageBox').text(message);
+  $('#messageDialog').modal({
+		closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
+		position: ["20%",],
+		containerId: 'confirm-container',
+		containerCss: {
+			'height': '220px',
+			'width': '565px'
+		},
+		onShow: function (dialog) {
+		}
+	});
+}
+
+$(function() {
+	var selected;
+	logModel = new azkaban.LogModel();
+	jobLogView = new azkaban.JobLogView({
+		el: $('#jobLogView'), 
+		model: logModel
+	});
+
+	summaryModel = new azkaban.SummaryModel();
+	jobSummaryView = new azkaban.JobSummaryView({
+		el: $('#jobSummaryView'), 
+		model: summaryModel
+	});
+
+	jobTabView = new azkaban.JobTabView({
+		el: $('#headertabs')
+	});
+
+	if (window.location.hash) {
+		var hash = window.location.hash;
+		if (hash == '#joblog') {
+			jobTabView.handleJobLogViewLinkClick();
+		}
+		else if (hash == '#jobsummary') {
+			jobTabView.handleJobSummaryViewLinkClick();
+		}
+	}
+});

diff --git a/src/web/js/azkaban.jobedit.view.js b/src/web/js/azkaban.jobedit.view.js
index fcc3e97..0e62de1 100644
--- a/src/web/js/azkaban.jobedit.view.js
+++ b/src/web/js/azkaban.jobedit.view.js
@@ -22,26 +22,27 @@ azkaban.JobEditView = Backbone.View.extend({
 		"click" : "closeEditingTarget",
 		"click #set-btn": "handleSet",	
 		"click #cancel-btn": "handleCancel",
-		"click .modal-close": "handleCancel",
 		"click #addRow": "handleAddRow",
 		"click table .editable": "handleEditColumn",
 		"click table .removeIcon": "handleRemoveColumn"
 	},
+	
 	initialize: function(setting) {
 		this.projectURL = contextURL + "manager"
 		this.generalParams = {}
 		this.overrideParams = {}
 	},
+	
 	handleCancel: function(evt) {
-		$('#jobEditModalBackground').hide();
 		$('#job-edit-pane').hide();
 		var tbl = document.getElementById("generalProps").tBodies[0];
 		var rows = tbl.rows;
 		var len = rows.length;
-		for(var i=0; i < len-1; i++) {
+		for (var i = 0; i < len-1; i++) {
 			tbl.deleteRow(0);
 		}
 	},
+	
 	show: function(projectName, flowName, jobName) {
 		this.projectName = projectName;
 		this.flowName = flowName;
@@ -49,62 +50,59 @@ azkaban.JobEditView = Backbone.View.extend({
 		
 		var projectURL = this.projectURL
 		
-		
-		$('#jobEditModalBackground').show();
-		$('#job-edit-pane').show();
+		$('#job-edit-pane').modal();
 		
 		var handleAddRow = this.handleAddRow;
 		
-//		var overrideParams;
-//		var generalParams;
-//		this.overrideParams = overrideParams;
-//		this.generalParams = generalParams;
-		var fetchJobInfo = {"project": this.projectName, "ajax":"fetchJobInfo", "flowName":this.flowName, "jobName":this.jobName};
-		
+		/*var overrideParams;
+		var generalParams;
+		this.overrideParams = overrideParams;
+		this.generalParams = generalParams;*/
+		var fetchJobInfo = {
+			"project": this.projectName, 
+			"ajax": "fetchJobInfo", 
+			"flowName": this.flowName, 
+			"jobName": this.jobName
+		};
 		var mythis = this;
-		
-		$.get(
-				projectURL,
-				fetchJobInfo,
-				function(data) {
-					if (data.error) {
-						alert(data.error);
-					}
-					else {
-						document.getElementById('jobName').innerHTML = data.jobName;				
-						document.getElementById('jobType').innerHTML = data.jobType;
-						var generalParams = data.generalParams;
-						var overrideParams = data.overrideParams;
-						
-//						for(var key in generalParams) {
-//							var row = handleAddRow();
-//							var td = $(row).find('span');
-//							$(td[1]).text(key);
-//							$(td[2]).text(generalParams[key]);
-//						}
-						
-						mythis.overrideParams = overrideParams;
-						mythis.generalParams = generalParams;
+		var fetchJobSuccessHandler = function(data) {
+			if (data.error) {
+				alert(data.error);
+			}
+			else {
+				document.getElementById('jobName').innerHTML = data.jobName;				
+				document.getElementById('jobType').innerHTML = data.jobType;
+				var generalParams = data.generalParams;
+				var overrideParams = data.overrideParams;
 						
-						for(var okey in overrideParams) {
-							if(okey != 'type' && okey != 'dependencies') {
-								var row = handleAddRow();
-								var td = $(row).find('span');
-								$(td[1]).text(okey);
-								$(td[2]).text(overrideParams[okey]);
-							}
-						}
+				/*for (var key in generalParams) {
+					var row = handleAddRow();
+					var td = $(row).find('span');
+					$(td[1]).text(key);
+					$(td[2]).text(generalParams[key]);
+				}*/
 						
+				mythis.overrideParams = overrideParams;
+				mythis.generalParams = generalParams;
+				
+				for (var okey in overrideParams) {
+					if (okey != 'type' && okey != 'dependencies') {
+						var row = handleAddRow();
+						var td = $(row).find('span');
+						$(td[1]).text(okey);
+						$(td[2]).text(overrideParams[okey]);
 					}
-				},
-				"json"
-			);
+				}
+			}
+		};
 
+		$.get(projectURL, fetchJobInfo, fetchJobSuccessHandler, "json");
 	},
+
 	handleSet: function(evt) {
 		this.closeEditingTarget(evt);
 		var jobOverride = {};
-	  	var editRows = $(".editRow");
+		var editRows = $(".editRow");
 		for (var i = 0; i < editRows.length; ++i) {
 			var row = editRows[i];
 			var td = $(row).find('span');
@@ -120,7 +118,7 @@ azkaban.JobEditView = Backbone.View.extend({
 		var generalParams = this.generalParams
 		
 		jobOverride['type'] = overrideParams['type']
-		if('dependencies' in overrideParams) {
+		if ('dependencies' in overrideParams) {
 			jobOverride['dependencies'] = overrideParams['dependencies']
 		}
 		
@@ -138,32 +136,29 @@ azkaban.JobEditView = Backbone.View.extend({
 
 		var projectURL = this.projectURL
 		var redirectURL = projectURL+'?project='+project+'&flow='+flowName+'&job='+jobName;
+		var jobOverrideSuccessHandler = function(data) {
+			if (data.error) {
+				alert(data.error);
+			}
+			else {
+				window.location = redirectURL;
+			}
+		};
 		
-		$.get(
-			projectURL,
-			jobOverrideData,
-			function(data) {
-				if (data.error) {
-					alert(data.error);
-				}
-				else {
-					window.location = redirectURL;
-				}
-			},
-			"json"
-		);
+		$.get(projectURL, jobOverrideData, jobOverrideSuccessHandler, "json");
 	},
+	
 	handleAddRow: function(evt) {
 		var tr = document.createElement("tr");
-	  	var tdName = document.createElement("td");
-	    var tdValue = document.createElement("td");
+		var tdName = document.createElement("td");
+		var tdValue = document.createElement("td");
 
-	    var icon = document.createElement("span");
-	    $(icon).addClass("removeIcon");
-	    var nameData = document.createElement("span");
-	    $(nameData).addClass("spanValue");
-	    var valueData = document.createElement("span");
-	    $(valueData).addClass("spanValue");
+		var icon = document.createElement("span");
+		$(icon).addClass("removeIcon");
+		var nameData = document.createElement("span");
+		$(nameData).addClass("spanValue");
+		var valueData = document.createElement("span");
+		$(valueData).addClass("spanValue");
 
 		$(tdName).append(icon);
 		$(tdName).append(nameData);
@@ -172,18 +167,18 @@ azkaban.JobEditView = Backbone.View.extend({
 		nameData.myparent = tdName;
 
 		$(tdValue).append(valueData);
-	    $(tdValue).addClass("editable");
+			$(tdValue).addClass("editable");
 		valueData.myparent = tdValue;
 		
 		$(tr).addClass("editRow");
-	  	$(tr).append(tdName);
-	  	$(tr).append(tdValue);
-
-	  	$(tr).insertBefore("#addRow");
-	  	return tr;
+		$(tr).append(tdName);
+		$(tr).append(tdValue);
 
+		$(tr).insertBefore("#addRow");
+		return tr;
 	},
-	handleEditColumn : function(evt) {
+	
+	handleEditColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 	
 		if (this.editingTarget != curTarget) {
@@ -202,9 +197,9 @@ azkaban.JobEditView = Backbone.View.extend({
 			$(input).focus();
 			var obj = this;
 			$(input).keypress(function(evt) {
-		    	if(evt.which == 13) {
-			        obj.closeEditingTarget(evt);
-			    }
+				if (evt.which == 13) {
+					obj.closeEditingTarget(evt);
+				}
 			});
 			
 			this.editingTarget = curTarget;
@@ -213,41 +208,42 @@ azkaban.JobEditView = Backbone.View.extend({
 		evt.preventDefault();
 		evt.stopPropagation();
 	},
-	handleRemoveColumn : function(evt) {
+	
+	handleRemoveColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 		// Should be the table
 		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
 	},
+	
 	closeEditingTarget: function(evt) {
-		if (this.editingTarget != null && this.editingTarget != evt.target && this.editingTarget != evt.target.myparent ) {
-	  		var input = $(this.editingTarget).children("input")[0];
-	  		var text = $(input).val();
-	  		$(input).remove();
-
-		    var valueData = document.createElement("span");
-		    $(valueData).addClass("spanValue");
-		    $(valueData).text(text);
-
-	  		if ($(this.editingTarget).hasClass("name")) {
-		  		var icon = document.createElement("span");
-		    	$(icon).addClass("removeIcon");
-		    	$(this.editingTarget).append(icon);
-		    }
+		if (this.editingTarget != null && 
+				this.editingTarget != evt.target && 
+				this.editingTarget != evt.target.myparent) {
+			var input = $(this.editingTarget).children("input")[0];
+			var text = $(input).val();
+			$(input).remove();
+
+			var valueData = document.createElement("span");
+			$(valueData).addClass("spanValue");
+			$(valueData).text(text);
+
+			if ($(this.editingTarget).hasClass("name")) {
+				var icon = document.createElement("span");
+				$(icon).addClass("removeIcon");
+				$(this.editingTarget).append(icon);
+			}
 
-		    $(this.editingTarget).removeClass("editing");
-		    $(this.editingTarget).append(valueData);
-		    valueData.myparent=this.editingTarget;
-		    this.editingTarget = null;
-	  	}
+			$(this.editingTarget).removeClass("editing");
+			$(this.editingTarget).append(valueData);
+			valueData.myparent = this.editingTarget;
+			this.editingTarget = null;
+		}
 	}
 });
 
 $(function() {
-
-
-	jobEditView = new azkaban.JobEditView({el:$('#job-edit-pane')});
-	
-	 
-	
+	jobEditView = new azkaban.JobEditView({
+		el: $('#job-edit-pane')
+	});
 });

diff --git a/src/web/js/azkaban.jobhistory.view.js b/src/web/js/azkaban.jobhistory.view.js
index 29f0d12..9607258 100644
--- a/src/web/js/azkaban.jobhistory.view.js
+++ b/src/web/js/azkaban.jobhistory.view.js
@@ -20,15 +20,22 @@ var jobHistoryView;
 azkaban.JobHistoryView = Backbone.View.extend({
 	events: {
 	},
+	
 	initialize: function(settings) {
 		this.render();
 	},
-	render : function(self) {
+	
+	render: function(self) {
 		var data = this.model.get("data");
 	
-		var margin = {top: 20, right: 20, bottom: 30, left: 70},
-	    width = $(this.el).width() - margin.left - margin.right,
-	    height = 300 - margin.top - margin.bottom;
+		var margin = {
+			top: 20, 
+			right: 20, 
+			bottom: 30, 
+			left: 70
+		};
+	  var width = $(this.el).width() - margin.left - margin.right;
+	  var height = 300 - margin.top - margin.bottom;
 	    
 		var x = d3.time.scale()
 		    .range([0, width]);
@@ -36,9 +43,9 @@ azkaban.JobHistoryView = Backbone.View.extend({
 		var y = d3.scale.linear()
 		    .range([height, 0]);
 	    
-	    var xAxis = d3.svg.axis()
-		    .scale(x)
-		    .orient("bottom");
+		var xAxis = d3.svg.axis()
+				.scale(x)
+				.orient("bottom");
 
 		var yAxis = d3.svg.axis()
 		    .scale(y)
@@ -59,49 +66,56 @@ azkaban.JobHistoryView = Backbone.View.extend({
 		    .append("g")
 		    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 		  
-		  var xextent = d3.extent(data, function(d) { return d.startTime; });
-		  var diff = (xextent[1] - xextent[0])*0.05;
-		  
-		  xextent[0] -= diff;
-		  xextent[1] += diff;
-		  x.domain(xextent);
-		  
-		  var yextent = d3.extent(data, function(d) { return d.endTime - d.startTime; });
-		  var upperYbound = yextent[1]*1.25;
-		  y.domain([0, upperYbound]);
+		var xextent = d3.extent(data, function(d) {
+			return d.startTime;
+		});
+		var diff = (xextent[1] - xextent[0])*0.05;
 		
-		  svg.append("g")
-		      .attr("class", "x axis")
-		      .attr("transform", "translate(0," + height + ")")
-		      .call(xAxis);
+		xextent[0] -= diff;
+		xextent[1] += diff;
+		x.domain(xextent);
 		
-		  svg.append("g")
-		      .attr("class", "y axis")
-		      .call(yAxis)
-		      .append("text")
-		      .attr("transform", "rotate(-90)")
-		      .attr("y", 6)
-		      .attr("dy", ".71em")
-		      .style("text-anchor", "end")
-		      .text("Duration");
+		var yextent = d3.extent(data, function(d) {
+			return d.endTime - d.startTime;
+		});
+		var upperYbound = yextent[1]*1.25;
+		y.domain([0, upperYbound]);
+	
+		svg.append("g")
+				.attr("class", "x axis")
+				.attr("transform", "translate(0," + height + ")")
+				.call(xAxis);
+	
+		svg.append("g")
+				.attr("class", "y axis")
+				.call(yAxis)
+				.append("text")
+				.attr("transform", "rotate(-90)")
+				.attr("y", 6)
+				.attr("dy", ".71em")
+				.style("text-anchor", "end")
+				.text("Duration");
+	
+		svg.append("path")
+				.datum(data)
+				.attr("class", "line")
+				.attr("d", line);
+				
+		var node = svg.selectAll("g.node")
+				.data(data)
+				.attr("class", "node")
+				.enter().append("g")
+				.attr("transform",  function(d) {
+			return "translate(" + x(d.startTime) + "," + y(d.endTime-d.startTime) + ")";
+		});
 		
-		  svg.append("path")
-		      .datum(data)
-		      .attr("class", "line")
-		      .attr("d", line);
-		      
-		  var node = svg.selectAll("g.node")
-		  				.data(data)
-		  				.attr("class", "node")
-		  				.enter().append("g")
-		  				.attr("transform",  function(d) { return "translate(" + x(d.startTime) + "," + y(d.endTime-d.startTime) + ")";});
-
-		  
-		  node.append("circle")
-		  	  .attr("r", 5)
-		  	  .attr("class", function(d) {return d.status;})
-		  	  .append("svg:title")
-		  		.text(function(d) { return d.execId + ":" + d.flowId + " ran in " + getDuration(d.startTime, d.endTime)});
+		node.append("circle")
+				.attr("r", 5)
+				.attr("class", function(d) {return d.status;})
+				.append("svg:title")
+				.text(function(d) {
+			return d.execId + ":" + d.flowId + " ran in " + getDuration(d.startTime, d.endTime);
+		});
 	}
 });
 
@@ -112,6 +126,11 @@ $(function() {
 	var selected;
 	var series = dataSeries;
 	dataModel = new azkaban.DataModel();
-	dataModel.set({"data":series});
-	jobDurationView = new azkaban.JobHistoryView({el:$('#timeGraph'), model: dataModel});
+	dataModel.set({
+		"data": series
+	});
+	jobDurationView = new azkaban.JobHistoryView({
+		el: $('#timeGraph'), 
+		model: dataModel
+	});
 });

diff --git a/src/web/js/azkaban.layout.js b/src/web/js/azkaban.layout.js
index 6938572..6f6c2c5 100644
--- a/src/web/js/azkaban.layout.js
+++ b/src/web/js/azkaban.layout.js
@@ -41,9 +41,16 @@ function layoutGraph(nodes, edges) {
 		//}
 		
 		var width = nodes[i].label.length * 10;
-		var node = { id: nodes[i].id, node: nodes[i], level: nodes[i].level, in:[], out:[], width: width, x:0 };
+		var node = {
+			id: nodes[i].id, 
+			node: nodes[i], 
+			level: nodes[i].level, 
+			in: [], 
+			out: [], 
+			width: width, 
+			x: 0 
+		};
 		nodeMap[nodes[i].id] = node;
-
 		maxLayer = Math.max(node.level, maxLayer);
 		if(!layers[node.level]) {
 			layers[node.level] = [];
@@ -70,7 +77,15 @@ function layoutGraph(nodes, edges) {
 		var guides = [];
 		
 		for (var j = srcNode.level + 1; j < destNode.level; ++j) {
-			var dummyNode = {level: j, in: [], x: lastNode.x, out: [], realSrc: srcNode, realDest: destNode, width: 10};
+			var dummyNode = {
+				level: j, 
+				in: [], 
+				x: lastNode.x, 
+				out: [], 
+				realSrc: srcNode, 
+				realDest: destNode, 
+				width: 10
+			};
 			layers[j].push(dummyNode);
 			dummyNode.in.push(lastNode);
 			lastNode.out.push(dummyNode);
@@ -114,7 +129,6 @@ function layoutGraph(nodes, edges) {
 		sort(layers[i]);
 		spreadLayerSmart(layers[i]);
 	}
-	
 
 	// Space it vertically
 	spaceVertically(layers, maxLayer);
@@ -134,7 +148,6 @@ function layoutGraph(nodes, edges) {
 		var dest = edges[i].target;
 		
 		var edgeId = src + ">>" + dest;
-
 		if (edgeDummies[edgeId] && edgeDummies[edgeId].length > 0) {
 			var prevX = nodeMap[src].x;
 			var destX = nodeMap[dest].x; 
@@ -146,7 +159,6 @@ function layoutGraph(nodes, edges) {
 				guides.push(point);
 				
 				var nextX = j == dummies.length - 1 ? destX: dummies[j + 1].x; 
-
 				if (point.x != prevX && point.x != nextX) {
 					// Add gap
 					if ((point.x > prevX) == (point.x > nextX)) {
@@ -166,7 +178,13 @@ function layoutGraph(nodes, edges) {
 
 function spreadLayerSmart(layer) {
 	var ranges = [];
-	ranges.push({start: 0, end:0, width: layer[0].width, x: layer[0].x, index: 0});
+	ranges.push({
+		start: 0, 
+		end: 0, 
+		width: layer[0].width, 
+		x: layer[0].x, 
+		index: 0
+	});
 	var largestRangeIndex = -1;
 	
 	var totalX = layer[0].x;
@@ -180,11 +198,17 @@ function spreadLayerSmart(layer) {
 		if (delta == 0) {
 			prevRange.end = i;
 			prevRange.width += layer[i].width;
-			totalWidth+=layer[i].width;
+			totalWidth += layer[i].width;
 		}
 		else {
-			totalWidth+=Math.max(layer[i].width, delta);
-			ranges.push({start: i, end: i, width: layer[i].width, x: layer[i].x, index: ranges.length});
+			totalWidth += Math.max(layer[i].width, delta);
+			ranges.push({
+				start: i, 
+				end: i, 
+				width: layer[i].width, 
+				x: layer[i].x, 
+				index: ranges.length
+			});
 		}
 		
 		totalX += layer[i].x;
@@ -220,34 +244,31 @@ function spreadLayerSmart(layer) {
 		endIndex = e + 1;
 	}
 	
-	for (var i=startIndex; i >= 0; --i) {
+	for (var i = startIndex; i >= 0; --i) {
 		var range = ranges[i];
 		var crossPointS = range.x + range.width/2;
 		var crossPointE = ranges[i + 1].x - ranges[i + 1].width/2;
-		
 		if (crossPointE < crossPointS) {
 			range.x -= crossPointS - crossPointE;
 		}
 	}
 	
-	for (var i=endIndex; i < ranges.length; ++i) {
+	for (var i = endIndex; i < ranges.length; ++i) {
 		var range = ranges[i];
 		var crossPointE = range.x - range.width/2;
 		var crossPointS = ranges[i - 1].x + ranges[i - 1].width/2;
-		
 		if (crossPointE < crossPointS) {
 			range.x += crossPointS - crossPointE;
 		}
 	}
 	
-	for (var i=0; i < ranges.length; ++i) {
+	for (var i = 0; i < ranges.length; ++i) {
 		var range = ranges[i];
 		if (range.start == range.end) {
 			layer[range.start].x = range.x;
 		}
 		else {
 			var start = range.x - range.width/2;
-			
 			for (var j=range.start;j <=range.end; ++j) {
 				layer[j].x = start + layer[j].width/2;
 				start += layer[j].width;
@@ -256,23 +277,21 @@ function spreadLayerSmart(layer) {
 	}
 }
 
-
 function spaceVertically(layers, maxLayer) {
 	var startY = 0;
 	var startLayer = layers[0];
-	for (var i=0; i < startLayer.length; ++i) {
+	for (var i = 0; i < startLayer.length; ++i) {
 		startLayer[i].y = startY;
 	}
 	
 	var minHeight = 50;
-	for (var a=1; a <= maxLayer; ++a) {
+	for (var a = 1; a <= maxLayer; ++a) {
 		var maxDelta = 0;
 		var layer = layers[a];
-		for (var i=0; i < layer.length; ++i) {
-			for (var j=0; j < layer[i].in.length; ++j) {
+		for (var i = 0; i < layer.length; ++i) {
+			for (var j = 0; j < layer[i].in.length; ++j) {
 				var upper = layer[i].in[j];
 				var delta = Math.abs(upper.x - layer[i].x);
-				
 				maxDelta = Math.max(maxDelta, delta);
 			}
 		}
@@ -282,11 +301,10 @@ function spaceVertically(layers, maxLayer) {
 		
 		calcHeight = Math.min(calcHeight, maxHeight); 
 		startY += Math.max(calcHeight, minHeight);
-		for (var i=0; i < layer.length; ++i) {
-			layer[i].y=startY;
+		for (var i = 0; i < layer.length; ++i) {
+			layer[i].y = startY;
 		}
 	}
-
 }
 
 function uncrossWithIn(layer) {
@@ -301,7 +319,6 @@ function findAverage(nodes) {
 	for (var i = 0; i < nodes.length; ++i) {
 		sum += nodes[i].x;
 	}
-	
 	return sum/nodes.length;
 }
 

diff --git a/src/web/js/azkaban.login.js b/src/web/js/azkaban.login.js
index 423c5cf..1ac077f 100644
--- a/src/web/js/azkaban.login.js
+++ b/src/web/js/azkaban.login.js
@@ -17,45 +17,53 @@
 $.namespace('azkaban');
 
 var loginView;
-azkaban.LoginView= Backbone.View.extend({
-  events : {
-    "click #loginSubmit": "handleLogin",
-    'keypress input': 'handleKeyPress'
-  },
-  initialize : function(settings) {
-	 $('#errorMsg').hide();
-  },
-  handleLogin : function(evt) {
-	 console.log("Logging in.");
-	 var username = $("#username").val();
-	 var password = $("#password").val();
+azkaban.LoginView = Backbone.View.extend({
+	events: {
+		"click #login-submit": "handleLogin",
+		'keypress input': 'handleKeyPress'
+	},
+
+	initialize: function(settings) {
+		$('#error-msg').hide();
+	},
+	
+	handleLogin: function(evt) {
+		console.log("Logging in.");
+		var username = $("#username").val();
+		var password = $("#password").val();
 	 
-     $.ajax({
-     	async: "false",
-     	url: contextURL,
-     	dataType: "json",
-     	type: "POST",
-     	data: {action:"login", username:username, password:password},
-     	success: function(data) {
-     		if (data.error) {
-     			$('#errorMsg').text(data.error);
-     			$('#errorMsg').slideDown('fast');
-     		}
-     		else {
-     			document.location.reload();
-     		}
-     	}
-     });
-  },
-  handleKeyPress : function(evt) {
-	  if (evt.charCode == 13 || evt.keyCode == 13) {
-	  	this.handleLogin();
-  	  }
-  },
-  render: function() {
-  }
+		$.ajax({
+			async: "false",
+			url: contextURL,
+			dataType: "json",
+			type: "POST",
+			data: {
+				action: "login", 
+				username: username, 
+				password: password
+			},
+			success: function(data) {
+				if (data.error) {
+					$('#error-msg').text(data.error);
+					$('#error-msg').slideDown('fast');
+				}
+				else {
+					document.location.reload();
+				}
+			}
+		});
+	},
+	
+	handleKeyPress: function(evt) {
+		if (evt.charCode == 13 || evt.keyCode == 13) {
+			this.handleLogin();
+		}
+	},
+	
+	render: function() {
+	}
 });
 
 $(function() {
-	loginView = new azkaban.LoginView({el:$('#loginForm')});
+	loginView = new azkaban.LoginView({el: $('#login-form')});
 });

diff --git a/src/web/js/azkaban.main.view.js b/src/web/js/azkaban.main.view.js
index 161c6ab..62dc8f5 100644
--- a/src/web/js/azkaban.main.view.js
+++ b/src/web/js/azkaban.main.view.js
@@ -17,189 +17,199 @@
 $.namespace('azkaban');
 
 var projectTableView;
-azkaban.ProjectTableView= Backbone.View.extend({
-  events : {
-    "click .project-expand": "expandProject"
-  },
-  initialize : function(settings) {
-
-  },
-  expandProject : function(evt) {
-    if (evt.target.tagName!="SPAN") {
-    	return;
-    }
-    
-    var target = evt.currentTarget;
-    var targetId = target.id;
-    var requestURL = contextURL + "/manager";
-    
-    var targetExpanded = $('#' + targetId + '-child');
-    var targetTBody = $('#' + targetId + '-tbody');
-    
-    var createFlowListFunction = this.createFlowListTable;
-    
-    if (target.loading) {
-    	console.log("Still loading.");
-    }
-    else if (target.loaded) {
-    	if($(targetExpanded).is(':visible')) {
-    		$(target).addClass('expand').removeClass('collapse');
-    		$(targetExpanded).fadeOut("fast");
-    	}
-    	else {
-    	    $(target).addClass('collapse').removeClass('expand');
-    		$(targetExpanded).fadeIn();
-    	}
-    }
-    else {
-	    // projectId is available
-	    $(target).addClass('wait').removeClass('collapse').removeClass('expand');
-	    target.loading = true;
-	    
-	    $.get(
-	      requestURL,
-	      {"project": targetId, "ajax":"fetchprojectflows"},
-	      function(data) {
-	        console.log("Success");
-	        target.loaded = true;
-	        target.loading = false;
-	        
-	        createFlowListFunction(data, targetTBody);
-	        
-			$(target).addClass('collapse').removeClass('wait');
-	    	$(targetExpanded).fadeIn("fast");
-	      },
-	      "json"
-	    );
-    }
-  },
-  render: function() {
-  },
-  createFlowListTable : function(data, innerTable) {
-  	var flows = data.flows;
-  	flows.sort(function(a,b){return a.flowId.localeCompare(b.flowId);});
-  	
-  	var requestURL = contextURL + "/manager?project=" + data.project + "&flow=";
-  	for (var i = 0; i < flows.length; ++i) {
-  		var id = flows[i].flowId;
-  		
-  		var tr = document.createElement("tr");
-		var idtd = document.createElement("td");
-		$(idtd).addClass("tb-name");
-  		
-  		var ida = document.createElement("a");
-		ida.project = data.project;
-		$(ida).text(id);
-		$(ida).attr("href", requestURL + id);
+azkaban.ProjectTableView = Backbone.View.extend({
+	events: {
+		"click .project-expand": "expandProject"
+	},
+	
+	initialize: function(settings) {
+	},
+	
+	expandProject: function(evt) {
+		if (evt.target.tagName == "A") {
+			return;
+		}
+		
+		var target = evt.currentTarget;
+		var targetId = target.id;
+		var requestURL = contextURL + "/manager";
+		
+		var targetExpanded = $('#' + targetId + '-child');
+		var targetTBody = $('#' + targetId + '-tbody');
+		var createFlowListFunction = this.createFlowListTable;
 		
-		$(idtd).append(ida);
-		$(tr).append(idtd);
-		$(innerTable).append(tr);
-  	}
-  }
+		if (target.loading) {
+			console.log("Still loading.");
+		}
+		else if (target.loaded) {
+			if ($(targetExpanded).is(':visible')) {
+				$(target).addClass('expanded').removeClass('collapsed');
+				var expander = $(target).children('.az-expander')[0];
+				$(expander).removeClass('glyphicon-chevron-up');
+				$(expander).addClass('glyphicon-chevron-down');
+				$(targetExpanded).fadeOut("fast");
+			}
+			else {
+				$(target).addClass('collapsed').removeClass('expanded');
+				var expander = $(target).children('.az-expander')[0];
+				$(expander).removeClass('glyphicon-chevron-down');
+				$(expander).addClass('glyphicon-chevron-up');
+				$(targetExpanded).fadeIn();
+			}
+		}
+		else {
+			// projectId is available
+			$(target).addClass('wait').removeClass('collapsed').removeClass('expanded');
+			target.loading = true;
+
+			var request = {
+				"project": targetId, 
+				"ajax": "fetchprojectflows"
+			};
+
+			var successHandler = function(data) {
+				console.log("Success");
+				target.loaded = true;
+				target.loading = false;
+				
+				createFlowListFunction(data, targetTBody);
+				
+				$(target).addClass('collapsed').removeClass('wait');
+				var expander = $(target).children('.az-expander')[0];
+				$(expander).removeClass('glyphicon-chevron-down');
+				$(expander).addClass('glyphicon-chevron-up');
+				$(targetExpanded).fadeIn("fast");
+			};
+			
+			$.get(requestURL, request, successHandler, "json");
+		}
+	},
+
+	render: function() {
+	},
+	
+	createFlowListTable: function(data, innerTable) {
+		var flows = data.flows;
+		flows.sort(function(a,b) {
+			return a.flowId.localeCompare(b.flowId);
+		});
+		var requestURL = contextURL + "/manager?project=" + data.project + "&flow=";
+		for (var i = 0; i < flows.length; ++i) {
+			var id = flows[i].flowId;
+			var tr = document.createElement("tr");
+			var idtd = document.createElement("td");
+			$(idtd).addClass("tb-name");
+			
+			var ida = document.createElement("a");
+			ida.project = data.project;
+			$(ida).text(id);
+			$(ida).attr("href", requestURL + id);
+			
+			$(idtd).append(ida);
+			$(tr).append(idtd);
+			$(innerTable).append(tr);
+		}
+	}
 });
 
 var projectHeaderView;
-azkaban.ProjectHeaderView= Backbone.View.extend({
-  events : {
-    "click #create-project-btn":"handleCreateProjectJob"
-  },
-  initialize : function(settings) {
-    if (settings.errorMsg && settings.errorMsg != "null") {
-      // Chrome bug in displaying placeholder text. Need to hide the box.
-      $('#searchtextbox').hide();
-      $('.messaging').addClass("error");
-      $('.messaging').removeClass("success");
-      $('.messaging').html(settings.errorMsg);
-    }
-    else if (settings.successMsg && settings.successMsg != "null") {
-      $('#searchtextbox').hide();
-      $('.messaging').addClass("success");
-      $('.messaging').removeClass("error");
-      $('#message').html(settings.successMsg);
-    }
-    else {
-      $('#searchtextbox').show();
-      $('.messaging').removeClass("success");
-      $('.messaging').removeClass("error");
-    }
-    
-    $('#messageClose').click(function() {
-      $('#searchtextbox').show();
-      
-      $('.messaging').slideUp('fast', function() {
-        $('.messaging').removeClass("success");
-        $('.messaging').removeClass("error");
-      });
-    });
-  },
-  handleCreateProjectJob : function(evt) {
-    console.log("click create project");
-      $('#create-project').modal({
-          closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-          position: ["20%",],
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '565px'
-          },
-          onShow: function (dialog) {
-            var modal = this;
-            $("#errorMsg").hide();
-          }
-        });
-  },
-  render: function() {
-  }
+azkaban.ProjectHeaderView = Backbone.View.extend({
+	events: {
+		"click #create-project-btn": "handleCreateProjectJob"
+	},
+
+	initialize: function(settings) {
+		console.log("project header view initialize.");
+		if (settings.errorMsg && settings.errorMsg != "null") {
+			$('#messaging').addClass("alert-danger");
+			$('#messaging').removeClass("alert-success");
+			$('#messaging-message').html(settings.errorMsg);
+		}
+		else if (settings.successMsg && settings.successMsg != "null") {
+			$('#messaging').addClass("alert-success");
+			$('#messaging').removeClass("alert-danger");
+			$('#messaging-message').html(settings.successMsg);
+		}
+		else {
+			$('#messaging').removeClass("alert-success");
+			$('#messaging').removeClass("alert-danger");
+		}
+	},
+
+	handleCreateProjectJob: function(evt) {
+		$('#create-project-modal').modal();
+	},
+	
+	render: function() {
+	}
 });
 
 var createProjectView;
-azkaban.CreateProjectView= Backbone.View.extend({
-  events : {
-    "click #create-btn": "handleCreateProject"
-  },
-  initialize : function(settings) {
-    $("#errorMsg").hide();
-  },
-  handleCreateProject : function(evt) {
-	 // First make sure we can upload
-	 var projectName = $('#path').val();
-	 var description = $('#description').val();
-
-     console.log("Creating");
-     $.ajax({
-     	async: "false",
-     	url: "manager",
-     	dataType: "json",
-     	type: "POST",
-     	data: {action:"create", name:projectName, description:description},
-     	success: function(data) {
-     		if (data.status == "success") {
-     			if (data.action == "redirect") {
-     				window.location = data.path;
-     			}
-     		}
-     		else {
-     			if (data.action == "login") {
- 					window.location = "";
-     			}
-     			else {
-	     			$("#errorMsg").text("ERROR: " + data.message);
-	    			$("#errorMsg").slideDown("fast");
-    			}
-     		}
-     	}
-     });
+azkaban.CreateProjectView = Backbone.View.extend({
+	events: {
+		"click #create-btn": "handleCreateProject"
+	},
+	
+	initialize: function(settings) {
+		$("#modal-error-msg").hide();
+	},
+	
+	handleCreateProject: function(evt) {
+		// First make sure we can upload
+		var projectName = $('#path').val();
+		var description = $('#description').val();
+		console.log("Creating");
+		$.ajax({
+			async: "false",
+			url: "manager",
+			dataType: "json",
+			type: "POST",
+			data: {
+				action: "create", 
+				name: projectName, 
+				description: description
+			},
+			success: function(data) {
+				if (data.status == "success") {
+					if (data.action == "redirect") {
+						window.location = data.path;
+					}
+				}
+				else {
+					if (data.action == "login") {
+						window.location = "";
+					}
+					else {
+						$("#modal-error-msg").text("ERROR: " + data.message);
+						$("#modal-error-msg").slideDown("fast");
+					}
+				}
+			}
+		});
+	},
 
-  },
-  render: function() {
-  }
+	render: function() {
+	}
 });
 
 var tableSorterView;
 $(function() {
-	projectHeaderView = new azkaban.ProjectHeaderView({el:$( '#all-jobs-content'), successMsg: successMessage, errorMsg: errorMessage });
-	projectTableView = new azkaban.ProjectTableView({el:$('#all-jobs')});
-	tableSorterView = new azkaban.TableSorter({el:$('#all-jobs'), initialSort: $('.tb-name')});
-	uploadView = new azkaban.CreateProjectView({el:$('#create-project')});
+	projectHeaderView = new azkaban.ProjectHeaderView({
+		el: $('#create-project'), 
+		successMsg: successMessage, 
+		errorMsg: errorMessage 
+	});
+	
+	projectTableView = new azkaban.ProjectTableView({
+		el: $('#all-jobs')
+	});
+	
+	tableSorterView = new azkaban.TableSorter({
+		el: $('#all-jobs'), 
+		initialSort: $('.tb-name')
+	});
+	
+	uploadView = new azkaban.CreateProjectView({
+		el: $('#create-project-modal')
+	});
 });

diff --git a/src/web/js/azkaban.message.dialog.view.js b/src/web/js/azkaban.message.dialog.view.js
index 5421614..cea0852 100644
--- a/src/web/js/azkaban.message.dialog.view.js
+++ b/src/web/js/azkaban.message.dialog.view.js
@@ -17,39 +17,28 @@
 $.namespace('azkaban');
 
 var messageDialogView;
-
 azkaban.MessageDialogView = Backbone.View.extend({
-  events : {
-  },
-  initialize : function(settings) {
+	events: {
+	},
 
-  },
-  show: function(title, message, callback) {
-  	$("#azkabanMessageDialogTitle").text(title);
-  	$("#azkabanMessageDialogText").text(message);
-  	this.callback = callback;
-  	
-      $(this.el).modal({
-          position: ["20%",],
-          closeClass: "continueclass",
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '565px'
-          },
-          onShow: function (dialog) {
-          },
-          onClose: function() {
-          	if (callback) {
-          		callback.call();
-          	}
-          	$.modal.close();
-          }
-     });
-  }
+	initialize: function(settings) {
+	},
+	
+	show: function(title, message, callback) {
+		$("#azkaban-message-dialog-title").text(title);
+		$("#azkaban-message-dialog-text").text(message);
+		this.callback = callback;
+		$(this.el).on('hidden.bs.modal', function() {
+			if (callback) {
+				callback.call();
+			}
+		});
+		$(this.el).modal();
+	}
 });
 
-
 $(function() {
-	messageDialogView = new azkaban.MessageDialogView({el: $('#azkabanMessageDialog')});
+	messageDialogView = new azkaban.MessageDialogView({
+		el: $('#azkaban-message-dialog')
+	});
 });

diff --git a/src/web/js/azkaban.permission.view.js b/src/web/js/azkaban.permission.view.js
index 5cfc495..fbd332c 100644
--- a/src/web/js/azkaban.permission.view.js
+++ b/src/web/js/azkaban.permission.view.js
@@ -19,34 +19,40 @@ $.namespace('azkaban');
 var permissionTableView;
 var groupPermissionTableView;
 
-azkaban.PermissionTableView= Backbone.View.extend({
-  events : {
-	"click button": "handleChangePermission"
-  },
-  initialize : function(settings) {
-  	this.group = settings.group;
-  	this.proxy = settings.proxy;
-  },
-  render: function() {
-  },
-  handleChangePermission: function(evt) {
-  	  var currentTarget = evt.currentTarget;
-  	  changePermissionView.display(currentTarget.id, false, this.group, this.proxy);
-  }
+azkaban.PermissionTableView = Backbone.View.extend({
+	events : {
+		"click button": "handleChangePermission"
+	},
+	
+	initialize : function(settings) {
+		this.group = settings.group;
+		this.proxy = settings.proxy;
+	},
+	
+	render: function() {
+	},
+	
+	handleChangePermission: function(evt) {
+		var currentTarget = evt.currentTarget;
+		changePermissionView.display(currentTarget.id, false, this.group, this.proxy);
+	}
 });
 
 var proxyTableView;
 azkaban.ProxyTableView= Backbone.View.extend({
-  events : {
-	"click button": "handleRemoveProxy"
-  },
-  initialize : function(settings) {
-  },
-  render: function() {
-  },
-  handleRemoveProxy: function(evt) {
-	removeProxyView.display($(evt.currentTarget).attr("name"));
-  }
+	events : {
+		"click button": "handleRemoveProxy"
+	},
+	
+	initialize : function(settings) {
+	},
+	
+	render: function() {
+	},
+	
+	handleRemoveProxy: function(evt) {
+		removeProxyView.display($(evt.currentTarget).attr("name"));
+	}
 });
 
 var removeProxyView;
@@ -54,46 +60,36 @@ azkaban.RemoveProxyView = Backbone.View.extend({
 	events: {
 		"click #remove-proxy-btn": "handleRemoveProxy"
 	},
+	
 	initialize : function(settings) {
-		$('#removeProxyErrorMsg').hide();
+		$('#remove-proxy-error-msg').hide();
 	},
+	
 	display: function(proxyName) {
 		this.el.proxyName = proxyName;
 		$("#proxyRemoveMsg").text("Removing proxy user '" + proxyName + "'");
-	  	 $(this.el).modal({
-	          closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-	          position: ["20%",],
-	          containerId: 'confirm-container',
-	          containerCss: {
-	            'height': '220px',
-	            'width': '565px'
-	          },
-	          onShow: function (dialog) {
-	            var modal = this;
-	            $("#removeProxyErrorMsg").hide();
-	          }
-        });
+		$(this.el).modal();
 	},
 	handleRemoveProxy: function() {
-	  	var requestURL = contextURL + "/manager";
+		var requestURL = contextURL + "/manager";
 		var proxyName = this.el.proxyName;
+		var requestData = {
+			"project": projectName, 
+			"name": proxyName, 
+			"ajax": "removeProxyUser"
+		};
+		var successHandler = function(data) {
+			console.log("Output");
+			if (data.error) {
+				$("#removeProxyErrorMsg").text(data.error);
+				$("#removeProxyErrorMsg").show();
+				return;
+			}
+			var replaceURL = requestURL + "?project=" + projectName +"&permissions";
+			window.location.replace(replaceURL);
+		};
 
-	  	$.get(
-	  	      requestURL,
-	  	      {"project": projectName, "name": proxyName, "ajax":"removeProxyUser"},
-	  	      function(data) {
-	  	      	  console.log("Output");
-	  	      	  if (data.error) {
-	  	      	  	$("#removeProxyErrorMsg").text(data.error);
-	  	      	  	$("#removeProxyErrorMsg").show();
-	  	      	  	return;
-	  	      	  }
-	  	      	  
-	  	      	  var replaceURL = requestURL + "?project=" + projectName +"&permissions";
-	  	          window.location.replace(replaceURL);
-	  	      },
-	  	      "json"
-	  	    );
+		$.get(requestURL, requestData, successHandler, "json");
 	}
 });
 
@@ -102,233 +98,241 @@ azkaban.AddProxyView = Backbone.View.extend({
 	events: {
 		"click #add-proxy-btn": "handleAddProxy"
 	},
+	
 	initialize : function(settings) {
-		$('#proxyErrorMsg').hide();
+		$('#add-proxy-error-msg').hide();
 	},
+	
 	display: function() {
-	  	 $(this.el).modal({
-	          closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-	          position: ["20%",],
-	          containerId: 'confirm-container',
-	          containerCss: {
-	            'height': '220px',
-	            'width': '565px'
-	          },
-	          onShow: function (dialog) {
-	            var modal = this;
-	            $("#errorMsg").hide();
-	          }
-        });
+		$(this.el).modal();
 	},
+	
 	handleAddProxy: function() {
-	  	var requestURL = contextURL + "/manager";
-	  	var name = $('#proxy-user-box').val();
-		
-	  	$.get(
-	  	      requestURL,
-	  	      {"project": projectName, "name": name, "ajax":"addProxyUser"},
-	  	      function(data) {
-	  	      	  console.log("Output");
-	  	      	  if (data.error) {
-	  	      	  	$("#proxyErrorMsg").text(data.error);
-	  	      	  	$("#proxyErrorMsg").show();
-	  	      	  	return;
-	  	      	  }
-	  	      	  
-	  	      	  var replaceURL = requestURL + "?project=" + projectName +"&permissions";
-	  	          window.location.replace(replaceURL);
-	  	      },
-	  	      "json"
-	  	    );
+		var requestURL = contextURL + "/manager";
+		var name = $('#proxy-user-box').val();
+		var requestData = {
+			"project": projectName, 
+			"name": name, 
+			"ajax":"addProxyUser"
+		};
+	
+		var successHandler = function(data) {
+			console.log("Output");
+			if (data.error) {
+				$("#proxyErrorMsg").text(data.error);
+				$("#proxyErrorMsg").show();
+				return;
+			}
+			
+			var replaceURL = requestURL + "?project=" + projectName +"&permissions";
+			window.location.replace(replaceURL);
+		};
+		$.get(requestURL, requestData, successHandler, "json");
 	}
 });
 
 var changePermissionView;
 azkaban.ChangePermissionView= Backbone.View.extend({
-  events : {
-  	"click input[type=checkbox]": "handleCheckboxClick",
-  	"click #change-btn": "handleChangePermissions"
-  },
-  initialize : function(settings) {
-  	$('#errorMsg').hide();
-  },
-  display: function(userid, newPerm, group, proxy) {
-  	// 6 is the length of the prefix "group-"
-  	this.userid = group ? userid.substring(6, userid.length) : userid;
-  	if(group == true) {
-  		this.userid = userid.substring(6, userid.length)
-  	} else if (proxy == true) {
-  		this.userid = userid.substring(6, userid.length)
-  	} else {
-  		this.userid = userid
-  	}
-  	
-  	this.permission = {};
-	$('#user-box').val(this.userid);
-	this.newPerm = newPerm;
-	this.group = group;
+	events: {
+		"click input[type=checkbox]": "handleCheckboxClick",
+		"click #change-btn": "handleChangePermissions"
+	},
 	
-	var prefix = userid;
-	var adminInput = $("#" + prefix + "-admin-checkbox");
-	var readInput = $("#" + prefix + "-read-checkbox");
-	var writeInput = $("#" + prefix + "-write-checkbox");
-	var executeInput = $("#" + prefix + "-execute-checkbox");
-	var scheduleInput = $("#" + prefix + "-schedule-checkbox");
+	initialize: function(settings) {
+		$('#change-permission-error-msg').hide();
+	},
 	
-	if (newPerm) {
-		if (group) {
-			$('#change-title').text("Add New Group Permissions");
-		}
-		else if(proxy){
-			$('#change-title').text("Add New Proxy User Permissions");
+	display: function(userid, newPerm, group, proxy) {
+		// 6 is the length of the prefix "group-"
+		this.userid = group ? userid.substring(6, userid.length) : userid;
+		if(group == true) {
+			this.userid = userid.substring(6, userid.length)
+		} else if (proxy == true) {
+			this.userid = userid.substring(6, userid.length)
+		} else {
+			this.userid = userid
 		}
-		else{
-			$('#change-title').text("Add New User Permissions");
-		}
-		$('#user-box').attr("disabled", null);
 		
-		// default
-		this.permission.admin = false;
-		this.permission.read = true;
-		this.permission.write = false;
-		this.permission.execute = false;
-		this.permission.schedule = false;
-	}
-	else {
-		if (group) {
-			$('#change-title').text("Change Group Permissions");
+		this.permission = {};
+		$('#user-box').val(this.userid);
+		this.newPerm = newPerm;
+		this.group = group;
+		
+		var prefix = userid;
+		var adminInput = $("#" + prefix + "-admin-checkbox");
+		var readInput = $("#" + prefix + "-read-checkbox");
+		var writeInput = $("#" + prefix + "-write-checkbox");
+		var executeInput = $("#" + prefix + "-execute-checkbox");
+		var scheduleInput = $("#" + prefix + "-schedule-checkbox");
+		
+		if (newPerm) {
+			if (group) {
+				$('#change-title').text("Add New Group Permissions");
+			}
+			else if(proxy){
+				$('#change-title').text("Add New Proxy User Permissions");
+			}
+			else{
+				$('#change-title').text("Add New User Permissions");
+			}
+			$('#user-box').attr("disabled", null);
+			
+			// default
+			this.permission.admin = false;
+			this.permission.read = true;
+			this.permission.write = false;
+			this.permission.execute = false;
+			this.permission.schedule = false;
 		}
 		else {
-			$('#change-title').text("Change User Permissions");
+			if (group) {
+				$('#change-title').text("Change Group Permissions");
+			}
+			else {
+				$('#change-title').text("Change User Permissions");
+			}
+			
+			$('#user-box').attr("disabled", "disabled");
+			
+			this.permission.admin = $(adminInput).is(":checked");
+			this.permission.read = $(readInput).is(":checked");
+			this.permission.write = $(writeInput).is(":checked");
+			this.permission.execute = $(executeInput).is(":checked");
+			this.permission.schedule = $(scheduleInput).is(":checked");
 		}
 		
-		$('#user-box').attr("disabled", "disabled");
+		this.changeCheckbox();
 		
-		this.permission.admin = $(adminInput).is(":checked");
-		this.permission.read = $(readInput).is(":checked");
-		this.permission.write = $(writeInput).is(":checked");
-		this.permission.execute = $(executeInput).is(":checked");
-		this.permission.schedule = $(scheduleInput).is(":checked");
-	}
+		changePermissionView.render();
+		$('#change-permission').modal();
+	},
 	
-	this.changeCheckbox();
+	render: function() {
+	},
 	
-	changePermissionView.render();
-  	 $('#change-permission').modal({
-          closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-          position: ["20%",],
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '565px'
-          },
-          onShow: function (dialog) {
-            var modal = this;
-            $("#errorMsg").hide();
-          }
-        });
-  },
-  render: function() {
-  },
-  handleCheckboxClick : function(evt) {
-  	console.log("click");
-  	var targetName = evt.currentTarget.name;
-  	if(targetName == "proxy") {
-  		this.doProxy = evt.currentTarget.checked;
-  	}
-  	else {
-  		this.permission[targetName] = evt.currentTarget.checked;
-  	}
-  	this.changeCheckbox(evt);
-  },
-  changeCheckbox : function(evt) {
-    var perm = this.permission;
+	handleCheckboxClick: function(evt) {
+		console.log("click");
+		var targetName = evt.currentTarget.name;
+		if(targetName == "proxy") {
+			this.doProxy = evt.currentTarget.checked;
+		}
+		else {
+			this.permission[targetName] = evt.currentTarget.checked;
+		}
+		this.changeCheckbox(evt);
+	},
+	
+	changeCheckbox: function(evt) {
+		var perm = this.permission;
 
-  	if (perm.admin) {
-  		$("#admin-change").attr("checked", true);
-  		$("#read-change").attr("checked", true);
-  		$("#read-change").attr("disabled", "disabled");
-  		
-  		$("#write-change").attr("checked", true);
-  		$("#write-change").attr("disabled", "disabled");
+		if (perm.admin) {
+			$("#admin-change").attr("checked", true);
+			$("#read-change").attr("checked", true);
+			$("#read-change").attr("disabled", "disabled");
+			
+			$("#write-change").attr("checked", true);
+			$("#write-change").attr("disabled", "disabled");
 
-  		$("#execute-change").attr("checked", true);
-  		$("#execute-change").attr("disabled", "disabled"); 
-  		
-  		$("#schedule-change").attr("checked", true);
-  		$("#schedule-change").attr("disabled", "disabled");
-  	}
-  	else {
-  		$("#admin-change").attr("checked", false);
-  		
-  		$("#read-change").attr("checked", perm.read);
-  		$("#read-change").attr("disabled", null);
-  		  		
-  		$("#write-change").attr("checked", perm.write);
-  		$("#write-change").attr("disabled", null);
-  		
-  		$("#execute-change").attr("checked", perm.execute);
-  		$("#execute-change").attr("disabled", null);
-  		
-  		$("#schedule-change").attr("checked", perm.schedule);
+			$("#execute-change").attr("checked", true);
+			$("#execute-change").attr("disabled", "disabled"); 
+			
+			$("#schedule-change").attr("checked", true);
+			$("#schedule-change").attr("disabled", "disabled");
+		}
+		else {
+			$("#admin-change").attr("checked", false);
+			
+			$("#read-change").attr("checked", perm.read);
+			$("#read-change").attr("disabled", null);
+						
+			$("#write-change").attr("checked", perm.write);
+			$("#write-change").attr("disabled", null);
+			
+			$("#execute-change").attr("checked", perm.execute);
+			$("#execute-change").attr("disabled", null);
+			
+			$("#schedule-change").attr("checked", perm.schedule);
 		$("#schedule-change").attr("disabled", null);
-  	}
-  	
-  	$("#change-btn").removeClass("btn-disabled");
-  	$("#change-btn").attr("disabled", null);
-  	
-  	if (perm.admin || perm.read || perm.write || perm.execute || perm.schedule) {
-  		$("#change-btn").text("Commit");
-  	}
-  	else {
-  		if(	this.newPerm) {
-  			$("#change-btn").disabled = true;
-  			$("#change-btn").addClass("btn-disabled");
-  		}
-  		else {
-  			$("#change-btn").text("Remove");
-  		}
-  	}
-  },
-  handleChangePermissions : function(evt) {
-  	var requestURL = contextURL + "/manager";
-  	var name = $('#user-box').val();
-	var command = this.newPerm ? "addPermission" : "changePermission";
-	var group = this.group;
-	
-	var permission = {};
-	permission.admin = $("#admin-change").is(":checked");
-	permission.read = $("#read-change").is(":checked");
-	permission.write = $("#write-change").is(":checked");
-	permission.execute = $("#execute-change").is(":checked");
-	permission.schedule = $("#schedule-change").is(":checked");
+		}
+		
+		$("#change-btn").removeClass("btn-disabled");
+		$("#change-btn").attr("disabled", null);
+		
+		if (perm.admin || perm.read || perm.write || perm.execute || perm.schedule) {
+			$("#change-btn").text("Commit");
+		}
+		else {
+			if(	this.newPerm) {
+				$("#change-btn").disabled = true;
+				$("#change-btn").addClass("btn-disabled");
+			}
+			else {
+				$("#change-btn").text("Remove");
+			}
+		}
+	},
 	
-  	$.get(
-	      requestURL,
-	      {"project": projectName, "name": name, "ajax":command, "permissions": this.permission, "group": group},
-	      function(data) {
-	      	  console.log("Output");
-	      	  if (data.error) {
-	      	  	$("#errorMsg").text(data.error);
-	      	  	$("#errorMsg").show();
-	      	  	return;
-	      	  }
-	      	  
-	      	  var replaceURL = requestURL + "?project=" + projectName +"&permissions";
-	          window.location.replace(replaceURL);
-	      },
-	      "json"
-	    );
-  }
+	handleChangePermissions : function(evt) {
+		var requestURL = contextURL + "/manager";
+		var name = $('#user-box').val();
+		var command = this.newPerm ? "addPermission" : "changePermission";
+		var group = this.group;
+		
+		var permission = {};
+		permission.admin = $("#admin-change").is(":checked");
+		permission.read = $("#read-change").is(":checked");
+		permission.write = $("#write-change").is(":checked");
+		permission.execute = $("#execute-change").is(":checked");
+		permission.schedule = $("#schedule-change").is(":checked");
+
+		var requestData = {
+			"project": projectName, 
+			"name": name, 
+			"ajax": command, 
+			"permissions": this.permission, 
+			"group": group
+		};
+		var successHandler = function(data) {
+			console.log("Output");
+			if (data.error) {
+				$("#errorMsg").text(data.error);
+				$("#errorMsg").show();
+				return;
+			}
+			
+			var replaceURL = requestURL + "?project=" + projectName +"&permissions";
+			window.location.replace(replaceURL);
+		};
+
+		$.get(requestURL, requestData, successHandler, "json");
+	}
 });
 
 $(function() {
-	permissionTableView = new azkaban.PermissionTableView({el:$('#permissions-table'), group: false, proxy: false});
-	groupPermissionTableView = new azkaban.PermissionTableView({el:$('#group-permissions-table'), group: true, proxy: false});
-	proxyTableView = new azkaban.ProxyTableView({el:$('#proxy-user-table'), group: false, proxy: true});
-	changePermissionView = new azkaban.ChangePermissionView({el:$('#change-permission')});
-	addProxyView = new azkaban.AddProxyView({el:$('#add-proxy')});
-	removeProxyView = new azkaban.RemoveProxyView({el:$('#remove-proxy')});
+	permissionTableView = new azkaban.PermissionTableView({
+		el: $('#permissions-table'), 
+		group: false, 
+		proxy: false
+	});
+	groupPermissionTableView = new azkaban.PermissionTableView({
+		el: $('#group-permissions-table'), 
+		group: true, 
+		proxy: false
+	});
+	proxyTableView = new azkaban.ProxyTableView({
+		el: $('#proxy-user-table'), 
+		group: false, 
+		proxy: true
+	});
+	changePermissionView = new azkaban.ChangePermissionView({
+		el: $('#change-permission')
+	});
+	addProxyView = new azkaban.AddProxyView({
+		el: $('#add-proxy')
+	});
+	removeProxyView = new azkaban.RemoveProxyView({
+		el: $('#remove-proxy')
+	});
 	$('#addUser').bind('click', function() {
 		changePermissionView.display("", true, false, false);
 	});
@@ -340,5 +344,4 @@ $(function() {
 	$('#addProxyUser').bind('click', function() {
 		addProxyView.display();
 	});
-	
 });

diff --git a/src/web/js/azkaban.project.view.js b/src/web/js/azkaban.project.view.js
index 0671ede..c278d3b 100644
--- a/src/web/js/azkaban.project.view.js
+++ b/src/web/js/azkaban.project.view.js
@@ -16,349 +16,221 @@
 
 $.namespace('azkaban');
 
-var projectView;
-azkaban.ProjectView= Backbone.View.extend({
-  events : {
-      "click #project-upload-btn":"handleUploadProjectJob",
-      "click #project-delete-btn": "handleDeleteProject"
-  },
-  initialize : function(settings) {
-  },
-  handleUploadProjectJob : function(evt) {
-      console.log("click upload project");
-      $('#upload-project').modal({
-          closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-          position: ["20%",],
-          containerId: 'confirm-container',
-          containerCss: {
-            'height': '220px',
-            'width': '565px'
-          },
-          onShow: function (dialog) {
-            var modal = this;
-            $("#errorMsg").hide();
-          }
-        });
-  },
-  handleDeleteProject : function(evt) {
-	$('#delete-project').modal({
-        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-        position: ["20%",],
-        containerId: 'confirm-container',
-        containerCss: {
-          'height': '240px',
-          'width': '640px'
-        },
-        onShow: function (dialog) {
-          var modal = this;
-          $("#errorMsg").hide();
-        }
-    });
-  },
-  render: function() {
-  }
-});
-
-var uploadProjectView;
-azkaban.UploadProjectView= Backbone.View.extend({
-  events : {
-    "click #upload-btn": "handleCreateProject"
-  },
-  initialize : function(settings) {
-    $("#errorMsg").hide();
-  },
-  handleCreateProject : function(evt) {
-    $("#upload-form").submit();
-  },
-  render: function() {
-  }
-});
-
-var deleteProjectView;
-azkaban.DeleteProjectView= Backbone.View.extend({
-  events : {
-    "click #delete-btn": "handleDeleteProject"
-  },
-  initialize : function(settings) {
-  },
-  handleDeleteProject : function(evt) {
-  	$("#delete-form").submit();
-  },
-  render: function() {
-  }
-});
-
 var flowTableView;
-azkaban.FlowTableView= Backbone.View.extend({
-  events : {
-    "click .jobfolder": "expandFlowProject",
-    "mouseover .expandedFlow a": "highlight",
-    "mouseout .expandedFlow a": "unhighlight",
-    "click .runJob": "runJob",
-    "click .runWithDep": "runWithDep",
-    "click .executeFlow": "executeFlow",
-    "click .viewFlow": "viewFlow",
-    "click .viewJob": "viewJob"
-  },
-  initialize : function(settings) {
-  },
-  expandFlowProject : function(evt) {
-    if (evt.target.tagName!="SPAN") {
-    	return;
-    }
-    
-    var target = evt.currentTarget;
-    var targetId = target.id;
-    var requestURL = contextURL + "/manager";
+azkaban.FlowTableView = Backbone.View.extend({
+	events : {
+		"click .flow-expander": "expandFlowProject",
+		"mouseover .expandedFlow a": "highlight",
+		"mouseout .expandedFlow a": "unhighlight",
+		"click .runJob": "runJob",
+		"click .runWithDep": "runWithDep",
+		"click .execute-flow": "executeFlow",
+		"click .viewFlow": "viewFlow",
+		"click .viewJob": "viewJob"
+	},
+
+	initialize: function(settings) {
+	},
 
-    var targetExpanded = $('#' + targetId + '-child');
-    var targetTBody = $('#' + targetId + '-tbody');
-    
-    var createJobListFunction = this.createJobListTable;
-    
-    if (target.loading) {
-    	console.log("Still loading.");
-    }
-    else if (target.loaded) {
-    	if($(targetExpanded).is(':visible')) {
-    		$(target).addClass('expand').removeClass('collapse');
-    		$(targetExpanded).fadeOut("fast");
-    	}
-    	else {
-    	    $(target).addClass('collapse').removeClass('expand');
-    		$(targetExpanded).fadeIn();
-    	}
-    }
-    else {
-	    // projectName is available
-	    $(target).addClass('wait').removeClass('collapse').removeClass('expand');
-	    target.loading = true;
-	    
-	    $.get(
-	      requestURL,
-	      {"project": projectName, "ajax":"fetchflowjobs", "flow":targetId},
-	      function(data) {
-	        console.log("Success");
-	        target.loaded = true;
-	        target.loading = false;
-	        
-	        createJobListFunction(data, targetTBody);
-	        
-			$(target).addClass('collapse').removeClass('wait');
-	    	$(targetExpanded).fadeIn("fast");
-	      },
-	      "json"
-	    );
-    }
-  },
-  createJobListTable : function(data, innerTable) {
-  	var nodes = data.nodes;
-  	var flowId = data.flowId;
-  	var project = data.project;
-  	var requestURL = contextURL + "/manager?project=" + project + "&flow=" + flowId + "&job=";
-  	for (var i = 0; i < nodes.length; i++) {
-		var job = nodes[i];
-		var name = job.id;
-		var level = job.level;
-		var nodeId = flowId + "-" + name;
+	expandFlowProject: function(evt) {
+		if (evt.target.tagName == "A") {
+			return;
+		}
 		
-		var tr = document.createElement("tr");
-		$(tr).addClass("jobrow");
-		var idtd = document.createElement("td");
-		$(idtd).addClass("tb-name");
-		$(idtd).addClass("tb-job-name");
-		idtd.flowId=flowId;
-		idtd.projectName=project;
-		idtd.jobName=name;
+		var target = evt.currentTarget;
+		var targetId = target.id;
+		var requestURL = contextURL + "/manager";
+
+		var targetExpanded = $('#' + targetId + '-child');
+		var targetTBody = $('#' + targetId + '-tbody');
 		
-		var ida = document.createElement("a");
-		ida.dependents = job.dependents;
-		ida.dependencies = job.dependencies;
-		ida.flowid = flowId;
-		$(ida).text(name);
-		$(ida).addClass("jobLink");
-		$(ida).attr("id", nodeId);
-		$(ida).css("margin-left", level * 20);
-		$(ida).attr("href", requestURL + name);
+		var createJobListFunction = this.createJobListTable;
+		if (target.loading) {
+			console.log("Still loading.");
+		}
+		else if (target.loaded) {
+			$(targetExpanded).collapse('toggle');
+		}
+		else {
+			// projectName is available
+			target.loading = true;
+			var requestData = {
+				"project": projectName, 
+				"ajax": "fetchflowjobs", 
+				"flow": targetId
+			};
+			var successHandler = function(data) {
+				console.log("Success");
+				target.loaded = true;
+				target.loading = false;
+				createJobListFunction(data, targetTBody);
+				$(targetExpanded).collapse('show');
+			};
+			$.get(requestURL, requestData, successHandler, "json");
+		}
+	},
+	
+	createJobListTable: function(data, innerTable) {
+		var nodes = data.nodes;
+		var flowId = data.flowId;
+		var project = data.project;
+		var requestURL = contextURL + "/manager?project=" + project + "&flow=" + flowId + "&job=";
+		for (var i = 0; i < nodes.length; i++) {
+			var job = nodes[i];
+			var name = job.id;
+			var level = job.level;
+			var nodeId = flowId + "-" + name;
 		
-		$(idtd).append(ida);
-		$(tr).append(idtd);
-		$(innerTable).append(tr);
+      var li = document.createElement("li");
+      $(li).addClass("list-group-item");
+			li.flowId = flowId;
+			li.projectName = project;
+			li.jobName = name;
 
-		if (execAccess) {
-			var hoverMenuDiv = document.createElement("div");
-			$(hoverMenuDiv).addClass("job-hover-menu");
-			
-			var divRunJob = document.createElement("div");
-			$(divRunJob).addClass("btn1");
-			$(divRunJob).addClass("runJob");
-			$(divRunJob).text("Run Job");
-			divRunJob.jobName = name;
-			divRunJob.flowId = flowId;
-			$(hoverMenuDiv).append(divRunJob);
+			if (execAccess) {
+				var hoverMenuDiv = document.createElement("div");
+				$(hoverMenuDiv).addClass("pull-right");
+				
+				var divRunJob = document.createElement("button");
+        $(divRunJob).attr('type', 'button');
+				$(divRunJob).addClass("btn");
+				$(divRunJob).addClass("btn-success");
+				$(divRunJob).addClass("btn-xs");
+				$(divRunJob).addClass("runJob");
+				$(divRunJob).text("Run Job");
+				divRunJob.jobName = name;
+				divRunJob.flowId = flowId;
+				$(hoverMenuDiv).append(divRunJob);
+				
+				var divRunWithDep = document.createElement("button");
+        $(divRunWithDep).attr('type', 'button');
+				$(divRunWithDep).addClass("btn");
+				$(divRunWithDep).addClass("btn-success");
+				$(divRunWithDep).addClass("btn-xs");
+				$(divRunWithDep).addClass("runWithDep");
+				$(divRunWithDep).text("Run With Dependencies");
+				divRunWithDep.jobName = name;
+				divRunWithDep.flowId = flowId;
+				$(hoverMenuDiv).append(divRunWithDep);
+				
+				$(li).append(hoverMenuDiv);
+			}
 			
-			var divRunWithDep = document.createElement("div");
-			$(divRunWithDep).addClass("btn1");
-			$(divRunWithDep).addClass("runWithDep");
-			$(divRunWithDep).text("Run With Dependencies");
-			divRunWithDep.jobName = name;
-			divRunWithDep.flowId = flowId;
-			$(hoverMenuDiv).append(divRunWithDep);
+			var ida = document.createElement("a");
+			ida.dependents = job.dependents;
+			ida.dependencies = job.dependencies;
+			ida.flowid = flowId;
+			$(ida).text(name);
+			$(ida).addClass("jobLink");
+			$(ida).attr("id", nodeId);
+			$(ida).css("margin-left", level * 20);
+			$(ida).attr("href", requestURL + name);
 			
-			$(idtd).append(hoverMenuDiv);
-		}		
-  	}
-  },
-  unhighlight: function(evt) {
-  	var currentTarget = evt.currentTarget;
- 	$(".dependent").removeClass("dependent");
-	$(".dependency").removeClass("dependency");
+			$(li).append(ida);
+			$(innerTable).append(li);
+		}
+	},
+	
+	unhighlight: function(evt) {
+		var currentTarget = evt.currentTarget;
+		$(".dependent").removeClass("dependent");
+		$(".dependency").removeClass("dependency");
+	},
 
-  },
-  highlight: function(evt) {
- 	var currentTarget = evt.currentTarget;
- 	$(".dependent").removeClass("dependent");
-	$(".dependency").removeClass("dependency");
+	highlight: function(evt) {
+		var currentTarget = evt.currentTarget;
+		$(".dependent").removeClass("dependent");
+		$(".dependency").removeClass("dependency");
 	
- 	if ($(currentTarget).hasClass("jobLink")) {
-		this.highlightJob(currentTarget);
-	}
+		if ($(currentTarget).hasClass("jobLink")) {
+			this.highlightJob(currentTarget);
+		}
+	},
 
-  },
-  highlightJob: function(currentTarget) {
-   	var dependents = currentTarget.dependents;
- 	var dependencies = currentTarget.dependencies;
- 	var flowid = currentTarget.flowid;
- 	
- 	if (dependents) {
-	 	for (var i = 0; i < dependents.length; ++i) {
-	 		var depId = flowid + "-" + dependents[i];
-	 		$("#"+depId).toggleClass("dependent");
-	 	}
- 	}
- 	
- 	if (dependencies) {
-	 	for (var i = 0; i < dependencies.length; ++i) {
-	 		var depId = flowid + "-" + dependencies[i];
-	 		$("#"+depId).toggleClass("dependency");
-	 	}
-  	}
-  },
-  viewFlow: function(evt) {
-  	console.log("View Flow");
-  	var flowId = evt.currentTarget.flowId;
+	highlightJob: function(currentTarget) {
+		var dependents = currentTarget.dependents;
+		var dependencies = currentTarget.dependencies;
+		var flowid = currentTarget.flowid;
+		
+		if (dependents) {
+			for (var i = 0; i < dependents.length; ++i) {
+				var depId = flowid + "-" + dependents[i];
+				$("#"+depId).toggleClass("dependent");
+			}
+		}
+		
+		if (dependencies) {
+			for (var i = 0; i < dependencies.length; ++i) {
+				var depId = flowid + "-" + dependencies[i];
+				$("#"+depId).toggleClass("dependency");
+			}
+		}
+	},
 
-  	location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
-  },
-  viewJob: function(evt) {
-  	console.log("View Job");
-  	var flowId = evt.currentTarget.flowId;
-  	var jobId = evt.currentTarget.jobId;
-  	
-  	location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
-  },
-  runJob: function(evt) {
-  	console.log("Run Job");
-  	var jobId = evt.currentTarget.jobName;
-  	var flowId = evt.currentTarget.flowId;
-  	
-  	var executingData = {
-  		project: projectName,
-  		ajax: "executeFlow",
-  		flow: flowId,
-  		job: jobId
-	};
-  	
-  	this.executeFlowDialog(executingData);
-  },
-  runWithDep: function(evt) {
-    var jobId = evt.currentTarget.jobName;
-  	var flowId = evt.currentTarget.flowId;
-    console.log("Run With Dep");
-    
-    var executingData = {
-  		project: projectName,
-  		ajax: "executeFlow",
-  		flow: flowId,
-  		job: jobId,
-  		withDep: true
-	};
-    
-    this.executeFlowDialog(executingData);
-  },
-  executeFlow: function(evt) {
-    console.log("Execute Flow");
-   	var flowId = $(evt.currentTarget).attr('flowid');
-    
-    var executingData = {
-  		project: projectName,
-  		ajax: "executeFlow",
-  		flow: flowId
-	};
-    
-    this.executeFlowDialog(executingData);
-  },
-  executeFlowDialog: function(executingData) {
-  	flowExecuteDialogView.show(executingData);
-  },
-  render: function() {
-  }
-});
+	viewFlow: function(evt) {
+		console.log("View Flow");
+		var flowId = evt.currentTarget.flowId;
+		location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId;
+	},
+
+	viewJob: function(evt) {
+		console.log("View Job");
+		var flowId = evt.currentTarget.flowId;
+		var jobId = evt.currentTarget.jobId;
+		location.href = contextURL + "/manager?project=" + projectName + "&flow=" + flowId + "&job=" + jobId;
+	},
+
+	runJob: function(evt) {
+		console.log("Run Job");
+		var jobId = evt.currentTarget.jobName;
+		var flowId = evt.currentTarget.flowId;
+		
+		var executingData = {
+			project: projectName,
+			ajax: "executeFlow",
+			flow: flowId,
+			job: jobId
+		};
+		
+		this.executeFlowDialog(executingData);
+	},
 
-var projectSummary;
-azkaban.ProjectSummaryView= Backbone.View.extend({
-  events : {
-      "click #edit": "handleDescriptionEdit"
-  },
-  initialize : function(settings) {
-  },
-  handleDescriptionEdit : function(evt) {
-      console.log("Edit description");
-      var editText = $("#edit").text();
-      var descriptionTD = $('#pdescription');
-      
-      if (editText != "Edit Description") {
-          var requestURL = contextURL + "/manager";
-          var newText = $("#descEdit").val();
+	runWithDep: function(evt) {
+		var jobId = evt.currentTarget.jobName;
+		var flowId = evt.currentTarget.flowId;
+		console.log("Run With Dep");
+		
+		var executingData = {
+			project: projectName,
+			ajax: "executeFlow",
+			flow: flowId,
+			job: jobId,
+			withDep: true
+		};
+		this.executeFlowDialog(executingData);
+	},
+
+	executeFlow: function(evt) {
+		console.log("Execute Flow");
+		var flowId = $(evt.currentTarget).attr('flowid');
+		
+		var executingData = {
+			project: projectName,
+			ajax: "executeFlow",
+			flow: flowId
+		};
+		
+		this.executeFlowDialog(executingData);
+	},
+
+	executeFlowDialog: function(executingData) {
+		flowExecuteDialogView.show(executingData);
+	},
 
-          $.get(
-		      requestURL,
-		      {"project": projectName, "ajax":"changeDescription", "description":newText},
-		      function(data) {
-				if (data.error) {
-					alert(data.error);
-				}
-		      },
-		      "json"
-	    );
-          
-          $(descriptionTD).remove("#descEdit");
-          $(descriptionTD).text(newText);
-          
-          $("#edit").text("Edit Description");
-      }
-      else {
-	      var text = $(descriptionTD).text();
-	      var edit = document.createElement("textarea");
-	      
-	      $(edit).addClass("editTextArea");
-	      $(edit).attr("id", "descEdit");
-	      $(edit).val(text);
-	      $(descriptionTD).text("");
-	      $(descriptionTD).append(edit);
-	      
-	      $("#edit").text("Commit");
-      }
-  },
-  render: function() {
-  }
+	render: function() {
+	}
 });
 
 $(function() {
-	projectView = new azkaban.ProjectView({el:$('#all-jobs-content')});
-	uploadView = new azkaban.UploadProjectView({el:$('#upload-project')});
 	flowTableView = new azkaban.FlowTableView({el:$('#flow-tabs')});
-	projectSummary = new azkaban.ProjectSummaryView({el:$('#project-summary')});
-	deleteProjectView = new azkaban.DeleteProjectView({el: $('#delete-project')});
-	// Setting up the project tabs
 });

diff --git a/src/web/js/azkaban.projectlog.view.js b/src/web/js/azkaban.projectlog.view.js
index 79c257a..0653146 100644
--- a/src/web/js/azkaban.projectlog.view.js
+++ b/src/web/js/azkaban.projectlog.view.js
@@ -35,74 +35,78 @@ var typeMapping = {
 var projectLogView;
 azkaban.ProjectLogView = Backbone.View.extend({
 	events: {
-		"click #updateLogBtn" : "handleUpdate"
+		"click #updateLogBtn": "handleUpdate"
 	},
-	initialize: function(settings) {
+	
+  initialize: function(settings) {
 		this.model.set({"current": 0});
 		this.handleUpdate();
 	},
-	handleUpdate: function(evt) {
+	
+  handleUpdate: function(evt) {
 		var current = this.model.get("current");
 		var requestURL = contextURL + "/manager"; 
 		var model = this.model;
+    var requestData = {
+      "project": projectName, 
+      "ajax": "fetchProjectLogs", 
+      "size": 1000, 
+      "skip": 0 
+    };
 
-		$.get(
-			requestURL,
-			{"project": projectName, "ajax":"fetchProjectLogs", "size": 1000, "skip": 0 },
-			function(data) {
+		var successHandler = function(data) {
 			console.log("fetchLogs");
-	          	if (data.error) {
-	          		showDialog("Error", data.error);
-	          	}
-	          	else {
-	          		// Get the columns to map to the values.
-	          		var columns = data.columns;
-	          		var columnMap = {};
-	          		for (var i =0; i < columns.length; ++i) {
-	          			columnMap[columns[i]] = i;
-	          		}
-	          		var logSection = $("#logTable");
-	          		$(logSection).empty();
-	          		var logData = data.logData;
-	          		for (var i = 0; i < logData.length; ++i) {
-	          			var event = logData[i];
-	          			var user = event[columnMap['user']];
-	          			var time = event[columnMap['time']];
-	          			var type = event[columnMap['type']];
-	          			var message = event[columnMap['message']];
-	          			
-	          			var containerEvent = document.createElement("tr");
-	          			$(containerEvent).addClass("projectEvent");
-	          			
-	          			var containerTime = document.createElement("td");
-	          			$(containerTime).addClass("time");
-	          			$(containerTime).text(getDateFormat(new Date(time)));
-	          			
-	          			var containerUser = document.createElement("td");
-	          			$(containerUser).addClass("user");
-	          			$(containerUser).text(user);
-	          			
-	          			var containerType = document.createElement("td");
-	          			$(containerType).addClass("type");
-	          			$(containerType).addClass(type);
-	          			$(containerType).text(typeMapping[type] ? typeMapping[type] : type);
-	          		
-	          			var containerMessage = document.createElement("td");
-	          			$(containerMessage).addClass("message");
-	          			$(containerMessage).text(message);
-	          			
-	          			$(containerEvent).append(containerTime);
-	          			$(containerEvent).append(containerUser);
-	          			$(containerEvent).append(containerType);
-	          			$(containerEvent).append(containerMessage);
-	          			
-	          			$(logSection).append(containerEvent);
-	          		}
-	          		
-	          		model.set({"log": data});
-	          	}
-	         }
-		);
+      if (data.error) {
+        showDialog("Error", data.error);
+        return;
+      }
+      // Get the columns to map to the values.
+      var columns = data.columns;
+      var columnMap = {};
+      for (var i =0; i < columns.length; ++i) {
+        columnMap[columns[i]] = i;
+      }
+      var logSection = $("#logTable").find("tbody")[0];
+      $(logSection).empty();
+      var logData = data.logData;
+      for (var i = 0; i < logData.length; ++i) {
+        var event = logData[i];
+        var user = event[columnMap['user']];
+        var time = event[columnMap['time']];
+        var type = event[columnMap['type']];
+        var message = event[columnMap['message']];
+        
+        var containerEvent = document.createElement("tr");
+        $(containerEvent).addClass("projectEvent");
+        
+        var containerTime = document.createElement("td");
+        $(containerTime).addClass("time");
+        $(containerTime).text(getDateFormat(new Date(time)));
+        
+        var containerUser = document.createElement("td");
+        $(containerUser).addClass("user");
+        $(containerUser).text(user);
+        
+        var containerType = document.createElement("td");
+        $(containerType).addClass("type");
+        $(containerType).addClass(type);
+        $(containerType).text(typeMapping[type] ? typeMapping[type] : type);
+      
+        var containerMessage = document.createElement("td");
+        $(containerMessage).addClass("message");
+        $(containerMessage).text(message);
+        
+        $(containerEvent).append(containerTime);
+        $(containerEvent).append(containerUser);
+        $(containerEvent).append(containerType);
+        $(containerEvent).append(containerMessage);
+        
+        $(logSection).append(containerEvent);
+      }
+      
+      model.set({"log": data});
+    };
+		$.get(requestURL, requestData, successHandler);
 	}
 });
 
@@ -112,16 +116,16 @@ var showDialog = function(title, message) {
   $('#messageBox').text(message);
 
   $('#messageDialog').modal({
-      closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
-      position: ["20%",],
-      containerId: 'confirm-container',
-      containerCss: {
-        'height': '220px',
-        'width': '565px'
-      },
-      onShow: function (dialog) {
-      }
-    });
+	  closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
+	  position: ["20%",],
+	  containerId: 'confirm-container',
+	  containerCss: {
+		'height': '220px',
+		'width': '565px'
+	  },
+	  onShow: function (dialog) {
+	  }
+	});
 }
 
 

diff --git a/src/web/js/azkaban.projectmodals.view.js b/src/web/js/azkaban.projectmodals.view.js
new file mode 100644
index 0000000..4f9b5f4
--- /dev/null
+++ b/src/web/js/azkaban.projectmodals.view.js
@@ -0,0 +1,153 @@
+/*
+ * Copyright 2012 LinkedIn Corp.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+$.namespace('azkaban');
+
+var projectView;
+azkaban.ProjectView = Backbone.View.extend({
+	events: {
+		"click #project-upload-btn": "handleUploadProjectJob",
+		"click #project-delete-btn": "handleDeleteProject"
+	},
+
+	initialize: function(settings) {
+	},
+
+	handleUploadProjectJob: function(evt) {
+		console.log("click upload project");
+		$('#upload-project-modal').modal();
+	},
+
+	handleDeleteProject: function(evt) {
+		console.log("click delete project");
+		$('#delete-project-modal').modal();
+	},
+	
+	render: function() {
+	}
+});
+
+var uploadProjectView;
+azkaban.UploadProjectView = Backbone.View.extend({
+	events: {
+		"click #upload-project-btn": "handleCreateProject"
+	},
+
+	initialize: function(settings) {
+		console.log("Hide upload project modal error msg");
+		$("#upload-project-modal-error-msg").hide();
+	},
+	
+	handleCreateProject: function(evt) {
+		console.log("Upload project button.");
+		$("#upload-project-form").submit();
+	},
+	
+	render: function() {
+	}
+});
+
+var deleteProjectView;
+azkaban.DeleteProjectView = Backbone.View.extend({
+	events: {
+		"click #delete-btn": "handleDeleteProject"
+	},
+	
+	initialize: function(settings) {
+	},
+	
+	handleDeleteProject: function(evt) {
+		$("#delete-form").submit();
+	},
+
+	render: function() {
+	}
+});
+
+var projectDescription;
+azkaban.ProjectDescriptionView = Backbone.View.extend({
+	events: {
+		"click #project-description": "handleDescriptionEdit",
+    "click #project-description-btn": "handleDescriptionSave"
+	},
+
+	initialize: function(settings) {
+    console.log("project description initialize");
+	},
+	
+	handleDescriptionEdit: function(evt) {
+		console.log("Edit description");
+    var description = null;
+    if ($('#project-description').hasClass('editable-placeholder')) {
+      description = '';
+      $('#project-description').removeClass('editable-placeholder');
+    }
+    else {
+      description = $('#project-description').text();
+    }
+    $('#project-description-edit').attr("value", description);
+    $('#project-description').hide();
+    $('#project-description-form').show();
+	},
+
+  handleDescriptionSave: function(evt) {
+    var newText = $('#project-description-edit').val();
+    if ($('#project-description-edit').hasClass('has-error')) {
+      $('#project-description-edit').removeClass('has-error');
+    }
+		var requestURL = contextURL + "/manager";
+    var requestData = {
+      "project": projectName, 
+      "ajax":"changeDescription", 
+      "description": newText
+    };
+    var successHandler = function(data) {
+      if (data.error) {
+        $('#project-description-edit').addClass('has-error');
+        alert(data.error);
+        return;
+      }
+      $('#project-description-form').hide();
+      if (newText != '') {
+        $('#project-description').text(newText);
+      }
+      else {
+        $('#project-description').text('Add project description.');
+        $('#project-description').addClass('editable-placeholder');
+      }
+      $('#project-description').show();
+    };
+    $.get(requestURL, requestData, successHandler, "json");
+  },
+
+	render: function() {
+	}
+});
+
+$(function() {
+	projectView = new azkaban.ProjectView({
+    el: $('#project-options')
+  });
+	uploadView = new azkaban.UploadProjectView({
+    el: $('#upload-project-modal')
+  });
+	deleteProjectView = new azkaban.DeleteProjectView({
+    el: $('#delete-project-modal')
+  });
+	projectDescription = new azkaban.ProjectDescriptionView({
+    el: $('#project-page-header')
+  });
+});

diff --git a/src/web/js/azkaban.schedule.panel.view.js b/src/web/js/azkaban.schedule.panel.view.js
index 711302d..aa73f31 100644
--- a/src/web/js/azkaban.schedule.panel.view.js
+++ b/src/web/js/azkaban.schedule.panel.view.js
@@ -17,73 +17,77 @@
 $.namespace('azkaban');
 
 var schedulePanelView;
-azkaban.SchedulePanelView= Backbone.View.extend({
-  events : {
-  	"click .closeSchedule": "hideSchedulePanel",
-  	"click #schedule-button": "scheduleFlow"
-  },
-  initialize : function(settings) {
- 	$("#datepicker").css("backgroundColor", "transparent");
-	$( "#datepicker" ).datepicker();
-	$( "#datepicker" ).datepicker('setDate', new Date());
-	$( "#datepicker" ).datepicker("hide");
-  },
-  render: function() {
-  },
-  showSchedulePanel: function() {
-  	$('#scheduleModalBackground').show();
-  	$('#schedule-panel').show();
-  },
-  hideSchedulePanel: function() {
-  	$('#scheduleModalBackground').hide();
-  	$('#schedule-panel').hide();
-  },
-  scheduleFlow: function() {
-	var hourVal = $('#hour').val();
-	var minutesVal = $('#minutes').val();
-	var ampmVal = $('#am_pm').val();
-	var timezoneVal = $('#timezone').val();
-	var dateVal = $('#datepicker').val();
-	var is_recurringVal = $('#is_recurring').val();
-	var periodVal = $('#period').val();
-	var periodUnits = $('#period_units').val();
-  
-  	var scheduleURL = contextURL + "/schedule"
-  	
-  	var scheduleData = flowExecuteDialogView.getExecutionOptionData();
-  	 console.log("Creating schedule for "+projectName+"."+scheduleData.flow);
-	var scheduleTime = $('#hour').val() + "," + $('#minutes').val() + "," + $('#am_pm').val() + "," + $('#timezone').val();
-	var scheduleDate = $('#datepicker').val();
-	var is_recurring = document.getElementById('is_recurring').checked ? 'on' : 'off'; 
-	var period = $('#period').val() + $('#period_units').val();
+azkaban.SchedulePanelView = Backbone.View.extend({
+	events: {
+		"click #schedule-button": "scheduleFlow"
+	},
+
+	initialize: function(settings) {
+		$("#timepicker").datetimepicker({pickDate: false});
+		$("#datepicker").datetimepicker({pickTime: false});
+	},
+
+	render: function() {
+	},
+	
+	showSchedulePanel: function() {
+		$('#schedule-modal').modal();
+	},
+	
+	hideSchedulePanel: function() {
+		$('#schedule-modal').modal("hide");
+	},
 	
-	scheduleData.ajax = "scheduleFlow";
-	scheduleData.projectName = projectName;
-	scheduleData.scheduleTime = scheduleTime;
-	scheduleData.scheduleDate = scheduleDate;
-	scheduleData.is_recurring = is_recurring;
-	scheduleData.period = period;
+	scheduleFlow: function() {
+    var timeVal = $('#timepicker').val();
+		var timezoneVal = $('#timezone').val();
+
+		var dateVal = $('#datepicker').val();
+		
+    var is_recurringVal = $('#is_recurring').val();
+		var periodVal = $('#period').val();
+		var periodUnits = $('#period_units').val();
+	
+		var scheduleURL = contextURL + "/schedule"
+		var scheduleData = flowExecuteDialogView.getExecutionOptionData();
+
+		console.log("Creating schedule for " + projectName + "." + 
+				scheduleData.flow);
+
+    var scheduleTime = moment(timeVal, 'h/mm A').format('h,mm,A,') + timezoneVal;
+    console.log(scheduleTime);
+		
+		var scheduleDate = $('#datepicker').val();
+		var is_recurring = document.getElementById('is_recurring').checked 
+				? 'on' : 'off'; 
+		var period = $('#period').val() + $('#period_units').val();
+		
+		scheduleData.ajax = "scheduleFlow";
+		scheduleData.projectName = projectName;
+		scheduleData.scheduleTime = scheduleTime;
+		scheduleData.scheduleDate = scheduleDate;
+		scheduleData.is_recurring = is_recurring;
+		scheduleData.period = period;
+			
+		var successHandler = function(data) {
+			if (data.error) {
+				schedulePanelView.hideSchedulePanel();
+				messageDialogView.show("Error Scheduling Flow", data.message);
+			}
+			else {
+				schedulePanelView.hideSchedulePanel();
+				messageDialogView.show("Flow Scheduled", data.message, function() {
+          window.location.href = scheduleURL;
+        });
+			}
+		};
 
-	$.post(
-			scheduleURL,
-			scheduleData,
-			function(data) {
-				if (data.error) {
-					messageDialogView.show("Error Scheduling Flow", data.message);
-				}
-				else {
-					messageDialogView.show("Flow Scheduled", data.message,
-						function() { 
-							window.location.href = scheduleURL; 
-						}
-					);
-				}
-			},
-			"json"
-	);
-  }
+		$.post(scheduleURL, scheduleData, successHandler, "json");
+	}
 });
 
 $(function() {
-	schedulePanelView =  new azkaban.SchedulePanelView({el:$('#scheduleModalBackground')});
+	schedulePanelView =	new azkaban.SchedulePanelView({
+		el: $('#schedule-modal')
+	});
 });

diff --git a/src/web/js/azkaban.scheduled.view.js b/src/web/js/azkaban.scheduled.view.js
index b713783..b182c27 100644
--- a/src/web/js/azkaban.scheduled.view.js
+++ b/src/web/js/azkaban.scheduled.view.js
@@ -19,212 +19,208 @@ $.namespace('azkaban');
 function removeSched(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSched", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error);
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL;
-				}
-			},
-			"json"
-	)
+	var requestData = {
+		"action": "removeSched", 
+		"scheduleId":scheduleId
+	};
+	var successHandler = function(data) {
+		if (data.error) {
+			$('#errorMsg').text(data.error);
+		}
+		else {
+			window.location = redirectURL;
+		}
+	};
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
 function removeSla(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSla", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error)
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL
-				}
-			},
-			"json"
-	)
+	var requestData = {
+		"action": "removeSla", 
+		"scheduleId": scheduleId
+	};
+	var successHandler = function(data) {
+		if (data.error) {
+			$('#errorMsg').text(data.error)
+		}
+		else {
+			window.location = redirectURL
+		}
+	};
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
+var slaView;
 azkaban.ChangeSlaView = Backbone.View.extend({
-	events : {
-		"click" : "closeEditingTarget",
+	events: {
+		"click": "closeEditingTarget",
 		"click #set-sla-btn": "handleSetSla",	
 		"click #remove-sla-btn": "handleRemoveSla",
-		"click #sla-cancel-btn": "handleSlaCancel",
-		"click .modal-close": "handleSlaCancel",
 		"click #addRow": "handleAddRow"
 	},
+	
 	initialize: function(setting) {
-
+		$('#sla-options').on('hidden.bs.modal', function() {
+			slaView.handleSlaCancel();
+		});
 	},
-	handleSlaCancel: function(evt) {
+	
+	handleSlaCancel: function() {
 		console.log("Clicked cancel button");
 		var scheduleURL = contextURL + "/schedule";
-
-		$('#slaModalBackground').hide();
-		$('#sla-options').hide();
-		
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
 		var rows = tFlowRules.rows;
 		var rowLength = rows.length
-		for(var i = 0; i < rowLength-1; i++) {
+		for (var i = 0; i < rowLength-1; i++) {
 			tFlowRules.deleteRow(0);
 		}
-		
 	},
+	
 	initFromSched: function(scheduleId, flowName) {
 		this.scheduleId = scheduleId;
-		
 		var scheduleURL = contextURL + "/schedule"
 		this.scheduleURL = scheduleURL;
+		
 		var indexToName = {};
 		var nameToIndex = {};
 		var indexToText = {};
 		this.indexToName = indexToName;
 		this.nameToIndex = nameToIndex;
 		this.indexToText = indexToText;
+		
 		var ruleBoxOptions = ["SUCCESS", "FINISH"];
 		this.ruleBoxOptions = ruleBoxOptions;
 		
-		var fetchScheduleData = {"scheduleId": this.scheduleId, "ajax":"slaInfo"};
-		
-		$.get(
-				this.scheduleURL,
-				fetchScheduleData,
-				function(data) {
-					if (data.error) {
-						alert(data.error);
-					}
-					else {
-						if (data.slaEmails) {
-							$('#slaEmails').val(data.slaEmails.join());
+		var fetchScheduleData = {
+			"scheduleId": this.scheduleId, 
+			"ajax": "slaInfo"
+		};
+	
+		var successHandler = function(data) {
+			if (data.error) {
+				alert(data.error);
+				return;
+			}
+			if (data.slaEmails) {
+				$('#slaEmails').val(data.slaEmails.join());
+			}
+			
+			var allJobNames = data.allJobNames;
+			
+			indexToName[0] = "";
+			nameToIndex[flowName] = 0;
+			indexToText[0] = "flow " + flowName;
+			for (var i = 1; i <= allJobNames.length; i++) {
+				indexToName[i] = allJobNames[i-1];
+				nameToIndex[allJobNames[i-1]] = i;
+				indexToText[i] = "job " + allJobNames[i-1];
+			}
+			
+			// populate with existing settings
+			if (data.settings) {
+				var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
+				for (var setting in data.settings) {
+					var rFlowRule = tFlowRules.insertRow(0);
+					
+					var cId = rFlowRule.insertCell(-1);
+					var idSelect = document.createElement("select");
+					idSelect.setAttribute("class", "form-control");
+					for (var i in indexToName) {
+						idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
+						if (data.settings[setting].id == indexToName[i]) {
+							idSelect.options[i].selected = true;
 						}
-						
-						var allJobNames = data.allJobNames;
-						
-						indexToName[0] = "";
-						nameToIndex[flowName] = 0;
-						indexToText[0] = "flow " + flowName;
-						for(var i = 1; i <= allJobNames.length; i++) {
-							indexToName[i] = allJobNames[i-1];
-							nameToIndex[allJobNames[i-1]] = i;
-							indexToText[i] = "job " + allJobNames[i-1];
+					}								
+					cId.appendChild(idSelect);
+					
+					var cRule = rFlowRule.insertCell(-1);
+					var ruleSelect = document.createElement("select");
+					ruleSelect.setAttribute("class", "form-control");
+					for (var i in ruleBoxOptions) {
+						ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
+						if (data.settings[setting].rule == ruleBoxOptions[i]) {
+							ruleSelect.options[i].selected = true;
 						}
-						
-						// populate with existing settings
-						if(data.settings) {
-							
-							var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-							
-							for(var setting in data.settings) {
-								var rFlowRule = tFlowRules.insertRow(0);
-								
-								var cId = rFlowRule.insertCell(-1);
-								var idSelect = document.createElement("select");
-								for(var i in indexToName) {
-									idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
-									if(data.settings[setting].id == indexToName[i]) {
-										idSelect.options[i].selected = true;
-									}
-								}								
-								cId.appendChild(idSelect);
-								
-								var cRule = rFlowRule.insertCell(-1);
-								var ruleSelect = document.createElement("select");
-								for(var i in ruleBoxOptions) {
-									ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
-									if(data.settings[setting].rule == ruleBoxOptions[i]) {
-										ruleSelect.options[i].selected = true;
-									}
-								}
-								cRule.appendChild(ruleSelect);
-								
-								var cDuration = rFlowRule.insertCell(-1);
-								var duration = document.createElement("input");
-								duration.type = "text";
-								duration.setAttribute("class", "durationpick");
-								var rawMinutes = data.settings[setting].duration;
-								var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
-								var minutes = parseInt(intMinutes);
-								var hours = Math.floor(minutes / 60);
-								minutes = minutes % 60;
-								duration.value = hours + ":" + minutes;
-								cDuration.appendChild(duration);
+					}
+					cRule.appendChild(ruleSelect);
+					
+					var cDuration = rFlowRule.insertCell(-1);
+					var duration = document.createElement("input");
+					duration.type = "text";
+					duration.setAttribute("class", "form-control durationpick");
+					var rawMinutes = data.settings[setting].duration;
+					var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
+					var minutes = parseInt(intMinutes);
+					var hours = Math.floor(minutes / 60);
+					minutes = minutes % 60;
+					duration.value = hours + ":" + minutes;
+					cDuration.appendChild(duration);
 
-								var cEmail = rFlowRule.insertCell(-1);
-								var emailCheck = document.createElement("input");
-								emailCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "EMAIL") {
-										emailCheck.checked = true;
-									}
-								}
-								cEmail.appendChild(emailCheck);
-								
-								var cKill = rFlowRule.insertCell(-1);
-								var killCheck = document.createElement("input");
-								killCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "KILL") {
-										killCheck.checked = true;
-									}
-								}
-								cKill.appendChild(killCheck);
-								
-								$('.durationpick').timepicker({hourMax: 99});
-							}
+					var cEmail = rFlowRule.insertCell(-1);
+					var emailCheck = document.createElement("input");
+					emailCheck.type = "checkbox";
+					for (var act in data.settings[setting].actions) {
+						if (data.settings[setting].actions[act] == "EMAIL") {
+							emailCheck.checked = true;
+						}
+					}
+					cEmail.appendChild(emailCheck);
+					
+					var cKill = rFlowRule.insertCell(-1);
+					var killCheck = document.createElement("input");
+					killCheck.type = "checkbox";
+					for (var act in data.settings[setting].actions) {
+						if (data.settings[setting].actions[act] == "KILL") {
+							killCheck.checked = true;
 						}
-						$('.durationpick').timepicker({hourMax: 99});
 					}
-				},
-				"json"
-			);
+					cKill.appendChild(killCheck);
+					$('.durationpick').datetimepicker({
+            pickDate: false,
+            use24hours: true
+          });
+				}
+			}
+      $('.durationpick').datetimepicker({
+        pickDate: false,
+        use24hours: true
+      });
+		};
+
+		$.get(this.scheduleURL, fetchScheduleData, successHandler, "json");
 		
-		$('#slaModalBackground').show();
-		$('#sla-options').show();
+		$('#sla-options').modal();
 		
-//		this.schedFlowOptions = sched.flowOptions
+		//this.schedFlowOptions = sched.flowOptions
 		console.log("Loaded schedule info. Ready to set SLA.");
-
 	},
+	
 	handleRemoveSla: function(evt) {
 		console.log("Clicked remove sla button");
 		var scheduleURL = this.scheduleURL;
 		var redirectURL = this.scheduleURL;
-		$.post(
-				scheduleURL,
-				{"action":"removeSla", "scheduleId":this.scheduleId},
-				function(data) {
-				if (data.error) {
-						$('#errorMsg').text(data.error)
-					}
-					else {
-						window.location = redirectURL
-					}
-				"json"
-				}
-			);
-
+		var requestData = {
+			"action": "removeSla", 
+			"scheduleId": this.scheduleId
+		};
+		var successHandler = function(data) {
+			if (data.error) {
+				$('#errorMsg').text(data.error)
+			}
+			else {
+				window.location = redirectURL
+			}
+		};
+		$.post(scheduleURL, requestData, successHanlder, "json");
 	},
+	
 	handleSetSla: function(evt) {
-
 		var slaEmails = $('#slaEmails').val();
 		var settings = {};
-		
-		
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-		for(var row = 0; row < tFlowRules.rows.length-1; row++) {
+		for (var row = 0; row < tFlowRules.rows.length-1; row++) {
 			var rFlowRule = tFlowRules.rows[row];
 			var id = rFlowRule.cells[0].firstChild.value;
 			var rule = rFlowRule.cells[1].firstChild.value;
@@ -242,24 +238,19 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		};
 
 		var scheduleURL = this.scheduleURL;
-		
-		$.post(
-			scheduleURL,
-			slaData,
-			function(data) {
-				if (data.error) {
-					alert(data.error);
-				}
-				else {
-					tFlowRules.length = 0;
-					window.location = scheduleURL;
-				}
-			},
-			"json"
-		);
+		var successHandler = function(data) {
+			if (data.error) {
+				alert(data.error);
+			}
+			else {
+				tFlowRules.length = 0;
+				window.location = scheduleURL;
+			}
+		};
+		$.post(scheduleURL, slaData, successHandler, "json");
 	},
+	
 	handleAddRow: function(evt) {
-		
 		var indexToName = this.indexToName;
 		var nameToIndex = this.nameToIndex;
 		var indexToText = this.indexToText;
@@ -270,15 +261,16 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		
 		var cId = rFlowRule.insertCell(-1);
 		var idSelect = document.createElement("select");
-		for(var i in indexToName) {
+		idSelect.setAttribute("class", "form-control");
+		for (var i in indexToName) {
 			idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
 		}
-		
 		cId.appendChild(idSelect);
 		
 		var cRule = rFlowRule.insertCell(-1);
 		var ruleSelect = document.createElement("select");
-		for(var i in ruleBoxOptions) {
+		ruleSelect.setAttribute("class", "form-control");
+		for (var i in ruleBoxOptions) {
 			ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
 		}
 		cRule.appendChild(ruleSelect);
@@ -286,7 +278,7 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		var cDuration = rFlowRule.insertCell(-1);
 		var duration = document.createElement("input");
 		duration.type = "text";
-		duration.setAttribute("class", "durationpick");
+		duration.setAttribute("class", "durationpick form-control");
 		cDuration.appendChild(duration);
 
 		var cEmail = rFlowRule.insertCell(-1);
@@ -299,13 +291,15 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		killCheck.type = "checkbox";
 		cKill.appendChild(killCheck);
 		
-		$('.durationpick').timepicker({hourMax: 99});
-
+    $('.durationpick').datetimepicker({ 
+      pickDate: false,
+      use24hours: true
+    });
 		return rFlowRule;
 	},
-	handleEditColumn : function(evt) {
-		var curTarget = evt.currentTarget;
 	
+	handleEditColumn: function(evt) {
+		var curTarget = evt.currentTarget;
 		if (this.editingTarget != curTarget) {
 			this.closeEditingTarget();
 			
@@ -322,32 +316,26 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 			this.editingTarget = curTarget;
 		}
 	},
-	handleRemoveColumn : function(evt) {
+	
+	handleRemoveColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 		// Should be the table
 		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
 	},
+	
 	closeEditingTarget: function(evt) {
-
 	}
 });
 
-var slaView;
 var tableSorterView;
 $(function() {
-	var selected;
-
-
 	slaView = new azkaban.ChangeSlaView({el:$('#sla-options')});
 	tableSorterView = new azkaban.TableSorter({el:$('#scheduledFlowsTbl')});
-//	var requestURL = contextURL + "/manager";
+	//var requestURL = contextURL + "/manager";
 
 	// Set up the Flow options view. Create a new one every time :p
-//	 $('#addSlaBtn').click( function() {
-//		 slaView.show();
-//	 });
-
-	 
-	
+	//$('#addSlaBtn').click( function() {
+	//	slaView.show();
+	//});
 });

diff --git a/src/web/js/azkaban.svg.graph.view.js b/src/web/js/azkaban.svg.graph.view.js
index 380dff0..67d2530 100644
--- a/src/web/js/azkaban.svg.graph.view.js
+++ b/src/web/js/azkaban.svg.graph.view.js
@@ -21,7 +21,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		"contextmenu g" : "handleRightClick",
 		"contextmenu polyline": "handleRightClick"
 	},
-	initialize: function(settings) {
+	
+  initialize: function(settings) {
 		this.model.bind('change:selected', this.changeSelected, this);
 		this.model.bind('change:graph', this.render, this);
 		this.model.bind('resetPanZoom', this.resetPanZoom, this);
@@ -46,7 +47,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 
 		$(svg).svgNavigate();
 	},
-	initializeDefs: function(self) {
+	
+  initializeDefs: function(self) {
 		var def = document.createElementNS(svgns, 'defs');
 		def.setAttributeNS(null, "id", "buttonDefs");
 
@@ -68,7 +70,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		
 		this.svgGraph.appendChild(def);
 	},
-	render: function(self) {
+	
+  render: function(self) {
 		console.log("graph render");
 
 		// Clean everything
@@ -131,7 +134,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		this.graphBounds = bounds;
 		this.resetPanZoom(0);
 	},
-	handleDisabledChange: function(evt) {
+	
+  handleDisabledChange: function(evt) {
 		var disabledMap = this.model.get("disabled");
 
 		for(var id in this.nodes) {
@@ -146,7 +150,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			}
 		}
 	},
-	assignInitialStatus: function(evt) {
+	
+  assignInitialStatus: function(evt) {
 		var data = this.model.get("data");
 		for (var i = 0; i < data.nodes.length; ++i) {
 			var updateNode = data.nodes[i];
@@ -154,7 +159,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			addClass(g, updateNode.status);
 		}
 	},
-	changeSelected: function(self) {
+	
+  changeSelected: function(self) {
 		console.log("change selected");
 		var selected = this.model.get("selected");
 		var previous = this.model.previous("selected");
@@ -176,10 +182,16 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			var x = node.x - offset;
 			var y = node.y - offset;
 			
-			$(this.svgGraph).svgNavigate("transformToBox", {x: x, y: y, width: widthHeight, height: widthHeight});
+			$(this.svgGraph).svgNavigate("transformToBox", {
+				x: x, 
+				y: y, 
+				width: widthHeight, 
+				height: widthHeight
+			});
 		}
 	},
-	handleStatusUpdate: function(evt) {
+	
+  handleStatusUpdate: function(evt) {
 		var updateData = this.model.get("update");
 		if (updateData.nodes) {
 			for (var i = 0; i < updateData.nodes.length; ++i) {
@@ -192,26 +204,31 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			}
 		}
 	},
-	handleRemoveAllStatus: function(gNode) {
+	
+  handleRemoveAllStatus: function(gNode) {
 		for (var j = 0; j < statusList.length; ++j) {
 			var status = statusList[j];
 			removeClass(gNode, status);
 		}
 	},
-	clickGraph: function(self) {
+	
+  clickGraph: function(self) {
 		console.log("click");
 		if (self.currentTarget.jobid) {
 			this.model.set({"selected": self.currentTarget.jobid});
 		}
 	},
-	handleRightClick: function(self) {
+	
+  handleRightClick: function(self) {
 		if (this.rightClick) {
 			var callbacks = this.rightClick;
 			var currentTarget = self.currentTarget;
 			if (callbacks.node && currentTarget.jobid) {
 				callbacks.node(self);
 			}
-			else if (callbacks.edge && (currentTarget.nodeName == "polyline" || currentTarget.nodeName == "line")) {
+			else if (callbacks.edge && 
+					(currentTarget.nodeName == "polyline" || 
+					 currentTarget.nodeName == "line")) {
 				callbacks.edge(self);
 			}
 			else if (callbacks.graph) {
@@ -222,7 +239,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 	
 		return true;
 	},	
-	drawEdge: function(self, edge) {
+	
+  drawEdge: function(self, edge) {
 		var svg = self.svgGraph;
 		var svgns = self.svgns;
 		
@@ -255,7 +273,8 @@ azkaban.SvgGraphView = Backbone.View.extend({
 			self.mainG.appendChild(line);
 		}
 	},
-	drawNode: function(self, node, bounds) {
+	
+  drawNode: function(self, node, bounds) {
 		var svg = self.svgGraph;
 		var svgns = self.svgns;
 
@@ -316,16 +335,27 @@ azkaban.SvgGraphView = Backbone.View.extend({
 		nodeG.setAttributeNS(null, "class", "node");
 		nodeG.jobid=node.id;
 	},
-	addBounds: function(toBounds, addBounds) {
-		toBounds.minX = toBounds.minX ? Math.min(toBounds.minX, addBounds.minX) : addBounds.minX;
-		toBounds.minY = toBounds.minY ? Math.min(toBounds.minY, addBounds.minY) : addBounds.minY;
-		toBounds.maxX = toBounds.maxX ? Math.max(toBounds.maxX, addBounds.maxX) : addBounds.maxX;
-		toBounds.maxY = toBounds.maxY ? Math.max(toBounds.maxY, addBounds.maxY) : addBounds.maxY;
+	
+  addBounds: function(toBounds, addBounds) {
+		toBounds.minX = toBounds.minX 
+				? Math.min(toBounds.minX, addBounds.minX) : addBounds.minX;
+		toBounds.minY = toBounds.minY 
+				? Math.min(toBounds.minY, addBounds.minY) : addBounds.minY;
+		toBounds.maxX = toBounds.maxX 
+				? Math.max(toBounds.maxX, addBounds.maxX) : addBounds.maxX;
+		toBounds.maxY = toBounds.maxY 
+				? Math.max(toBounds.maxY, addBounds.maxY) : addBounds.maxY;
 	},
-	resetPanZoom : function(duration) {
+	
+  resetPanZoom: function(duration) {
 		var bounds = this.graphBounds;
-		var param = {x: bounds.minX, y: bounds.minY, width: (bounds.maxX - bounds.minX), height: (bounds.maxY - bounds.minY), duration: duration };
-
+		var param = {
+			x: bounds.minX, 
+			y: bounds.minY, 
+			width: (bounds.maxX - bounds.minX), 
+			height: (bounds.maxY - bounds.minY), 
+			duration: duration 
+		};
 		$(this.svgGraph).svgNavigate("transformToBox", param);
 	}
 });

diff --git a/src/web/js/azkaban.table.sort.js b/src/web/js/azkaban.table.sort.js
index 516448c..40f05e8 100644
--- a/src/web/js/azkaban.table.sort.js
+++ b/src/web/js/azkaban.table.sort.js
@@ -16,50 +16,52 @@
 
 $.namespace('azkaban');
 
-azkaban.TableSorter= Backbone.View.extend({
-  events : {
+azkaban.TableSorter = Backbone.View.extend({
+  events: {
   	"click .sortable": "handleClickSort"
   },
-  initialize : function(settings) {
+
+  initialize: function(settings) {
   	$(this.el).addClass("sortableTable");
   
-  	var thead = $(this.el).children("thead");
-	var th = $(thead).find("th");
-	
-	$(th).addClass("sortable");
-	$("th.ignoresort").removeClass("sortable");
-	var sortDiv = document.createElement("div");
+		var thead = $(this.el).children("thead");
+		var th = $(thead).find("th");
+		
+		$(th).addClass("sortable");
+		$("th.ignoresort").removeClass("sortable");
+		var sortDiv = document.createElement("div");
 
-	$(sortDiv).addClass("sortIcon");
-	
-	$(th).append(sortDiv);
-	
-	var tbody = $(this.el).children("tbody");
-	var rows = $(tbody).children("tr");
-	
-	var row;
-	for (var i = 0; i < rows.length; ++i ) {
-		var nextRow = rows[i];
-		if (row && $(nextRow).hasClass("childrow")) {
-			if (!row.childRows) {
-				row.childRows = new Array();
-			}
+		$(sortDiv).addClass("sortIcon");
+		
+		$(th).append(sortDiv);
 		
-			row.childRows.push(nextRow);
+		var tbody = $(this.el).children("tbody");
+		var rows = $(tbody).children("tr");
+		
+		var row;
+		for (var i = 0; i < rows.length; ++i ) {
+			var nextRow = rows[i];
+			if (row && $(nextRow).hasClass("childrow")) {
+				if (!row.childRows) {
+					row.childRows = new Array();
+				}
+				row.childRows.push(nextRow);
+			}
+			else {
+				row = nextRow;
+			}
 		}
-		else {
-			row = nextRow;
+		
+		if (settings.initialSort) {
+			this.toggleSort(settings.initialSort);
 		}
-	}
-	
-	if (settings.initialSort) {
-		this.toggleSort(settings.initialSort);
-	}
   },
+
   handleClickSort: function(evt) {
   	this.toggleSort(evt.currentTarget);
   },
-  toggleSort: function(th) {
+  
+	toggleSort: function(th) {
   	console.log("sorting by index " + $(th).index());
   	if ($(th).hasClass("asc")) {
   		$(th).removeClass("asc");
@@ -81,70 +83,72 @@ azkaban.TableSorter= Backbone.View.extend({
   		this.sort($(th).index(), false);
   	}
   },
-  sort: function(index, desc) {
-	var tbody = $(this.el).children("tbody");
-	var rows = $(tbody).children("tr");
+  
+	sort: function(index, desc) {
+		var tbody = $(this.el).children("tbody");
+		var rows = $(tbody).children("tr");
+
+		var tdToSort = new Array();
+		for (var i = 0; i < rows.length; ++i) {
+			var row = rows[i];
+			if (!$(row).hasClass("childrow")) {
+				var td = row.children[index];
+				tdToSort.push(td);
+			}
+		}
 
-	var tdToSort = new Array();
-	for (var i = 0; i < rows.length; ++i) {
-		var row = rows[i];
-		if (!$(row).hasClass("childrow")) {
-			var td = row.children[index];
-			tdToSort.push(td);
+		if (desc) {
+			tdToSort.sort(function(a,b) {
+				var texta = $(a).text().trim().toLowerCase();
+				var textb = $(b).text().trim().toLowerCase();
+				
+				if (texta < textb) {
+					return 1;
+				}
+				else if (texta > textb) {
+					return -1;
+				} 
+				else {
+					return 0;
+				}
+			});
+		}
+		else {
+			tdToSort.sort(function(a,b) {
+				var texta = $(a).text().trim().toLowerCase();
+				var textb = $(b).text().trim().toLowerCase();
+				
+				if (texta < textb) {
+					return -1;
+				}
+				else if (texta > textb) {
+					return 1;
+				} 
+				else {
+					return 0;
+				}
+			});
 		}
-	}
 
-	if (desc) {
-		tdToSort.sort(function(a,b) {
-			var texta = $(a).text().trim().toLowerCase();
-			var textb = $(b).text().trim().toLowerCase();
-			
-			if (texta < textb) {
-				return 1;
-			}
-			else if (texta > textb) {
-				return -1;
-			} 
-			else {
-				return 0;
-			}
-		});
-	}
-	else {
-		tdToSort.sort(function(a,b) {
-			var texta = $(a).text().trim().toLowerCase();
-			var textb = $(b).text().trim().toLowerCase();
+		var sortedTR = new Array();
+		for (var i = 0; i < tdToSort.length; ++i) {
+			var tr = $(tdToSort[i]).parent();
+			sortedTR.push(tr);
 			
-			if (texta < textb) {
-				return -1;
-			}
-			else if (texta > textb) {
-				return 1;
-			} 
-			else {
-				return 0;
+			var childRows = tr[0].childRows;
+			if (childRows) {
+				for(var j=0; j < childRows.length; ++j) {
+					sortedTR.push(childRows[j]);
+				}
 			}
-		});
-	}
-
-	var sortedTR = new Array();
-	for (var i = 0; i < tdToSort.length; ++i) {
-		var tr = $(tdToSort[i]).parent();
-		sortedTR.push(tr);
+		}
 		
-		var childRows = tr[0].childRows;
-		if (childRows) {
-			for(var j=0; j < childRows.length; ++j) {
-				sortedTR.push(childRows[j]);
-			}
+		for (var i = 0; i < sortedTR.length; ++i) {
+			$(tbody).append(sortedTR[i]);
 		}
-	}
-	
-	for (var i = 0; i < sortedTR.length; ++i) {
-		$(tbody).append(sortedTR[i]);
-	}
   },
+
   render: function() {
-  	console.log("render graph");
+  	console.log("render sorted table");
   }
 });

diff --git a/src/web/js/azkaban.triggers.view.js b/src/web/js/azkaban.triggers.view.js
index 3b9dfc7..83771e9 100644
--- a/src/web/js/azkaban.triggers.view.js
+++ b/src/web/js/azkaban.triggers.view.js
@@ -19,65 +19,56 @@ $.namespace('azkaban');
 function expireTrigger(triggerId) {
 	var triggerURL = contextURL + "/triggers"
 	var redirectURL = contextURL + "/triggers"
-	$.post(
-			triggerURL,
-			{"ajax":"expireTrigger", "triggerId":triggerId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error);
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL;
-				}
-			},
-			"json"
-	)
+	var requestData = {"ajax": "expireTrigger", "triggerId": triggerId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error);
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL;
+    }
+  };
+	$.post(triggerURL, requestData, successHandler, "json");
 }
 
 function removeSched(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSched", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error);
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL;
-				}
-			},
-			"json"
-	)
+	var requestData = {"action": "removeSched", "scheduleId": scheduleId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error);
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL;
+    }
+  };
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
 function removeSla(scheduleId) {
 	var scheduleURL = contextURL + "/schedule"
 	var redirectURL = contextURL + "/schedule"
-	$.post(
-			scheduleURL,
-			{"action":"removeSla", "scheduleId":scheduleId},
-			function(data) {
-				if (data.error) {
-//                 alert(data.error)
-					$('#errorMsg').text(data.error)
-				}
-				else {
-// 		 alert("Schedule "+schedId+" removed!")
-					window.location = redirectURL
-				}
-			},
-			"json"
-	)
+  var requestData = {"action": "removeSla", "scheduleId": scheduleId};
+	var successHandler = function(data) {
+    if (data.error) {
+      //alert(data.error)
+      $('#errorMsg').text(data.error)
+    }
+    else {
+      //alert("Schedule "+schedId+" removed!")
+      window.location = redirectURL
+    }
+  };
+	$.post(scheduleURL, requestData, successHandler, "json");
 }
 
 azkaban.ChangeSlaView = Backbone.View.extend({
-	events : {
+	events: {
 		"click" : "closeEditingTarget",
 		"click #set-sla-btn": "handleSetSla",	
 		"click #remove-sla-btn": "handleRemoveSla",
@@ -85,10 +76,11 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		"click .modal-close": "handleSlaCancel",
 		"click #addRow": "handleAddRow"
 	},
-	initialize: function(setting) {
-
+	
+  initialize: function(setting) {
 	},
-	handleSlaCancel: function(evt) {
+	
+  handleSlaCancel: function(evt) {
 		console.log("Clicked cancel button");
 		var scheduleURL = contextURL + "/schedule";
 
@@ -98,11 +90,11 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
 		var rows = tFlowRules.rows;
 		var rowLength = rows.length
-		for(var i = 0; i < rowLength-1; i++) {
+		for (var i = 0; i < rowLength-1; i++) {
 			tFlowRules.deleteRow(0);
 		}
-		
 	},
+
 	initFromSched: function(scheduleId, flowName) {
 		this.scheduleId = scheduleId;
 		
@@ -117,138 +109,123 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		var ruleBoxOptions = ["SUCCESS", "FINISH"];
 		this.ruleBoxOptions = ruleBoxOptions;
 		
-		var fetchScheduleData = {"scheduleId": this.scheduleId, "ajax":"slaInfo"};
-		
-		$.get(
-				this.scheduleURL,
-				fetchScheduleData,
-				function(data) {
-					if (data.error) {
-						alert(data.error);
-					}
-					else {
-						if (data.slaEmails) {
-							$('#slaEmails').val(data.slaEmails.join());
-						}
-						
-						var allJobNames = data.allJobNames;
-						
-						indexToName[0] = "";
-						nameToIndex[flowName] = 0;
-						indexToText[0] = "flow " + flowName;
-						for(var i = 1; i <= allJobNames.length; i++) {
-							indexToName[i] = allJobNames[i-1];
-							nameToIndex[allJobNames[i-1]] = i;
-							indexToText[i] = "job " + allJobNames[i-1];
-						}
-						
-						
-						
-						
-						
-						// populate with existing settings
-						if(data.settings) {
-							
-							var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-							
-							for(var setting in data.settings) {
-								var rFlowRule = tFlowRules.insertRow(0);
-								
-								var cId = rFlowRule.insertCell(-1);
-								var idSelect = document.createElement("select");
-								for(var i in indexToName) {
-									idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
-									if(data.settings[setting].id == indexToName[i]) {
-										idSelect.options[i].selected = true;
-									}
-								}								
-								cId.appendChild(idSelect);
-								
-								var cRule = rFlowRule.insertCell(-1);
-								var ruleSelect = document.createElement("select");
-								for(var i in ruleBoxOptions) {
-									ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
-									if(data.settings[setting].rule == ruleBoxOptions[i]) {
-										ruleSelect.options[i].selected = true;
-									}
-								}
-								cRule.appendChild(ruleSelect);
-								
-								var cDuration = rFlowRule.insertCell(-1);
-								var duration = document.createElement("input");
-								duration.type = "text";
-								duration.setAttribute("class", "durationpick");
-								var rawMinutes = data.settings[setting].duration;
-								var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
-								var minutes = parseInt(intMinutes);
-								var hours = Math.floor(minutes / 60);
-								minutes = minutes % 60;
-								duration.value = hours + ":" + minutes;
-								cDuration.appendChild(duration);
+		var fetchScheduleData = {"scheduleId": this.scheduleId, "ajax": "slaInfo"};
+    var successHandler = function(data) {
+      if (data.error) {
+        alert(data.error);
+        return;
+      }
+      if (data.slaEmails) {
+        $('#slaEmails').val(data.slaEmails.join());
+      }
+      
+      var allJobNames = data.allJobNames;
+      
+      indexToName[0] = "";
+      nameToIndex[flowName] = 0;
+      indexToText[0] = "flow " + flowName;
+      for (var i = 1; i <= allJobNames.length; i++) {
+        indexToName[i] = allJobNames[i-1];
+        nameToIndex[allJobNames[i-1]] = i;
+        indexToText[i] = "job " + allJobNames[i-1];
+      }
+      
+      // populate with existing settings
+      if (data.settings) {
+        $('.durationpick').timepicker({hourMax: 99});
+        return;
+      }
+
+      var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
+      for (var setting in data.settings) {
+        var rFlowRule = tFlowRules.insertRow(0);
+        
+        var cId = rFlowRule.insertCell(-1);
+        var idSelect = document.createElement("select");
+        for (var i in indexToName) {
+          idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
+          if (data.settings[setting].id == indexToName[i]) {
+            idSelect.options[i].selected = true;
+          }
+        }								
+        cId.appendChild(idSelect);
+        
+        var cRule = rFlowRule.insertCell(-1);
+        var ruleSelect = document.createElement("select");
+        for (var i in ruleBoxOptions) {
+          ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
+          if (data.settings[setting].rule == ruleBoxOptions[i]) {
+            ruleSelect.options[i].selected = true;
+          }
+        }
+        cRule.appendChild(ruleSelect);
+        
+        var cDuration = rFlowRule.insertCell(-1);
+        var duration = document.createElement("input");
+        duration.type = "text";
+        duration.setAttribute("class", "durationpick");
+        var rawMinutes = data.settings[setting].duration;
+        var intMinutes = rawMinutes.substring(0, rawMinutes.length-1);
+        var minutes = parseInt(intMinutes);
+        var hours = Math.floor(minutes / 60);
+        minutes = minutes % 60;
+        duration.value = hours + ":" + minutes;
+        cDuration.appendChild(duration);
 
-								var cEmail = rFlowRule.insertCell(-1);
-								var emailCheck = document.createElement("input");
-								emailCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "EMAIL") {
-										emailCheck.checked = true;
-									}
-								}
-								cEmail.appendChild(emailCheck);
-								
-								var cKill = rFlowRule.insertCell(-1);
-								var killCheck = document.createElement("input");
-								killCheck.type = "checkbox";
-								for(var act in data.settings[setting].actions) {
-									if(data.settings[setting].actions[act] == "KILL") {
-										killCheck.checked = true;
-									}
-								}
-								cKill.appendChild(killCheck);
-								
-								$('.durationpick').timepicker({hourMax: 99});
-							}
-						}
-						$('.durationpick').timepicker({hourMax: 99});
-					}
-				},
-				"json"
-			);
+        var cEmail = rFlowRule.insertCell(-1);
+        var emailCheck = document.createElement("input");
+        emailCheck.type = "checkbox";
+        for (var act in data.settings[setting].actions) {
+          if (data.settings[setting].actions[act] == "EMAIL") {
+            emailCheck.checked = true;
+          }
+        }
+        cEmail.appendChild(emailCheck);
+        
+        var cKill = rFlowRule.insertCell(-1);
+        var killCheck = document.createElement("input");
+        killCheck.type = "checkbox";
+        for (var act in data.settings[setting].actions) {
+          if (data.settings[setting].actions[act] == "KILL") {
+            killCheck.checked = true;
+          }
+        }
+        cKill.appendChild(killCheck);
+        $('.durationpick').timepicker({hourMax: 99});
+      }
+      $('.durationpick').timepicker({hourMax: 99});
+    };
 		
+		$.get(this.scheduleURL, fetchScheduleData, successHandler, "json");
 		$('#slaModalBackground').show();
 		$('#sla-options').show();
 		
-//		this.schedFlowOptions = sched.flowOptions
+    //this.schedFlowOptions = sched.flowOptions
 		console.log("Loaded schedule info. Ready to set SLA.");
-
 	},
-	handleRemoveSla: function(evt) {
+	
+  handleRemoveSla: function(evt) {
 		console.log("Clicked remove sla button");
 		var scheduleURL = this.scheduleURL;
 		var redirectURL = this.scheduleURL;
-		$.post(
-				scheduleURL,
-				{"action":"removeSla", "scheduleId":this.scheduleId},
-				function(data) {
-				if (data.error) {
-						$('#errorMsg').text(data.error)
-					}
-					else {
-						window.location = redirectURL
-					}
-				"json"
-				}
-			);
-
+    var requestData = {"action": "removeSla", "scheduleId": this.scheduleId};
+    var successHandler = function(data) {
+      if (data.error) {
+        $('#errorMsg').text(data.error)
+      }
+      else {
+        window.location = redirectURL
+      }
+    };
+		$.post(scheduleURL, requestData, successHandler, "json");
 	},
-	handleSetSla: function(evt) {
-
+	
+  handleSetSla: function(evt) {
 		var slaEmails = $('#slaEmails').val();
 		var settings = {};
 		
-		
 		var tFlowRules = document.getElementById("flowRulesTbl").tBodies[0];
-		for(var row = 0; row < tFlowRules.rows.length-1; row++) {
+		for (var row = 0; row < tFlowRules.rows.length - 1; row++) {
 			var rFlowRule = tFlowRules.rows[row];
 			var id = rFlowRule.cells[0].firstChild.value;
 			var rule = rFlowRule.cells[1].firstChild.value;
@@ -266,24 +243,20 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		};
 
 		var scheduleURL = this.scheduleURL;
+    var successHandler = function(data) {
+      if (data.error) {
+        alert(data.error);
+      }
+      else {
+        tFlowRules.length = 0;
+        window.location = scheduleURL;
+      }
+    };
 		
-		$.post(
-			scheduleURL,
-			slaData,
-			function(data) {
-				if (data.error) {
-					alert(data.error);
-				}
-				else {
-					tFlowRules.length = 0;
-					window.location = scheduleURL;
-				}
-			},
-			"json"
-		);
+		$.post(scheduleURL, slaData, successHandler, "json");
 	},
-	handleAddRow: function(evt) {
-		
+	
+  handleAddRow: function(evt) {
 		var indexToName = this.indexToName;
 		var nameToIndex = this.nameToIndex;
 		var indexToText = this.indexToText;
@@ -294,7 +267,7 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		
 		var cId = rFlowRule.insertCell(-1);
 		var idSelect = document.createElement("select");
-		for(var i in indexToName) {
+		for (var i in indexToName) {
 			idSelect.options[i] = new Option(indexToText[i], indexToName[i]);
 		}
 		
@@ -302,7 +275,7 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		
 		var cRule = rFlowRule.insertCell(-1);
 		var ruleSelect = document.createElement("select");
-		for(var i in ruleBoxOptions) {
+		for (var i in ruleBoxOptions) {
 			ruleSelect.options[i] = new Option(ruleBoxOptions[i], ruleBoxOptions[i]);
 		}
 		cRule.appendChild(ruleSelect);
@@ -324,10 +297,10 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 		cKill.appendChild(killCheck);
 		
 		$('.durationpick').timepicker({hourMax: 99});
-
 		return rFlowRule;
 	},
-	handleEditColumn : function(evt) {
+
+	handleEditColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 	
 		if (this.editingTarget != curTarget) {
@@ -346,14 +319,15 @@ azkaban.ChangeSlaView = Backbone.View.extend({
 			this.editingTarget = curTarget;
 		}
 	},
-	handleRemoveColumn : function(evt) {
+
+	handleRemoveColumn: function(evt) {
 		var curTarget = evt.currentTarget;
 		// Should be the table
 		var row = curTarget.parentElement.parentElement;
 		$(row).remove();
 	},
-	closeEditingTarget: function(evt) {
 
+	closeEditingTarget: function(evt) {
 	}
 });
 
@@ -362,16 +336,14 @@ var tableSorterView;
 $(function() {
 	var selected;
 
-
 	slaView = new azkaban.ChangeSlaView({el:$('#sla-options')});
 	tableSorterView = new azkaban.TableSorter({el:$('#scheduledFlowsTbl')});
-//	var requestURL = contextURL + "/manager";
+  /*
+  var requestURL = contextURL + "/manager";
 
 	// Set up the Flow options view. Create a new one every time :p
-//	 $('#addSlaBtn').click( function() {
-//		 slaView.show();
-//	 });
-
-	 
-	
+  $('#addSlaBtn').click( function() {
+    slaView.show();
+  });
+  */
 });

diff --git a/src/web/js/bootstrap.js b/src/web/js/bootstrap.js
new file mode 100644
index 0000000..1c638ab
--- /dev/null
+++ b/src/web/js/bootstrap.js
@@ -0,0 +1,2002 @@
+/*!
+ * Bootstrap v3.0.2 by @fat and @mdo
+ * Copyright 2013 Twitter, Inc.
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by @mdo and @fat.
+ */
+
+if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }
+
+/* ========================================================================
+ * Bootstrap: transition.js v3.0.2
+ * http://getbootstrap.com/javascript/#transitions
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
+  // ============================================================
+
+  function transitionEnd() {
+    var el = document.createElement('bootstrap')
+
+    var transEndEventNames = {
+      'WebkitTransition' : 'webkitTransitionEnd'
+    , 'MozTransition'    : 'transitionend'
+    , 'OTransition'      : 'oTransitionEnd otransitionend'
+    , 'transition'       : 'transitionend'
+    }
+
+    for (var name in transEndEventNames) {
+      if (el.style[name] !== undefined) {
+        return { end: transEndEventNames[name] }
+      }
+    }
+  }
+
+  // http://blog.alexmaccaw.com/css-transitions
+  $.fn.emulateTransitionEnd = function (duration) {
+    var called = false, $el = this
+    $(this).one($.support.transition.end, function () { called = true })
+    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
+    setTimeout(callback, duration)
+    return this
+  }
+
+  $(function () {
+    $.support.transition = transitionEnd()
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: alert.js v3.0.2
+ * http://getbootstrap.com/javascript/#alerts
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // ALERT CLASS DEFINITION
+  // ======================
+
+  var dismiss = '[data-dismiss="alert"]'
+  var Alert   = function (el) {
+    $(el).on('click', dismiss, this.close)
+  }
+
+  Alert.prototype.close = function (e) {
+    var $this    = $(this)
+    var selector = $this.attr('data-target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+    }
+
+    var $parent = $(selector)
+
+    if (e) e.preventDefault()
+
+    if (!$parent.length) {
+      $parent = $this.hasClass('alert') ? $this : $this.parent()
+    }
+
+    $parent.trigger(e = $.Event('close.bs.alert'))
+
+    if (e.isDefaultPrevented()) return
+
+    $parent.removeClass('in')
+
+    function removeElement() {
+      $parent.trigger('closed.bs.alert').remove()
+    }
+
+    $.support.transition && $parent.hasClass('fade') ?
+      $parent
+        .one($.support.transition.end, removeElement)
+        .emulateTransitionEnd(150) :
+      removeElement()
+  }
+
+
+  // ALERT PLUGIN DEFINITION
+  // =======================
+
+  var old = $.fn.alert
+
+  $.fn.alert = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('bs.alert')
+
+      if (!data) $this.data('bs.alert', (data = new Alert(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.alert.Constructor = Alert
+
+
+  // ALERT NO CONFLICT
+  // =================
+
+  $.fn.alert.noConflict = function () {
+    $.fn.alert = old
+    return this
+  }
+
+
+  // ALERT DATA-API
+  // ==============
+
+  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: button.js v3.0.2
+ * http://getbootstrap.com/javascript/#buttons
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // BUTTON PUBLIC CLASS DEFINITION
+  // ==============================
+
+  var Button = function (element, options) {
+    this.$element = $(element)
+    this.options  = $.extend({}, Button.DEFAULTS, options)
+  }
+
+  Button.DEFAULTS = {
+    loadingText: 'loading...'
+  }
+
+  Button.prototype.setState = function (state) {
+    var d    = 'disabled'
+    var $el  = this.$element
+    var val  = $el.is('input') ? 'val' : 'html'
+    var data = $el.data()
+
+    state = state + 'Text'
+
+    if (!data.resetText) $el.data('resetText', $el[val]())
+
+    $el[val](data[state] || this.options[state])
+
+    // push to event loop to allow forms to submit
+    setTimeout(function () {
+      state == 'loadingText' ?
+        $el.addClass(d).attr(d, d) :
+        $el.removeClass(d).removeAttr(d);
+    }, 0)
+  }
+
+  Button.prototype.toggle = function () {
+    var $parent = this.$element.closest('[data-toggle="buttons"]')
+
+    if ($parent.length) {
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
+      if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
+    }
+
+    this.$element.toggleClass('active')
+  }
+
+
+  // BUTTON PLUGIN DEFINITION
+  // ========================
+
+  var old = $.fn.button
+
+  $.fn.button = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.button')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.button', (data = new Button(this, options)))
+
+      if (option == 'toggle') data.toggle()
+      else if (option) data.setState(option)
+    })
+  }
+
+  $.fn.button.Constructor = Button
+
+
+  // BUTTON NO CONFLICT
+  // ==================
+
+  $.fn.button.noConflict = function () {
+    $.fn.button = old
+    return this
+  }
+
+
+  // BUTTON DATA-API
+  // ===============
+
+  $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
+    var $btn = $(e.target)
+    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
+    $btn.button('toggle')
+    e.preventDefault()
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: carousel.js v3.0.2
+ * http://getbootstrap.com/javascript/#carousel
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // CAROUSEL CLASS DEFINITION
+  // =========================
+
+  var Carousel = function (element, options) {
+    this.$element    = $(element)
+    this.$indicators = this.$element.find('.carousel-indicators')
+    this.options     = options
+    this.paused      =
+    this.sliding     =
+    this.interval    =
+    this.$active     =
+    this.$items      = null
+
+    this.options.pause == 'hover' && this.$element
+      .on('mouseenter', $.proxy(this.pause, this))
+      .on('mouseleave', $.proxy(this.cycle, this))
+  }
+
+  Carousel.DEFAULTS = {
+    interval: 5000
+  , pause: 'hover'
+  , wrap: true
+  }
+
+  Carousel.prototype.cycle =  function (e) {
+    e || (this.paused = false)
+
+    this.interval && clearInterval(this.interval)
+
+    this.options.interval
+      && !this.paused
+      && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
+
+    return this
+  }
+
+  Carousel.prototype.getActiveIndex = function () {
+    this.$active = this.$element.find('.item.active')
+    this.$items  = this.$active.parent().children()
+
+    return this.$items.index(this.$active)
+  }
+
+  Carousel.prototype.to = function (pos) {
+    var that        = this
+    var activeIndex = this.getActiveIndex()
+
+    if (pos > (this.$items.length - 1) || pos < 0) return
+
+    if (this.sliding)       return this.$element.one('slid', function () { that.to(pos) })
+    if (activeIndex == pos) return this.pause().cycle()
+
+    return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos]))
+  }
+
+  Carousel.prototype.pause = function (e) {
+    e || (this.paused = true)
+
+    if (this.$element.find('.next, .prev').length && $.support.transition.end) {
+      this.$element.trigger($.support.transition.end)
+      this.cycle(true)
+    }
+
+    this.interval = clearInterval(this.interval)
+
+    return this
+  }
+
+  Carousel.prototype.next = function () {
+    if (this.sliding) return
+    return this.slide('next')
+  }
+
+  Carousel.prototype.prev = function () {
+    if (this.sliding) return
+    return this.slide('prev')
+  }
+
+  Carousel.prototype.slide = function (type, next) {
+    var $active   = this.$element.find('.item.active')
+    var $next     = next || $active[type]()
+    var isCycling = this.interval
+    var direction = type == 'next' ? 'left' : 'right'
+    var fallback  = type == 'next' ? 'first' : 'last'
+    var that      = this
+
+    if (!$next.length) {
+      if (!this.options.wrap) return
+      $next = this.$element.find('.item')[fallback]()
+    }
+
+    this.sliding = true
+
+    isCycling && this.pause()
+
+    var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
+
+    if ($next.hasClass('active')) return
+
+    if (this.$indicators.length) {
+      this.$indicators.find('.active').removeClass('active')
+      this.$element.one('slid', function () {
+        var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()])
+        $nextIndicator && $nextIndicator.addClass('active')
+      })
+    }
+
+    if ($.support.transition && this.$element.hasClass('slide')) {
+      this.$element.trigger(e)
+      if (e.isDefaultPrevented()) return
+      $next.addClass(type)
+      $next[0].offsetWidth // force reflow
+      $active.addClass(direction)
+      $next.addClass(direction)
+      $active
+        .one($.support.transition.end, function () {
+          $next.removeClass([type, direction].join(' ')).addClass('active')
+          $active.removeClass(['active', direction].join(' '))
+          that.sliding = false
+          setTimeout(function () { that.$element.trigger('slid') }, 0)
+        })
+        .emulateTransitionEnd(600)
+    } else {
+      this.$element.trigger(e)
+      if (e.isDefaultPrevented()) return
+      $active.removeClass('active')
+      $next.addClass('active')
+      this.sliding = false
+      this.$element.trigger('slid')
+    }
+
+    isCycling && this.cycle()
+
+    return this
+  }
+
+
+  // CAROUSEL PLUGIN DEFINITION
+  // ==========================
+
+  var old = $.fn.carousel
+
+  $.fn.carousel = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.carousel')
+      var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
+      var action  = typeof option == 'string' ? option : options.slide
+
+      if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
+      if (typeof option == 'number') data.to(option)
+      else if (action) data[action]()
+      else if (options.interval) data.pause().cycle()
+    })
+  }
+
+  $.fn.carousel.Constructor = Carousel
+
+
+  // CAROUSEL NO CONFLICT
+  // ====================
+
+  $.fn.carousel.noConflict = function () {
+    $.fn.carousel = old
+    return this
+  }
+
+
+  // CAROUSEL DATA-API
+  // =================
+
+  $(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', function (e) {
+    var $this   = $(this), href
+    var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+    var options = $.extend({}, $target.data(), $this.data())
+    var slideIndex = $this.attr('data-slide-to')
+    if (slideIndex) options.interval = false
+
+    $target.carousel(options)
+
+    if (slideIndex = $this.attr('data-slide-to')) {
+      $target.data('bs.carousel').to(slideIndex)
+    }
+
+    e.preventDefault()
+  })
+
+  $(window).on('load', function () {
+    $('[data-ride="carousel"]').each(function () {
+      var $carousel = $(this)
+      $carousel.carousel($carousel.data())
+    })
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: collapse.js v3.0.2
+ * http://getbootstrap.com/javascript/#collapse
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // COLLAPSE PUBLIC CLASS DEFINITION
+  // ================================
+
+  var Collapse = function (element, options) {
+    this.$element      = $(element)
+    this.options       = $.extend({}, Collapse.DEFAULTS, options)
+    this.transitioning = null
+
+    if (this.options.parent) this.$parent = $(this.options.parent)
+    if (this.options.toggle) this.toggle()
+  }
+
+  Collapse.DEFAULTS = {
+    toggle: true
+  }
+
+  Collapse.prototype.dimension = function () {
+    var hasWidth = this.$element.hasClass('width')
+    return hasWidth ? 'width' : 'height'
+  }
+
+  Collapse.prototype.show = function () {
+    if (this.transitioning || this.$element.hasClass('in')) return
+
+    var startEvent = $.Event('show.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
+
+    if (actives && actives.length) {
+      var hasData = actives.data('bs.collapse')
+      if (hasData && hasData.transitioning) return
+      actives.collapse('hide')
+      hasData || actives.data('bs.collapse', null)
+    }
+
+    var dimension = this.dimension()
+
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')
+      [dimension](0)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('in')
+        [dimension]('auto')
+      this.transitioning = 0
+      this.$element.trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+      [dimension](this.$element[0][scrollSize])
+  }
+
+  Collapse.prototype.hide = function () {
+    if (this.transitioning || !this.$element.hasClass('in')) return
+
+    var startEvent = $.Event('hide.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    var dimension = this.dimension()
+
+    this.$element
+      [dimension](this.$element[dimension]())
+      [0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
+      .removeClass('collapse')
+      .removeClass('in')
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.transitioning = 0
+      this.$element
+        .trigger('hidden.bs.collapse')
+        .removeClass('collapsing')
+        .addClass('collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one($.support.transition.end, $.proxy(complete, this))
+      .emulateTransitionEnd(350)
+  }
+
+  Collapse.prototype.toggle = function () {
+    this[this.$element.hasClass('in') ? 'hide' : 'show']()
+  }
+
+
+  // COLLAPSE PLUGIN DEFINITION
+  // ==========================
+
+  var old = $.fn.collapse
+
+  $.fn.collapse = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.collapse')
+      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
+
+      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.collapse.Constructor = Collapse
+
+
+  // COLLAPSE NO CONFLICT
+  // ====================
+
+  $.fn.collapse.noConflict = function () {
+    $.fn.collapse = old
+    return this
+  }
+
+
+  // COLLAPSE DATA-API
+  // =================
+
+  $(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {
+    var $this   = $(this), href
+    var target  = $this.attr('data-target')
+        || e.preventDefault()
+        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
+    var $target = $(target)
+    var data    = $target.data('bs.collapse')
+    var option  = data ? 'toggle' : $this.data()
+    var parent  = $this.attr('data-parent')
+    var $parent = parent && $(parent)
+
+    if (!data || !data.transitioning) {
+      if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
+      $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
+    }
+
+    $target.collapse(option)
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: dropdown.js v3.0.2
+ * http://getbootstrap.com/javascript/#dropdowns
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // DROPDOWN CLASS DEFINITION
+  // =========================
+
+  var backdrop = '.dropdown-backdrop'
+  var toggle   = '[data-toggle=dropdown]'
+  var Dropdown = function (element) {
+    var $el = $(element).on('click.bs.dropdown', this.toggle)
+  }
+
+  Dropdown.prototype.toggle = function (e) {
+    var $this = $(this)
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    clearMenus()
+
+    if (!isActive) {
+      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
+        // if mobile we we use a backdrop because click events don't delegate
+        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
+      }
+
+      $parent.trigger(e = $.Event('show.bs.dropdown'))
+
+      if (e.isDefaultPrevented()) return
+
+      $parent
+        .toggleClass('open')
+        .trigger('shown.bs.dropdown')
+
+      $this.focus()
+    }
+
+    return false
+  }
+
+  Dropdown.prototype.keydown = function (e) {
+    if (!/(38|40|27)/.test(e.keyCode)) return
+
+    var $this = $(this)
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    if ($this.is('.disabled, :disabled')) return
+
+    var $parent  = getParent($this)
+    var isActive = $parent.hasClass('open')
+
+    if (!isActive || (isActive && e.keyCode == 27)) {
+      if (e.which == 27) $parent.find(toggle).focus()
+      return $this.click()
+    }
+
+    var $items = $('[role=menu] li:not(.divider):visible a', $parent)
+
+    if (!$items.length) return
+
+    var index = $items.index($items.filter(':focus'))
+
+    if (e.keyCode == 38 && index > 0)                 index--                        // up
+    if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
+    if (!~index)                                      index=0
+
+    $items.eq(index).focus()
+  }
+
+  function clearMenus() {
+    $(backdrop).remove()
+    $(toggle).each(function (e) {
+      var $parent = getParent($(this))
+      if (!$parent.hasClass('open')) return
+      $parent.trigger(e = $.Event('hide.bs.dropdown'))
+      if (e.isDefaultPrevented()) return
+      $parent.removeClass('open').trigger('hidden.bs.dropdown')
+    })
+  }
+
+  function getParent($this) {
+    var selector = $this.attr('data-target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+    }
+
+    var $parent = selector && $(selector)
+
+    return $parent && $parent.length ? $parent : $this.parent()
+  }
+
+
+  // DROPDOWN PLUGIN DEFINITION
+  // ==========================
+
+  var old = $.fn.dropdown
+
+  $.fn.dropdown = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('dropdown')
+
+      if (!data) $this.data('dropdown', (data = new Dropdown(this)))
+      if (typeof option == 'string') data[option].call($this)
+    })
+  }
+
+  $.fn.dropdown.Constructor = Dropdown
+
+
+  // DROPDOWN NO CONFLICT
+  // ====================
+
+  $.fn.dropdown.noConflict = function () {
+    $.fn.dropdown = old
+    return this
+  }
+
+
+  // APPLY TO STANDARD DROPDOWN ELEMENTS
+  // ===================================
+
+  $(document)
+    .on('click.bs.dropdown.data-api', clearMenus)
+    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
+    .on('click.bs.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
+    .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: modal.js v3.0.2
+ * http://getbootstrap.com/javascript/#modals
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // MODAL CLASS DEFINITION
+  // ======================
+
+  var Modal = function (element, options) {
+    this.options   = options
+    this.$element  = $(element)
+    this.$backdrop =
+    this.isShown   = null
+
+    if (this.options.remote) this.$element.load(this.options.remote)
+  }
+
+  Modal.DEFAULTS = {
+      backdrop: true
+    , keyboard: true
+    , show: true
+  }
+
+  Modal.prototype.toggle = function (_relatedTarget) {
+    return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
+  }
+
+  Modal.prototype.show = function (_relatedTarget) {
+    var that = this
+    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
+
+    this.$element.trigger(e)
+
+    if (this.isShown || e.isDefaultPrevented()) return
+
+    this.isShown = true
+
+    this.escape()
+
+    this.$element.on('click.dismiss.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))
+
+    this.backdrop(function () {
+      var transition = $.support.transition && that.$element.hasClass('fade')
+
+      if (!that.$element.parent().length) {
+        that.$element.appendTo(document.body) // don't move modals dom position
+      }
+
+      that.$element.show()
+
+      if (transition) {
+        that.$element[0].offsetWidth // force reflow
+      }
+
+      that.$element
+        .addClass('in')
+        .attr('aria-hidden', false)
+
+      that.enforceFocus()
+
+      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
+
+      transition ?
+        that.$element.find('.modal-dialog') // wait for modal to slide in
+          .one($.support.transition.end, function () {
+            that.$element.focus().trigger(e)
+          })
+          .emulateTransitionEnd(300) :
+        that.$element.focus().trigger(e)
+    })
+  }
+
+  Modal.prototype.hide = function (e) {
+    if (e) e.preventDefault()
+
+    e = $.Event('hide.bs.modal')
+
+    this.$element.trigger(e)
+
+    if (!this.isShown || e.isDefaultPrevented()) return
+
+    this.isShown = false
+
+    this.escape()
+
+    $(document).off('focusin.bs.modal')
+
+    this.$element
+      .removeClass('in')
+      .attr('aria-hidden', true)
+      .off('click.dismiss.modal')
+
+    $.support.transition && this.$element.hasClass('fade') ?
+      this.$element
+        .one($.support.transition.end, $.proxy(this.hideModal, this))
+        .emulateTransitionEnd(300) :
+      this.hideModal()
+  }
+
+  Modal.prototype.enforceFocus = function () {
+    $(document)
+      .off('focusin.bs.modal') // guard against infinite focus loop
+      .on('focusin.bs.modal', $.proxy(function (e) {
+        if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
+          this.$element.focus()
+        }
+      }, this))
+  }
+
+  Modal.prototype.escape = function () {
+    if (this.isShown && this.options.keyboard) {
+      this.$element.on('keyup.dismiss.bs.modal', $.proxy(function (e) {
+        e.which == 27 && this.hide()
+      }, this))
+    } else if (!this.isShown) {
+      this.$element.off('keyup.dismiss.bs.modal')
+    }
+  }
+
+  Modal.prototype.hideModal = function () {
+    var that = this
+    this.$element.hide()
+    this.backdrop(function () {
+      that.removeBackdrop()
+      that.$element.trigger('hidden.bs.modal')
+    })
+  }
+
+  Modal.prototype.removeBackdrop = function () {
+    this.$backdrop && this.$backdrop.remove()
+    this.$backdrop = null
+  }
+
+  Modal.prototype.backdrop = function (callback) {
+    var that    = this
+    var animate = this.$element.hasClass('fade') ? 'fade' : ''
+
+    if (this.isShown && this.options.backdrop) {
+      var doAnimate = $.support.transition && animate
+
+      this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
+        .appendTo(document.body)
+
+      this.$element.on('click.dismiss.modal', $.proxy(function (e) {
+        if (e.target !== e.currentTarget) return
+        this.options.backdrop == 'static'
+          ? this.$element[0].focus.call(this.$element[0])
+          : this.hide.call(this)
+      }, this))
+
+      if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
+
+      this.$backdrop.addClass('in')
+
+      if (!callback) return
+
+      doAnimate ?
+        this.$backdrop
+          .one($.support.transition.end, callback)
+          .emulateTransitionEnd(150) :
+        callback()
+
+    } else if (!this.isShown && this.$backdrop) {
+      this.$backdrop.removeClass('in')
+
+      $.support.transition && this.$element.hasClass('fade')?
+        this.$backdrop
+          .one($.support.transition.end, callback)
+          .emulateTransitionEnd(150) :
+        callback()
+
+    } else if (callback) {
+      callback()
+    }
+  }
+
+
+  // MODAL PLUGIN DEFINITION
+  // =======================
+
+  var old = $.fn.modal
+
+  $.fn.modal = function (option, _relatedTarget) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.modal')
+      var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
+
+      if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
+      if (typeof option == 'string') data[option](_relatedTarget)
+      else if (options.show) data.show(_relatedTarget)
+    })
+  }
+
+  $.fn.modal.Constructor = Modal
+
+
+  // MODAL NO CONFLICT
+  // =================
+
+  $.fn.modal.noConflict = function () {
+    $.fn.modal = old
+    return this
+  }
+
+
+  // MODAL DATA-API
+  // ==============
+
+  $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
+    var $this   = $(this)
+    var href    = $this.attr('href')
+    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
+    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
+
+    e.preventDefault()
+
+    $target
+      .modal(option, this)
+      .one('hide', function () {
+        $this.is(':visible') && $this.focus()
+      })
+  })
+
+  $(document)
+    .on('show.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
+    .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: tooltip.js v3.0.2
+ * http://getbootstrap.com/javascript/#tooltip
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // TOOLTIP PUBLIC CLASS DEFINITION
+  // ===============================
+
+  var Tooltip = function (element, options) {
+    this.type       =
+    this.options    =
+    this.enabled    =
+    this.timeout    =
+    this.hoverState =
+    this.$element   = null
+
+    this.init('tooltip', element, options)
+  }
+
+  Tooltip.DEFAULTS = {
+    animation: true
+  , placement: 'top'
+  , selector: false
+  , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+  , trigger: 'hover focus'
+  , title: ''
+  , delay: 0
+  , html: false
+  , container: false
+  }
+
+  Tooltip.prototype.init = function (type, element, options) {
+    this.enabled  = true
+    this.type     = type
+    this.$element = $(element)
+    this.options  = this.getOptions(options)
+
+    var triggers = this.options.trigger.split(' ')
+
+    for (var i = triggers.length; i--;) {
+      var trigger = triggers[i]
+
+      if (trigger == 'click') {
+        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
+      } else if (trigger != 'manual') {
+        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focus'
+        var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
+
+        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
+      }
+    }
+
+    this.options.selector ?
+      (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+      this.fixTitle()
+  }
+
+  Tooltip.prototype.getDefaults = function () {
+    return Tooltip.DEFAULTS
+  }
+
+  Tooltip.prototype.getOptions = function (options) {
+    options = $.extend({}, this.getDefaults(), this.$element.data(), options)
+
+    if (options.delay && typeof options.delay == 'number') {
+      options.delay = {
+        show: options.delay
+      , hide: options.delay
+      }
+    }
+
+    return options
+  }
+
+  Tooltip.prototype.getDelegateOptions = function () {
+    var options  = {}
+    var defaults = this.getDefaults()
+
+    this._options && $.each(this._options, function (key, value) {
+      if (defaults[key] != value) options[key] = value
+    })
+
+    return options
+  }
+
+  Tooltip.prototype.enter = function (obj) {
+    var self = obj instanceof this.constructor ?
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+
+    clearTimeout(self.timeout)
+
+    self.hoverState = 'in'
+
+    if (!self.options.delay || !self.options.delay.show) return self.show()
+
+    self.timeout = setTimeout(function () {
+      if (self.hoverState == 'in') self.show()
+    }, self.options.delay.show)
+  }
+
+  Tooltip.prototype.leave = function (obj) {
+    var self = obj instanceof this.constructor ?
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
+
+    clearTimeout(self.timeout)
+
+    self.hoverState = 'out'
+
+    if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+    self.timeout = setTimeout(function () {
+      if (self.hoverState == 'out') self.hide()
+    }, self.options.delay.hide)
+  }
+
+  Tooltip.prototype.show = function () {
+    var e = $.Event('show.bs.'+ this.type)
+
+    if (this.hasContent() && this.enabled) {
+      this.$element.trigger(e)
+
+      if (e.isDefaultPrevented()) return
+
+      var $tip = this.tip()
+
+      this.setContent()
+
+      if (this.options.animation) $tip.addClass('fade')
+
+      var placement = typeof this.options.placement == 'function' ?
+        this.options.placement.call(this, $tip[0], this.$element[0]) :
+        this.options.placement
+
+      var autoToken = /\s?auto?\s?/i
+      var autoPlace = autoToken.test(placement)
+      if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
+
+      $tip
+        .detach()
+        .css({ top: 0, left: 0, display: 'block' })
+        .addClass(placement)
+
+      this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
+
+      var pos          = this.getPosition()
+      var actualWidth  = $tip[0].offsetWidth
+      var actualHeight = $tip[0].offsetHeight
+
+      if (autoPlace) {
+        var $parent = this.$element.parent()
+
+        var orgPlacement = placement
+        var docScroll    = document.documentElement.scrollTop || document.body.scrollTop
+        var parentWidth  = this.options.container == 'body' ? window.innerWidth  : $parent.outerWidth()
+        var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight()
+        var parentLeft   = this.options.container == 'body' ? 0 : $parent.offset().left
+
+        placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
+                    placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
+                    placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
+                    placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
+                    placement
+
+        $tip
+          .removeClass(orgPlacement)
+          .addClass(placement)
+      }
+
+      var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
+
+      this.applyPlacement(calculatedOffset, placement)
+      this.$element.trigger('shown.bs.' + this.type)
+    }
+  }
+
+  Tooltip.prototype.applyPlacement = function(offset, placement) {
+    var replace
+    var $tip   = this.tip()
+    var width  = $tip[0].offsetWidth
+    var height = $tip[0].offsetHeight
+
+    // manually read margins because getBoundingClientRect includes difference
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft
+
+    $tip
+      .offset(offset)
+      .addClass('in')
+
+    // check to see if placing tip in new offset caused the tip to resize itself
+    var actualWidth  = $tip[0].offsetWidth
+    var actualHeight = $tip[0].offsetHeight
+
+    if (placement == 'top' && actualHeight != height) {
+      replace = true
+      offset.top = offset.top + height - actualHeight
+    }
+
+    if (/bottom|top/.test(placement)) {
+      var delta = 0
+
+      if (offset.left < 0) {
+        delta       = offset.left * -2
+        offset.left = 0
+
+        $tip.offset(offset)
+
+        actualWidth  = $tip[0].offsetWidth
+        actualHeight = $tip[0].offsetHeight
+      }
+
+      this.replaceArrow(delta - width + actualWidth, actualWidth, 'left')
+    } else {
+      this.replaceArrow(actualHeight - height, actualHeight, 'top')
+    }
+
+    if (replace) $tip.offset(offset)
+  }
+
+  Tooltip.prototype.replaceArrow = function(delta, dimension, position) {
+    this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
+  }
+
+  Tooltip.prototype.setContent = function () {
+    var $tip  = this.tip()
+    var title = this.getTitle()
+
+    $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
+    $tip.removeClass('fade in top bottom left right')
+  }
+
+  Tooltip.prototype.hide = function () {
+    var that = this
+    var $tip = this.tip()
+    var e    = $.Event('hide.bs.' + this.type)
+
+    function complete() {
+      if (that.hoverState != 'in') $tip.detach()
+    }
+
+    this.$element.trigger(e)
+
+    if (e.isDefaultPrevented()) return
+
+    $tip.removeClass('in')
+
+    $.support.transition && this.$tip.hasClass('fade') ?
+      $tip
+        .one($.support.transition.end, complete)
+        .emulateTransitionEnd(150) :
+      complete()
+
+    this.$element.trigger('hidden.bs.' + this.type)
+
+    return this
+  }
+
+  Tooltip.prototype.fixTitle = function () {
+    var $e = this.$element
+    if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+      $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
+    }
+  }
+
+  Tooltip.prototype.hasContent = function () {
+    return this.getTitle()
+  }
+
+  Tooltip.prototype.getPosition = function () {
+    var el = this.$element[0]
+    return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : {
+      width: el.offsetWidth
+    , height: el.offsetHeight
+    }, this.$element.offset())
+  }
+
+  Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
+  Tooltip.prototype.getTitle = function () {
+    var title
+    var $e = this.$element
+    var o  = this.options
+
+    title = $e.attr('data-original-title')
+      || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
+
+    return title
+  }
+
+  Tooltip.prototype.tip = function () {
+    return this.$tip = this.$tip || $(this.options.template)
+  }
+
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
+  }
+
+  Tooltip.prototype.validate = function () {
+    if (!this.$element[0].parentNode) {
+      this.hide()
+      this.$element = null
+      this.options  = null
+    }
+  }
+
+  Tooltip.prototype.enable = function () {
+    this.enabled = true
+  }
+
+  Tooltip.prototype.disable = function () {
+    this.enabled = false
+  }
+
+  Tooltip.prototype.toggleEnabled = function () {
+    this.enabled = !this.enabled
+  }
+
+  Tooltip.prototype.toggle = function (e) {
+    var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
+    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
+  }
+
+  Tooltip.prototype.destroy = function () {
+    this.hide().$element.off('.' + this.type).removeData('bs.' + this.type)
+  }
+
+
+  // TOOLTIP PLUGIN DEFINITION
+  // =========================
+
+  var old = $.fn.tooltip
+
+  $.fn.tooltip = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.tooltip')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.tooltip.Constructor = Tooltip
+
+
+  // TOOLTIP NO CONFLICT
+  // ===================
+
+  $.fn.tooltip.noConflict = function () {
+    $.fn.tooltip = old
+    return this
+  }
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: popover.js v3.0.2
+ * http://getbootstrap.com/javascript/#popovers
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // POPOVER PUBLIC CLASS DEFINITION
+  // ===============================
+
+  var Popover = function (element, options) {
+    this.init('popover', element, options)
+  }
+
+  if (!$.fn.tooltip) throw new Error('Popover requires tooltip.js')
+
+  Popover.DEFAULTS = $.extend({} , $.fn.tooltip.Constructor.DEFAULTS, {
+    placement: 'right'
+  , trigger: 'click'
+  , content: ''
+  , template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
+  })
+
+
+  // NOTE: POPOVER EXTENDS tooltip.js
+  // ================================
+
+  Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype)
+
+  Popover.prototype.constructor = Popover
+
+  Popover.prototype.getDefaults = function () {
+    return Popover.DEFAULTS
+  }
+
+  Popover.prototype.setContent = function () {
+    var $tip    = this.tip()
+    var title   = this.getTitle()
+    var content = this.getContent()
+
+    $tip.find('.popover-title')[this.options.html ? 'html' : 'text'](title)
+    $tip.find('.popover-content')[this.options.html ? 'html' : 'text'](content)
+
+    $tip.removeClass('fade top bottom left right in')
+
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
+  }
+
+  Popover.prototype.hasContent = function () {
+    return this.getTitle() || this.getContent()
+  }
+
+  Popover.prototype.getContent = function () {
+    var $e = this.$element
+    var o  = this.options
+
+    return $e.attr('data-content')
+      || (typeof o.content == 'function' ?
+            o.content.call($e[0]) :
+            o.content)
+  }
+
+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
+  }
+
+  Popover.prototype.tip = function () {
+    if (!this.$tip) this.$tip = $(this.options.template)
+    return this.$tip
+  }
+
+
+  // POPOVER PLUGIN DEFINITION
+  // =========================
+
+  var old = $.fn.popover
+
+  $.fn.popover = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.popover')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.popover', (data = new Popover(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.popover.Constructor = Popover
+
+
+  // POPOVER NO CONFLICT
+  // ===================
+
+  $.fn.popover.noConflict = function () {
+    $.fn.popover = old
+    return this
+  }
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: scrollspy.js v3.0.2
+ * http://getbootstrap.com/javascript/#scrollspy
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // SCROLLSPY CLASS DEFINITION
+  // ==========================
+
+  function ScrollSpy(element, options) {
+    var href
+    var process  = $.proxy(this.process, this)
+
+    this.$element       = $(element).is('body') ? $(window) : $(element)
+    this.$body          = $('body')
+    this.$scrollElement = this.$element.on('scroll.bs.scroll-spy.data-api', process)
+    this.options        = $.extend({}, ScrollSpy.DEFAULTS, options)
+    this.selector       = (this.options.target
+      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+      || '') + ' .nav li > a'
+    this.offsets        = $([])
+    this.targets        = $([])
+    this.activeTarget   = null
+
+    this.refresh()
+    this.process()
+  }
+
+  ScrollSpy.DEFAULTS = {
+    offset: 10
+  }
+
+  ScrollSpy.prototype.refresh = function () {
+    var offsetMethod = this.$element[0] == window ? 'offset' : 'position'
+
+    this.offsets = $([])
+    this.targets = $([])
+
+    var self     = this
+    var $targets = this.$body
+      .find(this.selector)
+      .map(function () {
+        var $el   = $(this)
+        var href  = $el.data('target') || $el.attr('href')
+        var $href = /^#\w/.test(href) && $(href)
+
+        return ($href
+          && $href.length
+          && [[ $href[offsetMethod]().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]]) || null
+      })
+      .sort(function (a, b) { return a[0] - b[0] })
+      .each(function () {
+        self.offsets.push(this[0])
+        self.targets.push(this[1])
+      })
+  }
+
+  ScrollSpy.prototype.process = function () {
+    var scrollTop    = this.$scrollElement.scrollTop() + this.options.offset
+    var scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+    var maxScroll    = scrollHeight - this.$scrollElement.height()
+    var offsets      = this.offsets
+    var targets      = this.targets
+    var activeTarget = this.activeTarget
+    var i
+
+    if (scrollTop >= maxScroll) {
+      return activeTarget != (i = targets.last()[0]) && this.activate(i)
+    }
+
+    for (i = offsets.length; i--;) {
+      activeTarget != targets[i]
+        && scrollTop >= offsets[i]
+        && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+        && this.activate( targets[i] )
+    }
+  }
+
+  ScrollSpy.prototype.activate = function (target) {
+    this.activeTarget = target
+
+    $(this.selector)
+      .parents('.active')
+      .removeClass('active')
+
+    var selector = this.selector
+      + '[data-target="' + target + '"],'
+      + this.selector + '[href="' + target + '"]'
+
+    var active = $(selector)
+      .parents('li')
+      .addClass('active')
+
+    if (active.parent('.dropdown-menu').length)  {
+      active = active
+        .closest('li.dropdown')
+        .addClass('active')
+    }
+
+    active.trigger('activate')
+  }
+
+
+  // SCROLLSPY PLUGIN DEFINITION
+  // ===========================
+
+  var old = $.fn.scrollspy
+
+  $.fn.scrollspy = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.scrollspy')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.scrollspy', (data = new ScrollSpy(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.scrollspy.Constructor = ScrollSpy
+
+
+  // SCROLLSPY NO CONFLICT
+  // =====================
+
+  $.fn.scrollspy.noConflict = function () {
+    $.fn.scrollspy = old
+    return this
+  }
+
+
+  // SCROLLSPY DATA-API
+  // ==================
+
+  $(window).on('load', function () {
+    $('[data-spy="scroll"]').each(function () {
+      var $spy = $(this)
+      $spy.scrollspy($spy.data())
+    })
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: tab.js v3.0.2
+ * http://getbootstrap.com/javascript/#tabs
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // TAB CLASS DEFINITION
+  // ====================
+
+  var Tab = function (element) {
+    this.element = $(element)
+  }
+
+  Tab.prototype.show = function () {
+    var $this    = this.element
+    var $ul      = $this.closest('ul:not(.dropdown-menu)')
+    var selector = $this.data('target')
+
+    if (!selector) {
+      selector = $this.attr('href')
+      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
+    }
+
+    if ($this.parent('li').hasClass('active')) return
+
+    var previous = $ul.find('.active:last a')[0]
+    var e        = $.Event('show.bs.tab', {
+      relatedTarget: previous
+    })
+
+    $this.trigger(e)
+
+    if (e.isDefaultPrevented()) return
+
+    var $target = $(selector)
+
+    this.activate($this.parent('li'), $ul)
+    this.activate($target, $target.parent(), function () {
+      $this.trigger({
+        type: 'shown.bs.tab'
+      , relatedTarget: previous
+      })
+    })
+  }
+
+  Tab.prototype.activate = function (element, container, callback) {
+    var $active    = container.find('> .active')
+    var transition = callback
+      && $.support.transition
+      && $active.hasClass('fade')
+
+    function next() {
+      $active
+        .removeClass('active')
+        .find('> .dropdown-menu > .active')
+        .removeClass('active')
+
+      element.addClass('active')
+
+      if (transition) {
+        element[0].offsetWidth // reflow for transition
+        element.addClass('in')
+      } else {
+        element.removeClass('fade')
+      }
+
+      if (element.parent('.dropdown-menu')) {
+        element.closest('li.dropdown').addClass('active')
+      }
+
+      callback && callback()
+    }
+
+    transition ?
+      $active
+        .one($.support.transition.end, next)
+        .emulateTransitionEnd(150) :
+      next()
+
+    $active.removeClass('in')
+  }
+
+
+  // TAB PLUGIN DEFINITION
+  // =====================
+
+  var old = $.fn.tab
+
+  $.fn.tab = function ( option ) {
+    return this.each(function () {
+      var $this = $(this)
+      var data  = $this.data('bs.tab')
+
+      if (!data) $this.data('bs.tab', (data = new Tab(this)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.tab.Constructor = Tab
+
+
+  // TAB NO CONFLICT
+  // ===============
+
+  $.fn.tab.noConflict = function () {
+    $.fn.tab = old
+    return this
+  }
+
+
+  // TAB DATA-API
+  // ============
+
+  $(document).on('click.bs.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
+    e.preventDefault()
+    $(this).tab('show')
+  })
+
+}(jQuery);
+
+/* ========================================================================
+ * Bootstrap: affix.js v3.0.2
+ * http://getbootstrap.com/javascript/#affix
+ * ========================================================================
+ * Copyright 2013 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================================== */
+
+
++function ($) { "use strict";
+
+  // AFFIX CLASS DEFINITION
+  // ======================
+
+  var Affix = function (element, options) {
+    this.options = $.extend({}, Affix.DEFAULTS, options)
+    this.$window = $(window)
+      .on('scroll.bs.affix.data-api', $.proxy(this.checkPosition, this))
+      .on('click.bs.affix.data-api',  $.proxy(this.checkPositionWithEventLoop, this))
+
+    this.$element = $(element)
+    this.affixed  =
+    this.unpin    = null
+
+    this.checkPosition()
+  }
+
+  Affix.RESET = 'affix affix-top affix-bottom'
+
+  Affix.DEFAULTS = {
+    offset: 0
+  }
+
+  Affix.prototype.checkPositionWithEventLoop = function () {
+    setTimeout($.proxy(this.checkPosition, this), 1)
+  }
+
+  Affix.prototype.checkPosition = function () {
+    if (!this.$element.is(':visible')) return
+
+    var scrollHeight = $(document).height()
+    var scrollTop    = this.$window.scrollTop()
+    var position     = this.$element.offset()
+    var offset       = this.options.offset
+    var offsetTop    = offset.top
+    var offsetBottom = offset.bottom
+
+    if (typeof offset != 'object')         offsetBottom = offsetTop = offset
+    if (typeof offsetTop == 'function')    offsetTop    = offset.top()
+    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
+
+    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
+                offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
+                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
+
+    if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')
+
+    this.affixed = affix
+    this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
+
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
+  }
+
+
+  // AFFIX PLUGIN DEFINITION
+  // =======================
+
+  var old = $.fn.affix
+
+  $.fn.affix = function (option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.affix')
+      var options = typeof option == 'object' && option
+
+      if (!data) $this.data('bs.affix', (data = new Affix(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.affix.Constructor = Affix
+
+
+  // AFFIX NO CONFLICT
+  // =================
+
+  $.fn.affix.noConflict = function () {
+    $.fn.affix = old
+    return this
+  }
+
+
+  // AFFIX DATA-API
+  // ==============
+
+  $(window).on('load', function () {
+    $('[data-spy="affix"]').each(function () {
+      var $spy = $(this)
+      var data = $spy.data()
+
+      data.offset = data.offset || {}
+
+      if (data.offsetBottom) data.offset.bottom = data.offsetBottom
+      if (data.offsetTop)    data.offset.top    = data.offsetTop
+
+      $spy.affix(data)
+    })
+  })
+
+}(jQuery);

diff --git a/src/web/js/bootstrap.min.js b/src/web/js/bootstrap.min.js
new file mode 100644
index 0000000..0e668e8
--- /dev/null
+++ b/src/web/js/bootstrap.min.js
@@ -0,0 +1,9 @@
+/*!
+ * Bootstrap v3.0.2 by @fat and @mdo
+ * Copyright 2013 Twitter, Inc.
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by @mdo and @fat.
+ */
+
+if("undefined"==typeof jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]}}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d)};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.is("input")?"val":"html",e=c.data();a+="Text",e.resetText||c.data("resetText",c[d]()),c[d](e[a]||this.options[a]),setTimeout(function(){"loadingText"==a?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-toggle="buttons"]');if(a.length){var b=this.$element.find("input").prop("checked",!this.$element.hasClass("active")).trigger("change");"radio"===b.prop("type")&&a.find(".active").removeClass("active")}this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}this.sliding=!0,f&&this.pause();var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});if(!e.hasClass("active")){if(this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(j),j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid")},0)}).emulateTransitionEnd(600)}else{if(this.$element.trigger(j),j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return f&&this.cycle(),this}};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .panel > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?(this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350),void 0):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find('[data-toggle=collapse][data-parent="'+i+'"]').not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(jQuery),+function(a){"use strict";function b(){a(d).remove(),a(e).each(function(b){var d=c(a(this));d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown")),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown"))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){if("ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b),f.trigger(d=a.Event("show.bs.dropdown")),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown"),e.focus()}return!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=a("[role=menu] li:not(.divider):visible a",f);if(h.length){var i=h.index(h.filter(":focus"));38==b.keyCode&&i>0&&i--,40==b.keyCode&&i<h.length-1&&i++,~i||(i=0),h.eq(i).focus()}}}};var g=a.fn.dropdown;a.fn.dropdown=function(b){return this.each(function(){var c=a(this),d=c.data("dropdown");d||c.data("dropdown",d=new f(this)),"string"==typeof b&&d[b].call(c)})},a.fn.dropdown.Constructor=f,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=g,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",e,f.prototype.toggle).on("keydown.bs.dropdown.data-api",e+", [role=menu]",f.prototype.keydown)}(jQuery),+function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.load(this.options.remote)};b.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},b.prototype.toggle=function(a){return this[this.isShown?"hide":"show"](a)},b.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(document.body),c.$element.show(),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one(a.support.transition.end,function(){c.$element.focus().trigger(e)}).emulateTransitionEnd(300):c.$element.focus().trigger(e)}))},b.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one(a.support.transition.end,a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},b.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.focus()},this))},b.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},b.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.removeBackdrop(),a.$element.trigger("hidden.bs.modal")})},b.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},b.prototype.backdrop=function(b){var c=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var d=a.support.transition&&c;if(this.$backdrop=a('<div class="modal-backdrop '+c+'" />').appendTo(document.body),this.$element.on("click.dismiss.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),d&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;d?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()):b&&b()};var c=a.fn.modal;a.fn.modal=function(c,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},b.DEFAULTS,e.data(),"object"==typeof c&&c);f||e.data("bs.modal",f=new b(this,g)),"string"==typeof c?f[c](d):g.show&&f.show(d)})},a.fn.modal.Constructor=b,a.fn.modal.noConflict=function(){return a.fn.modal=c,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f,this).one("hide",function(){c.is(":visible")&&c.focus()})}),a(document).on("show.bs.modal",".modal",function(){a(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){a(document.body).removeClass("modal-open")})}(jQuery),+function(a){"use strict";var b=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};b.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},b.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focus",i="hover"==g?"mouseleave":"blur";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},b.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},b.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show),void 0):c.show()},b.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide),void 0):c.hide()},b.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){if(this.$element.trigger(b),b.isDefaultPrevented())return;var c=this.tip();this.setContent(),this.options.animation&&c.addClass("fade");var d="function"==typeof this.options.placement?this.options.placement.call(this,c[0],this.$element[0]):this.options.placement,e=/\s?auto?\s?/i,f=e.test(d);f&&(d=d.replace(e,"")||"top"),c.detach().css({top:0,left:0,display:"block"}).addClass(d),this.options.container?c.appendTo(this.options.container):c.insertAfter(this.$element);var g=this.getPosition(),h=c[0].offsetWidth,i=c[0].offsetHeight;if(f){var j=this.$element.parent(),k=d,l=document.documentElement.scrollTop||document.body.scrollTop,m="body"==this.options.container?window.innerWidth:j.outerWidth(),n="body"==this.options.container?window.innerHeight:j.outerHeight(),o="body"==this.options.container?0:j.offset().left;d="bottom"==d&&g.top+g.height+i-l>n?"top":"top"==d&&g.top-l-i<0?"bottom":"right"==d&&g.right+h>m?"left":"left"==d&&g.left-h<o?"right":d,c.removeClass(k).addClass(d)}var p=this.getCalculatedOffset(d,g,h,i);this.applyPlacement(p,d),this.$element.trigger("shown.bs."+this.type)}},b.prototype.applyPlacement=function(a,b){var c,d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),a.top=a.top+g,a.left=a.left+h,d.offset(a).addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;if("top"==b&&j!=f&&(c=!0,a.top=a.top+f-j),/bottom|top/.test(b)){var k=0;a.left<0&&(k=-2*a.left,a.left=0,d.offset(a),i=d[0].offsetWidth,j=d[0].offsetHeight),this.replaceArrow(k-e+i,i,"left")}else this.replaceArrow(j-f,j,"top");c&&d.offset(a)},b.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},b.prototype.hide=function(){function b(){"in"!=c.hoverState&&d.detach()}var c=this,d=this.tip(),e=a.Event("hide.bs."+this.type);return this.$element.trigger(e),e.isDefaultPrevented()?void 0:(d.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d.one(a.support.transition.end,b).emulateTransitionEnd(150):b(),this.$element.trigger("hidden.bs."+this.type),this)},b.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},b.prototype.hasContent=function(){return this.getTitle()},b.prototype.getPosition=function(){var b=this.$element[0];return a.extend({},"function"==typeof b.getBoundingClientRect?b.getBoundingClientRect():{width:b.offsetWidth,height:b.offsetHeight},this.$element.offset())},b.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},b.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},b.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},b.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},b.prototype.enable=function(){this.enabled=!0},b.prototype.disable=function(){this.enabled=!1},b.prototype.toggleEnabled=function(){this.enabled=!this.enabled},b.prototype.toggle=function(b){var c=b?a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type):this;c.tip().hasClass("in")?c.leave(c):c.enter(c)},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var c=a.fn.tooltip;a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof c&&c;e||d.data("bs.tooltip",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=c,this}}(jQuery),+function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");b.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(c).is("body")?a(window):a(c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#\w/.test(e)&&a(e);return f&&f.length&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parents(".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top()),"function"==typeof h&&(h=f.bottom());var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;this.affixed!==i&&(this.unpin&&this.$element.css("top",""),this.affixed=i,this.unpin="bottom"==i?e.top-d:null,this.$element.removeClass(b.RESET).addClass("affix"+(i?"-"+i:"")),"bottom"==i&&this.$element.offset({top:document.body.offsetHeight-h-this.$element.height()}))}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery);
\ No newline at end of file

diff --git a/src/web/js/bootstrap-datetimepicker.min.js b/src/web/js/bootstrap-datetimepicker.min.js
new file mode 100644
index 0000000..ba92ad9
--- /dev/null
+++ b/src/web/js/bootstrap-datetimepicker.min.js
@@ -0,0 +1,28 @@
+/**
+ * version 2.1.11
+ * @license
+ * =========================================================
+ * bootstrap-datetimepicker.js
+ * http://www.eyecon.ro/bootstrap-datepicker
+ * =========================================================
+ * Copyright 2012 Stefan Petre
+ *
+ * Contributions:
+ * - updated for Bootstrap v3 by Jonathan Peterson (@Eonasdan) and (almost)
+ *  completely rewritten to use Momentjs
+ * - based on tarruda's bootstrap-datepicker
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =========================================================
+ */
+(function(factory){if(typeof define==="function"&&define.amd){define(["jquery","moment"],factory)}else{if(!jQuery){throw"bootstrap-datetimepicker requires jQuery to be loaded first"}else if(!moment){throw"bootstrap-datetimepicker requires moment.js to be loaded first"}else{factory(jQuery,moment)}}})(function($,moment){if(typeof moment==="undefined"){alert("momentjs is requried");throw new Error("momentjs is requried")}var dpgId=0,pMoment=moment,DateTimePicker=function(element,options){var defaults={pickDate:true,pickTime:true,use24hours:false,startDate:new pMoment({y:1970}),endDate:(new pMoment).add(50,"y"),collapse:true,language:"en",defaultDate:"",disabledDates:[],enabledDates:false,icons:{},useStrict:false},icons={time:"glyphicon glyphicon-time",date:"glyphicon glyphicon-calendar",up:"glyphicon glyphicon-chevron-up",down:"glyphicon glyphicon-chevron-down"},picker=this,initFormat=function(){picker.format=picker.options.format;var longDateFormat=pMoment()._lang._longDateFormat;if(!picker.format){if(picker.isInput){picker.format=picker.element.data("format")}else{picker.format=picker.element.find("input").data("format")}if(!picker.format){picker.format=picker.options.pickDate?longDateFormat.L:"";if(picker.options.pickDate&&picker.options.pickTime){picker.format+=" "}picker.format+=picker.options.pickTime?longDateFormat.LT:""}}var ampmIndex=picker.format.toLowerCase().indexOf("a");if(picker.options.use24hours&&ampmIndex>=1){picker.format=picker.format.substring(0,ampmIndex)+picker.format.substring(ampmIndex+1,picker.format.length);picker.format=picker.format.trim();picker.format=picker.format.replace("h","H")}picker.use24hours=picker.format.toLowerCase().indexOf("a")<1},initComponent=function(){if(picker.element.hasClass("input-group")){if(picker.element.find(".datepickerbutton").size()==0){picker.component=picker.element.find("[class^='input-group-']")}else{picker.component=picker.element.find(".datepickerbutton")}}var icon=null;if(picker.component){icon=picker.component.find("span")}if(picker.options.pickTime){if(icon){icon.addClass(picker.options.icons.time)}}if(picker.options.pickDate){if(icon){icon.removeClass(picker.options.icons.time);icon.addClass(picker.options.icons.date)}}},initViewMode=function(){picker.widget=$(getTemplate(picker.options.pickDate,picker.options.pickTime,picker.options.collapse)).appendTo("body");picker.minViewMode=picker.options.minViewMode||picker.element.data("date-minviewmode")||0;if(typeof picker.minViewMode==="string"){switch(picker.minViewMode){case"months":picker.minViewMode=1;break;case"years":picker.minViewMode=2;break;default:picker.minViewMode=0;break}}picker.viewMode=picker.options.viewMode||picker.element.data("date-viewmode")||0;if(typeof picker.viewMode==="string"){switch(picker.viewMode){case"months":picker.viewMode=1;break;case"years":picker.viewMode=2;break;default:picker.viewMode=0;break}}},initDateBounds=function(){for(var i=0;i<picker.options.disabledDates.length;i++){var dDate=picker.options.disabledDates[i];dDate=pMoment(dDate);if(!dDate.isValid()){dDate=pMoment(picker.options.startDate).subtract(1,"day")}picker.options.disabledDates[i]=dDate.format("L")}for(var i=0;i<picker.options.enabledDates.length;i++){var dDate=picker.options.enabledDates[i];dDate=pMoment(dDate);if(!dDate.isValid()){dDate=pMoment(picker.options.startDate).subtract(1,"day")}picker.options.enabledDates[i]=dDate.format("L")}},init=function(){picker.options=$.extend({},defaults,options);picker.options.icons=$.extend({},icons,picker.options.icons);if(!(picker.options.pickTime||picker.options.pickDate)){throw new Error("Must choose at least one picker")}picker.id=dpgId++;pMoment.lang(picker.options.language);picker.date=pMoment();picker.element=$(element);picker.unset=false;picker.isInput=picker.element.is("input");picker.component=false;initFormat();initComponent();initViewMode();initDateBounds();picker.startViewMode=picker.viewMode;picker.setStartDate(picker.options.startDate||picker.element.data("date-startdate"));picker.setEndDate(picker.options.endDate||picker.element.data("date-enddate"));fillDow();fillMonths();fillHours();fillMinutes();update();showMode();attachDatePickerEvents();if(picker.options.defaultDate!==""){picker.setValue(picker.options.defaultDate)}},place=function(){var position="absolute";var offset=picker.component?picker.component.offset():picker.element.offset();var $window=$(window);picker.width=picker.component?picker.component.outerWidth():picker.element.outerWidth();offset.top=offset.top+picker.element.outerHeight();if(picker.options.width!==undefined){picker.widget.width(picker.options.width)}if(picker.options.orientation==="left"){picker.widget.addClass("left-oriented");offset.left=offset.left-picker.widget.width()+20}if(isInFixed()){position="fixed";offset.top-=$window.scrollTop();offset.left-=$window.scrollLeft()}if($window.width()<offset.left+picker.widget.outerWidth()){offset.right=$window.width()-offset.left-picker.width;offset.left="auto";picker.widget.addClass("pull-right")}else{offset.right="auto";picker.widget.removeClass("pull-right")}picker.widget.css({position:position,top:offset.top,left:offset.left,right:offset.right})},notifyChange=function(oldDate){picker.element.trigger({type:"change.dp",date:picker.getDate(),oldDate:oldDate})},notifyError=function(date){picker.element.trigger({type:"error.dp",date:date})},update=function(newDate){pMoment.lang(picker.options.language);var dateStr=newDate;if(!dateStr){if(picker.isInput){dateStr=picker.element.val()}else{dateStr=picker.element.find("input").val()}if(dateStr){picker.date=pMoment(dateStr,picker.format,picker.options.useStrict)}if(!picker.date){picker.date=pMoment()}}picker.viewDate=pMoment(picker.date).startOf("month");fillDate();fillTime()},fillDow=function(){pMoment.lang(picker.options.language);var html=$("<tr>"),weekdaysMin=pMoment.weekdaysMin(),i;if(pMoment()._lang._week.dow==0){for(i=0;i<7;i++){html.append('<th class="dow">'+weekdaysMin[i]+"</th>")}}else{for(i=1;i<8;i++){if(i==7){html.append('<th class="dow">'+weekdaysMin[0]+"</th>")}else{html.append('<th class="dow">'+weekdaysMin[i]+"</th>")}}}picker.widget.find(".datepicker-days thead").append(html)},fillMonths=function(){pMoment.lang(picker.options.language);var html="",i=0,monthsShort=pMoment.monthsShort();while(i<12){html+='<span class="month">'+monthsShort[i++]+"</span>"}picker.widget.find(".datepicker-months td").append(html)},fillDate=function(){pMoment.lang(picker.options.language);var year=picker.viewDate.year();var month=picker.viewDate.month();var startYear=picker.options.startDate.year();var startMonth=picker.options.startDate.month();var endYear=picker.options.endDate.year();var endMonth=picker.options.endDate.month();var html=[];var months=pMoment.months();picker.widget.find(".datepicker-days").find(".disabled").removeClass("disabled");picker.widget.find(".datepicker-months").find(".disabled").removeClass("disabled");picker.widget.find(".datepicker-years").find(".disabled").removeClass("disabled");picker.widget.find(".datepicker-days th:eq(1)").text(months[month]+" "+year);var prevMonth=pMoment(picker.viewDate).subtract("months",1);var days=prevMonth.daysInMonth();prevMonth.date(days).startOf("week");if(year==startYear&&month<=startMonth||year<startYear){picker.widget.find(".datepicker-days th:eq(0)").addClass("disabled")}if(year==endYear&&month>=endMonth||year>endYear){picker.widget.find(".datepicker-days th:eq(2)").addClass("disabled")}var nextMonth=pMoment(prevMonth).add(42,"d");var row;while(prevMonth.isBefore(nextMonth)){if(prevMonth.weekday()===pMoment().startOf("week").weekday()){row=$("<tr>");html.push(row)}var clsName="";if(prevMonth.year()<year||prevMonth.year()==year&&prevMonth.month()<month){clsName+=" old"}else if(prevMonth.year()>year||prevMonth.year()==year&&prevMonth.month()>month){clsName+=" new"}if(prevMonth.isSame(pMoment({y:picker.date.year(),M:picker.date.month(),d:picker.date.date()}))){clsName+=" active"}if(pMoment(prevMonth).add(1,"d")<=picker.options.startDate||prevMonth>picker.options.endDate||isInDisableDates(prevMonth)||!isInEnableDates(prevMonth)){clsName+=" disabled"}row.append('<td class="day'+clsName+'">'+prevMonth.date()+"</td>");prevMonth.add(1,"d")}picker.widget.find(".datepicker-days tbody").empty().append(html);var currentYear=pMoment().year(),months=picker.widget.find(".datepicker-months").find("th:eq(1)").text(year).end().find("span").removeClass("active");if(currentYear===year){months.eq(pMoment().month()).addClass("active")}if(currentYear-1<startYear){picker.widget.find(".datepicker-months th:eq(0)").addClass("disabled")}if(currentYear+1>endYear){picker.widget.find(".datepicker-months th:eq(2)").addClass("disabled")}for(var i=0;i<12;i++){if(year==startYear&&startMonth>i||year<startYear){$(months[i]).addClass("disabled")}else if(year==endYear&&endMonth<i||year>endYear){$(months[i]).addClass("disabled")}}html="";year=parseInt(year/10,10)*10;var yearCont=picker.widget.find(".datepicker-years").find("th:eq(1)").text(year+"-"+(year+9)).end().find("td");picker.widget.find(".datepicker-years").find("th").removeClass("disabled");if(startYear>year){picker.widget.find(".datepicker-years").find("th:eq(0)").addClass("disabled")}if(endYear<year+9){picker.widget.find(".datepicker-years").find("th:eq(2)").addClass("disabled")}year-=1;for(var i=-1;i<11;i++){html+='<span class="year'+(i===-1||i===10?" old":"")+(currentYear===year?" active":"")+(year<startYear||year>endYear?" disabled":"")+'">'+year+"</span>";year+=1}yearCont.html(html)},fillHours=function(){pMoment.lang(picker.options.language);var table=picker.widget.find(".timepicker .timepicker-hours table");var html="";table.parent().hide();if(picker.use24hours){var current=0;for(var i=0;i<6;i+=1){html+="<tr>";for(var j=0;j<4;j+=1){html+='<td class="hour">'+padLeft(current.toString())+"</td>";current++}html+="</tr>"}}else{var current=1;for(var i=0;i<3;i+=1){html+="<tr>";for(var j=0;j<4;j+=1){html+='<td class="hour">'+padLeft(current.toString())+"</td>";current++}html+="</tr>"}}table.html(html)},fillMinutes=function(){var table=picker.widget.find(".timepicker .timepicker-minutes table");var html="";var current=0;table.parent().hide();for(var i=0;i<5;i++){html+="<tr>";for(var j=0;j<4;j+=1){html+='<td class="minute">'+padLeft(current.toString())+"</td>";current+=3}html+="</tr>"}table.html(html)},fillTime=function(){if(!picker.date){return}var timeComponents=picker.widget.find(".timepicker span[data-time-component]"),hour=picker.date.hours(),period="AM";if(!picker.use24hours){if(hour>=12){period="PM"}if(hour===0){hour=12}else if(hour!=12){hour=hour%12}picker.widget.find(".timepicker [data-action=togglePeriod]").text(period)}timeComponents.filter("[data-time-component=hours]").text(padLeft(hour));timeComponents.filter("[data-time-component=minutes]").text(padLeft(picker.date.minutes()))},click=function(e){e.stopPropagation();e.preventDefault();picker.unset=false;var target=$(e.target).closest("span, td, th");var oldDate=picker.date;if(target.length!==1){return}if(target.is(".disabled")){return}switch(target[0].nodeName.toLowerCase()){case"th":switch(target[0].className){case"switch":showMode(1);break;case"prev":case"next":var step=dpGlobal.modes[picker.viewMode].navStep;if(target[0].className==="prev"){step=step*-1}picker.viewDate.add(step,dpGlobal.modes[picker.viewMode].navFnc);fillDate();break}break;case"span":if(target.is(".month")){var month=target.parent().find("span").index(target);picker.viewDate.month(month)}else{var year=parseInt(target.text(),10)||0;picker.viewDate.year(year)}if(picker.viewMode!==0){picker.date=pMoment({y:picker.viewDate.year(),M:picker.viewDate.month(),d:picker.viewDate.date(),h:picker.date.hours(),m:picker.date.minutes()});notifyChange(oldDate)}showMode(-1);fillDate();break;case"td":if(!target.is(".day")){break}var day=parseInt(target.text(),10)||1;var month=picker.viewDate.month();var year=picker.viewDate.year();if(target.is(".old")){if(month===0){month=11;year-=1}else{month-=1}}else if(target.is(".new")){if(month==11){month=0;year+=1}else{month+=1}}picker.date=pMoment({y:year,M:month,d:day,h:picker.date.hours(),m:picker.date.minutes()});picker.viewDate=pMoment({y:year,M:month,d:Math.min(28,day)});fillDate();set();notifyChange(oldDate);break}},actions={incrementHours:function(){checkDate("add","hours")},incrementMinutes:function(){checkDate("add","minutes")},decrementHours:function(){checkDate("subtract","hours")},decrementMinutes:function(){checkDate("subtract","minutes")},togglePeriod:function(){var hour=picker.date.hours();if(hour>=12)hour-=12;else hour+=12;picker.date.hours(hour)},showPicker:function(){picker.widget.find(".timepicker > div:not(.timepicker-picker)").hide();picker.widget.find(".timepicker .timepicker-picker").show()},showHours:function(){picker.widget.find(".timepicker .timepicker-picker").hide();picker.widget.find(".timepicker .timepicker-hours").show()},showMinutes:function(){picker.widget.find(".timepicker .timepicker-picker").hide();picker.widget.find(".timepicker .timepicker-minutes").show()},selectHour:function(e){picker.date.hours(parseInt($(e.target).text(),10));actions.showPicker.call(picker)},selectMinute:function(e){picker.date.minutes(parseInt($(e.target).text(),10));actions.showPicker.call(picker)}},doAction=function(e){var action=$(e.currentTarget).data("action");var rv=actions[action].apply(picker,arguments);var oldDate=picker.date;stopEvent(e);if(!picker.date){picker.date=pMoment({y:1970})}set();fillTime();notifyChange(oldDate);return rv},stopEvent=function(e){e.stopPropagation();e.preventDefault()},change=function(e){pMoment.lang(picker.options.language);var input=$(e.target);var oldDate=picker.date;var d=pMoment(input.val(),picker.format,picker.options.useStrict);if(d.isValid()){update();picker.setValue(d);notifyChange(oldDate);set()}else{picker.viewDate=oldDate;notifyChange(oldDate);notifyError(d);picker.unset=true;input.val("")}},showMode=function(dir){if(dir){picker.viewMode=Math.max(picker.minViewMode,Math.min(2,picker.viewMode+dir))}picker.widget.find(".datepicker > div").hide().filter(".datepicker-"+dpGlobal.modes[picker.viewMode].clsName).show()},attachDatePickerEvents=function(){picker.widget.on("click",".datepicker *",$.proxy(click,this));picker.widget.on("click","[data-action]",$.proxy(doAction,this));picker.widget.on("mousedown",$.proxy(stopEvent,this));if(picker.options.pickDate&&picker.options.pickTime){picker.widget.on("click.togglePicker",".accordion-toggle",function(e){e.stopPropagation();var $this=$(this);var $parent=$this.closest("ul");var expanded=$parent.find(".in");var closed=$parent.find(".collapse:not(.in)");if(expanded&&expanded.length){var collapseData=expanded.data("collapse");if(collapseData&&collapseData.transitioning){return}expanded.collapse("hide");closed.collapse("show");$this.find("span").toggleClass(picker.options.icons.time+" "+picker.options.icons.date);picker.element.find(".input-group-addon span").toggleClass(picker.options.icons.time+" "+picker.options.icons.date)}})}if(picker.isInput){picker.element.on({focus:$.proxy(picker.show,this),change:$.proxy(change,this),blur:$.proxy(picker.hide,this)})}else{picker.element.on({change:$.proxy(change,this)},"input");if(picker.component){picker.component.on("click",$.proxy(picker.show,this))}else{picker.element.on("click",$.proxy(picker.show,this))}}},attachDatePickerGlobalEvents=function(){$(window).on("resize.datetimepicker"+picker.id,$.proxy(place,this));if(!picker.isInput){$(document).on("mousedown.datetimepicker"+picker.id,$.proxy(picker.hide,this))}},detachDatePickerEvents=function(){picker.widget.off("click",".datepicker *",picker.click);picker.widget.off("click","[data-action]");picker.widget.off("mousedown",picker.stopEvent);if(picker.options.pickDate&&picker.options.pickTime){picker.widget.off("click.togglePicker")}if(picker.isInput){picker.element.off({focus:picker.show,change:picker.change})}else{picker.element.off({change:picker.change},"input");if(picker.component){picker.component.off("click",picker.show)}else{picker.element.off("click",picker.show)}}},detachDatePickerGlobalEvents=function(){$(window).off("resize.datetimepicker"+picker.id);if(!picker.isInput){$(document).off("mousedown.datetimepicker"+picker.id)}},isInFixed=function(){if(picker.element){var parents=picker.element.parents(),inFixed=false,i;for(i=0;i<parents.length;i++){if($(parents[i]).css("position")=="fixed"){inFixed=true;break}}return inFixed}else{return false}},set=function(){pMoment.lang(picker.options.language);var formatted="",input;if(!picker.unset){formatted=pMoment(picker.date).format(picker.format)}if(!picker.isInput){if(picker.component){input=picker.element.find("input");input.val(formatted)}picker.element.data("date",formatted)}else{picker.element.val(formatted)}if(!picker.options.pickTime)picker.hide()},checkDate=function(direction,unit){pMoment.lang(picker.options.language);var newDate;if(direction=="add"){newDate=pMoment(picker.date);if(newDate.hours()==23){newDate.add(1,unit)}newDate.add(1,unit)}else{newDate=pMoment(picker.date).subtract(1,unit)}if(newDate.isAfter(picker.options.endDate)||newDate.subtract(1,unit).isBefore(picker.options.startDate)||isInDisableDates(newDate)||!isInEnableDates(newDate)){notifyError(newDate.format(picker.format));return}if(direction=="add"){picker.date.add(1,unit)}else{picker.date.subtract(1,unit)}},isInDisableDates=function(date){pMoment.lang(picker.options.language);var disabled=picker.options.disabledDates,i;for(i in disabled){if(disabled[i]==pMoment(date).format("L")){return true}}return false},isInEnableDates=function(date){pMoment.lang(picker.options.language);var enabled=picker.options.enabledDates,i;if(enabled.length){for(i in enabled){if(enabled[i]==pMoment(date).format("L")){return true}}return false}return enabled===false?true:false},padLeft=function(string){string=string.toString();if(string.length>=2){return string}else{return"0"+string}},getTemplate=function(pickDate,pickTime,collapse){if(pickDate&&pickTime){return'<div class="bootstrap-datetimepicker-widget dropdown-menu" style="z-index:9999 !important;">'+'<ul class="list-unstyled">'+"<li"+(collapse?' class="collapse in"':"")+">"+'<div class="datepicker">'+dpGlobal.template+"</div>"+"</li>"+'<li class="picker-switch accordion-toggle"><a class="btn" style="width:100%"><span class="'+picker.options.icons.time+'"></span></a></li>'+"<li"+(collapse?' class="collapse"':"")+">"+'<div class="timepicker">'+tpGlobal.getTemplate()+"</div>"+"</li>"+"</ul>"+"</div>"}else if(pickTime){return'<div class="bootstrap-datetimepicker-widget dropdown-menu">'+'<div class="timepicker">'+tpGlobal.getTemplate()+"</div>"+"</div>"}else{return'<div class="bootstrap-datetimepicker-widget dropdown-menu">'+'<div class="datepicker">'+dpGlobal.template+"</div>"+"</div>"}},dpGlobal={modes:[{clsName:"days",navFnc:"month",navStep:1},{clsName:"months",navFnc:"year",navStep:1},{clsName:"years",navFnc:"year",navStep:10}],headTemplate:"<thead>"+"<tr>"+'<th class="prev">&lsaquo;</th><th colspan="5" class="switch"></th><th class="next">&rsaquo;</th>'+"</tr>"+"</thead>",contTemplate:'<tbody><tr><td colspan="7"></td></tr></tbody>'},tpGlobal={hourTemplate:'<span data-action="showHours" data-time-component="hours" class="timepicker-hour"></span>',minuteTemplate:'<span data-action="showMinutes" data-time-component="minutes" class="timepicker-minute"></span>'};dpGlobal.template='<div class="datepicker-days">'+'<table class="table-condensed">'+dpGlobal.headTemplate+"<tbody></tbody></table>"+"</div>"+'<div class="datepicker-months">'+'<table class="table-condensed">'+dpGlobal.headTemplate+dpGlobal.contTemplate+"</table>"+"</div>"+'<div class="datepicker-years">'+'<table class="table-condensed">'+dpGlobal.headTemplate+dpGlobal.contTemplate+"</table>"+"</div>";tpGlobal.getTemplate=function(){return'<div class="timepicker-picker">'+'<table class="table-condensed">'+"<tr>"+'<td><a href="#" class="btn" data-action="incrementHours"><span class="'+picker.options.icons.up+'"></span></a></td>'+'<td class="separator"></td>'+'<td><a href="#" class="btn" data-action="incrementMinutes"><span class="'+picker.options.icons.up+'"></span></a></td>'+(!picker.use24hours?'<td class="separator"></td>':"")+"</tr>"+"<tr>"+"<td>"+tpGlobal.hourTemplate+"</td> "+'<td class="separator">:</td>'+"<td>"+tpGlobal.minuteTemplate+"</td> "+(!picker.use24hours?'<td class="separator"></td>'+'<td><button type="button" class="btn btn-primary" data-action="togglePeriod"></button></td>':"")+"</tr>"+"<tr>"+'<td><a href="#" class="btn" data-action="decrementHours"><span class="'+picker.options.icons.down+'"></span></a></td>'+'<td class="separator"></td>'+'<td><a href="#" class="btn" data-action="decrementMinutes"><span class="'+picker.options.icons.down+'"></span></a></td>'+(!picker.use24hours?'<td class="separator"></td>':"")+"</tr>"+"</table>"+"</div>"+'<div class="timepicker-hours" data-action="selectHour">'+'<table class="table-condensed"></table>'+"</div>"+'<div class="timepicker-minutes" data-action="selectMinute">'+'<table class="table-condensed"></table>'+"</div>"};picker.destroy=function(){detachDatePickerEvents();detachDatePickerGlobalEvents();picker.widget.remove();picker.element.removeData("DateTimePicker");if(picker.component)picker.component.removeData("DateTimePicker")};picker.show=function(e){picker.widget.show();picker.height=picker.component?picker.component.outerHeight():picker.element.outerHeight();place();picker.element.trigger({type:"show.dp",date:picker.date});attachDatePickerGlobalEvents();if(e){stopEvent(e)}},picker.disable=function(){picker.element.find("input").prop("disabled",true);detachDatePickerEvents()},picker.enable=function(){picker.element.find("input").prop("disabled",false);attachDatePickerEvents()},picker.hide=function(){var collapse=picker.widget.find(".collapse"),i,collapseData;for(i=0;i<collapse.length;i++){collapseData=collapse.eq(i).data("collapse");if(collapseData&&collapseData.transitioning)return}picker.widget.hide();picker.viewMode=picker.startViewMode;showMode();picker.element.trigger({type:"hide.dp",date:picker.date});detachDatePickerGlobalEvents()},picker.setValue=function(newDate){pMoment.lang(picker.options.language);if(!newDate){picker.unset=true}else{picker.unset=false}if(!pMoment.isMoment(newDate)){newDate=pMoment(newDate)}if(newDate.isValid()){picker.date=newDate;set();picker.viewDate=pMoment({y:picker.date.year(),M:picker.date.month()});fillDate();fillTime()}else{notifyError(newDate)}},picker.getDate=function(){if(picker.unset){return null}return picker.date},picker.setDate=function(date){if(!date){picker.setValue(null)}else{picker.setValue(date)}},picker.setEnabledDates=function(dates){if(!dates){picker.options.enabledDates=false}else{picker.options.enabledDates=dates}if(picker.viewDate){update()}},picker.setEndDate=function(date){picker.options.endDate=pMoment(date);if(!picker.options.endDate.isValid()){picker.options.endDate=pMoment().add(50,"y")}if(picker.viewDate){update()}},picker.setStartDate=function(date){picker.options.startDate=pMoment(date);if(!picker.options.startDate.isValid()){picker.options.startDate=pMoment({y:1970})}if(picker.viewDate){update()}};init()};$.fn.datetimepicker=function(options){return this.each(function(){var $this=$(this),data=$this.data("DateTimePicker");if(!data){$this.data("DateTimePicker",new DateTimePicker(this,options))}})}});
\ No newline at end of file

diff --git a/src/web/js/bootstrap-fileinput.js b/src/web/js/bootstrap-fileinput.js
new file mode 100644
index 0000000..88c26c2
--- /dev/null
+++ b/src/web/js/bootstrap-fileinput.js
@@ -0,0 +1,179 @@
+/* ===========================================================
+ * Bootstrap: fileinput.js v3.0.0-p7
+ * http://jasny.github.com/bootstrap/javascript.html#fileinput
+ * ===========================================================
+ * Copyright 2012 Jasny BV, Netherlands.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License")
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
++function ($) { "use strict";
+
+  var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
+
+  // FILEUPLOAD PUBLIC CLASS DEFINITION
+  // =================================
+
+  var Fileupload = function (element, options) {
+    this.$element = $(element)
+      
+    this.$input = this.$element.find(':file')
+    if (this.$input.length === 0) return
+
+    this.name = this.$input.attr('name') || options.name
+
+    this.$hidden = this.$element.find('input[type=hidden][name="'+this.name+'"]')
+    if (this.$hidden.length === 0) {
+      this.$hidden = $('<input type="hidden" />')
+      this.$element.prepend(this.$hidden)
+    }
+
+    this.$preview = this.$element.find('.fileinput-preview')
+    var height = this.$preview.css('height')
+    if (this.$preview.css('display') != 'inline' && height != '0px' && height != 'none') this.$preview.css('line-height', height)
+
+    this.original = {
+      exists: this.$element.hasClass('fileinput-exists'),
+      preview: this.$preview.html(),
+      hiddenVal: this.$hidden.val()
+    }
+    
+    this.listen()
+  }
+  
+  Fileupload.prototype.listen = function() {
+    this.$input.on('change.bs.fileinput', $.proxy(this.change, this))
+    $(this.$input[0].form).on('reset.bs.fileinput', $.proxy(this.reset, this))
+    
+    this.$element.find('[data-trigger="fileinput"]').on('click.bs.fileinput', $.proxy(this.trigger, this))
+    this.$element.find('[data-dismiss="fileinput"]').on('click.bs.fileinput', $.proxy(this.clear, this))
+  },
+
+  Fileupload.prototype.change = function(e) {
+    if (e.target.files === undefined) e.target.files = e.target && e.target.value ? [ {name: e.target.value.replace(/^.+\\/, '')} ] : []
+    if (e.target.files.length === 0) return
+
+    this.$hidden.val('')
+    this.$hidden.attr('name', '')
+    this.$input.attr('name', this.name)
+
+    var file = e.target.files[0]
+
+    if (this.$preview.length > 0 && (typeof file.type !== "undefined" ? file.type.match('image.*') : file.name.match(/\.(gif|png|jpe?g)$/i)) && typeof FileReader !== "undefined") {
+      var reader = new FileReader()
+      var preview = this.$preview
+      var element = this.$element
+
+      reader.onload = function(re) {
+        var $img = $('<img>').attr('src', re.target.result)
+        e.target.files[0].result = re.target.result
+        
+        element.find('.fileinput-filename').text(file.name)
+        
+        // if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
+        if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))
+        
+        preview.html($img)
+        element.addClass('fileinput-exists').removeClass('fileinput-new')
+
+        element.trigger('change.bs.fileinput', e.target.files)
+      }
+
+      reader.readAsDataURL(file)
+    } else {
+      this.$element.find('.fileinput-filename').text(file.name)
+      this.$preview.text(file.name)
+      
+      this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
+      
+      this.$element.trigger('change.bs.fileinput')
+    }
+  },
+
+  Fileupload.prototype.clear = function(e) {
+    if (e) e.preventDefault()
+    
+    this.$hidden.val('')
+    this.$hidden.attr('name', this.name)
+    this.$input.attr('name', '')
+
+    //ie8+ doesn't support changing the value of input with type=file so clone instead
+    if (isIE) { 
+      var inputClone = this.$input.clone(true);
+      this.$input.after(inputClone);
+      this.$input.remove();
+      this.$input = inputClone;
+    } else {
+      this.$input.val('')
+    }
+
+    this.$preview.html('')
+    this.$element.find('.fileinput-filename').text('')
+    this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
+    
+    if (e !== false) {
+      this.$input.trigger('change')
+      this.$element.trigger('clear.bs.fileinput')
+    }
+  },
+
+  Fileupload.prototype.reset = function() {
+    this.clear(false)
+
+    this.$hidden.val(this.original.hiddenVal)
+    this.$preview.html(this.original.preview)
+    this.$element.find('.fileinput-filename').text('')
+
+    if (this.original.exists) this.$element.addClass('fileinput-exists').removeClass('fileinput-new')
+     else this.$element.addClass('fileinput-new').removeClass('fileinput-exists')
+    
+    this.$element.trigger('reset.bs.fileinput')
+  },
+
+  Fileupload.prototype.trigger = function(e) {
+    this.$input.trigger('click')
+    e.preventDefault()
+  }
+
+  
+  // FILEUPLOAD PLUGIN DEFINITION
+  // ===========================
+
+  $.fn.fileinput = function (options) {
+    return this.each(function () {
+      var $this = $(this)
+      , data = $this.data('fileinput')
+      if (!data) $this.data('fileinput', (data = new Fileupload(this, options)))
+      if (typeof options == 'string') data[options]()
+    })
+  }
+
+  $.fn.fileinput.Constructor = Fileupload
+
+
+  // FILEUPLOAD DATA-API
+  // ==================
+
+  $(document).on('click.fileinput.data-api', '[data-provides="fileinput"]', function (e) {
+    var $this = $(this)
+    if ($this.data('fileinput')) return
+    $this.fileinput($this.data())
+      
+    var $target = $(e.target).closest('[data-dismiss="fileinput"],[data-trigger="fileinput"]');
+    if ($target.length > 0) {
+      e.preventDefault()
+      $target.trigger('click.bs.fileinput')
+    }
+  })
+
+}(window.jQuery);

diff --git a/src/web/js/dust-core-2.2.2.min.js b/src/web/js/dust-core-2.2.2.min.js
new file mode 100644
index 0000000..3606333
--- /dev/null
+++ b/src/web/js/dust-core-2.2.2.min.js
@@ -0,0 +1,9 @@
+//
+// Dust - Asynchronous Templating v2.2.2
+// http://akdubya.github.com/dustjs
+//
+// Copyright (c) 2010, Aleksander Williams
+// Released under the MIT License.
+//
+
+function getGlobal(){return function(){return this.dust}.call(null)}var dust={};(function(dust){function Context(e,t,n,r){this.stack=e,this.global=t,this.blocks=n,this.templateName=r}function Stack(e,t,n,r){this.tail=t,this.isObject=!dust.isArray(e)&&e&&typeof e=="object",this.head=e,this.index=n,this.of=r}function Stub(e){this.head=new Chunk(this),this.callback=e,this.out=""}function Stream(){this.head=new Chunk(this)}function Chunk(e,t,n){this.root=e,this.next=t,this.data=[],this.flushable=!1,this.taps=n}function Tap(e,t){this.head=e,this.tail=t}if(!dust)return;var ERROR="ERROR",WARN="WARN",INFO="INFO",DEBUG="DEBUG",levels=[DEBUG,INFO,WARN,ERROR],logger=function(){};dust.isDebug=!1,dust.debugLevel=INFO,typeof window!="undefined"&&window&&window.console&&window.console.log?logger=window.console.log:typeof console!="undefined"&&console&&console.log&&(logger=console.log),dust.log=function(e,t){var t=t||INFO;dust.isDebug&&levels.indexOf(t)>=levels.indexOf(dust.debugLevel)&&(dust.logQueue||(dust.logQueue=[]),dust.logQueue.push({message:e,type:t}),logger.call(console||window.console,"[DUST "+t+"]: "+e))},dust.onError=function(e,t){dust.log(e.message||e,ERROR);if(dust.isDebug)throw e;return t},dust.helpers={},dust.cache={},dust.register=function(e,t){if(!e)return;dust.cache[e]=t},dust.render=function(e,t,n){var r=(new Stub(n)).head;try{dust.load(e,r,Context.wrap(t,e)).end()}catch(i){dust.onError(i,r)}},dust.stream=function(e,t){var n=new Stream;return dust.nextTick(function(){try{dust.load(e,n.head,Context.wrap(t,e)).end()}catch(r){dust.onError(r,n.head)}}),n},dust.renderSource=function(e,t,n){return dust.compileFn(e)(t,n)},dust.compileFn=function(e,t){var n=dust.loadSource(dust.compile(e,t));return function(e,r){var i=r?new Stub(r):new Stream;return dust.nextTick(function(){typeof n=="function"?n(i.head,Context.wrap(e,t)).end():dust.onError(new Error("Template ["+t+"] cannot be resolved to a Dust function"))}),i}},dust.load=function(e,t,n){var r=dust.cache[e];return r?r(t,n):dust.onLoad?t.map(function(t){dust.onLoad(e,function(r,i){if(r)return t.setError(r);dust.cache[e]||dust.loadSource(dust.compile(i,e)),dust.cache[e](t,n).end()})}):t.setError(new Error("Template Not Found: "+e))},dust.loadSource=function(source,path){return eval(source)},Array.isArray?dust.isArray=Array.isArray:dust.isArray=function(e){return Object.prototype.toString.call(e)==="[object Array]"},dust.nextTick=function(){return typeof process!="undefined"?process.nextTick:function(e){setTimeout(e,0)}}(),dust.isEmpty=function(e){return dust.isArray(e)&&!e.length?!0:e===0?!1:!e},dust.filter=function(e,t,n){if(n)for(var r=0,i=n.length;r<i;r++){var s=n[r];s==="s"?(t=null,dust.log("Using unescape filter on ["+e+"]",DEBUG)):typeof dust.filters[s]=="function"?e=dust.filters[s](e):dust.onError(new Error("Invalid filter ["+s+"]"))}return t&&(e=dust.filters[t](e)),e},dust.filters={h:function(e){return dust.escapeHtml(e)},j:function(e){return dust.escapeJs(e)},u:encodeURI,uc:encodeURIComponent,js:function(e){return JSON?JSON.stringify(e):(dust.log("JSON is undefined.  JSON stringify has not been used on ["+e+"]",WARN),e)},jp:function(e){return JSON?JSON.parse(e):(dust.log("JSON is undefined.  JSON parse has not been used on ["+e+"]",WARN),e)}},dust.makeBase=function(e){return new Context(new Stack,e)},Context.wrap=function(e,t){return e instanceof Context?e:new Context(new Stack(e),{},null,t)},Context.prototype.get=function(e,t){return typeof e=="string"&&(e[0]==="."&&(t=!0,e=e.substr(1)),e=e.split(".")),this._get(t,e)},Context.prototype._get=function(e,t){var n=this.stack,r=1,i,s,o,u;dust.log("Searching for reference [{"+t.join(".")+"}] in template ["+this.getTemplateName()+"]",DEBUG),s=t[0],o=t.length;if(e&&o===0)u=n,n=n.head;else{if(!e){while(n){if(n.isObject){u=n.head,i=n.head[s];if(i!==undefined)break}n=n.tail}i!==undefined?n=i:n=this.global?this.global[s]:undefined}else n=n.head[s];while(n&&r<o)u=n,n=n[t[r]],r++}if(typeof n=="function"){var a=function(){return n.apply(u,arguments)};return a.isFunction=!0,a}return n===undefined&&dust.log("Cannot find the value for reference [{"+t.join(".")+"}] in template ["+this.getTemplateName()+"]"),n},Context.prototype.getPath=function(e,t){return this._get(e,t)},Context.prototype.push=function(e,t,n){return new Context(new Stack(e,this.stack,t,n),this.global,this.blocks,this.getTemplateName())},Context.prototype.rebase=function(e){return new Context(new Stack(e),this.global,this.blocks,this.getTemplateName())},Context.prototype.current=function(){return this.stack.head},Context.prototype.getBlock=function(e,t,n){if(typeof e=="function"){var r=new Chunk;e=e(r,this).data.join("")}var i=this.blocks;if(!i){dust.log("No blocks for context[{"+e+"}] in template ["+this.getTemplateName()+"]",DEBUG);return}var s=i.length,o;while(s--){o=i[s][e];if(o)return o}},Context.prototype.shiftBlocks=function(e){var t=this.blocks,n;return e?(t?n=t.concat([e]):n=[e],new Context(this.stack,this.global,n,this.getTemplateName())):this},Context.prototype.getTemplateName=function(){return this.templateName},Stub.prototype.flush=function(){var e=this.head;while(e){if(!e.flushable){if(e.error){this.callback(e.error),dust.onError(new Error("Chunk error ["+e.error+"] thrown. Ceasing to render this template.")),this.flush=function(){};return}return}this.out+=e.data.join(""),e=e.next,this.head=e}this.callback(null,this.out)},Stream.prototype.flush=function(){var e=this.head;while(e){if(!e.flushable){if(e.error){this.emit("error",e.error),dust.onError(new Error("Chunk error ["+e.error+"] thrown. Ceasing to render this template.")),this.flush=function(){};return}return}this.emit("data",e.data.join("")),e=e.next,this.head=e}this.emit("end")},Stream.prototype.emit=function(e,t){if(!this.events)return dust.log("No events to emit",INFO),!1;var n=this.events[e];if(!n)return dust.log("Event type ["+e+"] does not exist",WARN),!1;if(typeof n=="function")n(t);else if(dust.isArray(n)){var r=n.slice(0);for(var i=0,s=r.length;i<s;i++)r[i](t)}else dust.onError(new Error("Event Handler ["+n+"] is not of a type that is handled by emit"))},Stream.prototype.on=function(e,t){return this.events||(this.events={}),this.events[e]?typeof this.events[e]=="function"?this.events[e]=[this.events[e],t]:this.events[e].push(t):(dust.log("Event type ["+e+"] does not exist. Using just the specified callback.",WARN),t?this.events[e]=t:dust.log("Callback for type ["+e+"] does not exist. Listener not registered.",WARN)),this},Stream.prototype.pipe=function(e){return this.on("data",function(t){try{e.write(t,"utf8")}catch(n){dust.onError(n,e.head)}}).on("end",function(){try{return e.end()}catch(t){dust.onError(t,e.head)}}).on("error",function(t){e.error(t)}),this},Chunk.prototype.write=function(e){var t=this.taps;return t&&(e=t.go(e)),this.data.push(e),this},Chunk.prototype.end=function(e){return e&&this.write(e),this.flushable=!0,this.root.flush(),this},Chunk.prototype.map=function(e){var t=new Chunk(this.root,this.next,this.taps),n=new Chunk(this.root,t,this.taps);return this.next=n,this.flushable=!0,e(n),t},Chunk.prototype.tap=function(e){var t=this.taps;return t?this.taps=t.push(e):this.taps=new Tap(e),this},Chunk.prototype.untap=function(){return this.taps=this.taps.tail,this},Chunk.prototype.render=function(e,t){return e(this,t)},Chunk.prototype.reference=function(e,t,n,r){if(typeof e=="function"){e.isFunction=!0,e=e.apply(t.current(),[this,t,null,{auto:n,filters:r}]);if(e instanceof Chunk)return e}return dust.isEmpty(e)?this:this.write(dust.filter(e,n,r))},Chunk.prototype.section=function(e,t,n,r){if(typeof e=="function"){e=e.apply(t.current(),[this,t,n,r]);if(e instanceof Chunk)return e}var i=n.block,s=n["else"];r&&(t=t.push(r));if(dust.isArray(e)){if(i){var o=e.length,u=this;if(o>0){t.stack.head&&(t.stack.head.$len=o);for(var a=0;a<o;a++)t.stack.head&&(t.stack.head.$idx=a),u=i(u,t.push(e[a],a,o));return t.stack.head&&(t.stack.head.$idx=undefined,t.stack.head.$len=undefined),u}if(s)return s(this,t)}}else if(e===!0){if(i)return i(this,t)}else if(e||e===0){if(i)return i(this,t.push(e))}else if(s)return s(this,t);return dust.log("Not rendering section (#) block in template ["+t.getTemplateName()+"], because above key was not found",DEBUG),this},Chunk.prototype.exists=function(e,t,n){var r=n.block,i=n["else"];if(!dust.isEmpty(e)){if(r)return r(this,t)}else if(i)return i(this,t);return dust.log("Not rendering exists (?) block in template ["+t.getTemplateName()+"], because above key was not found",DEBUG),this},Chunk.prototype.notexists=function(e,t,n){var r=n.block,i=n["else"];if(dust.isEmpty(e)){if(r)return r(this,t)}else if(i)return i(this,t);return dust.log("Not rendering not exists (^) block check in template ["+t.getTemplateName()+"], because above key was found",DEBUG),this},Chunk.prototype.block=function(e,t,n){var r=n.block;return e&&(r=e),r?r(this,t):this},Chunk.prototype.partial=function(e,t,n){var r;r=dust.makeBase(t.global),r.blocks=t.blocks,t.stack&&t.stack.tail&&(r.stack=t.stack.tail),n&&(r=r.push(n)),typeof e=="string"&&(r.templateName=e),r=r.push(t.stack.head);var i;return typeof e=="function"?i=this.capture(e,r,function(e,t){r.templateName=r.templateName||e,dust.load(e,t,r).end()}):i=dust.load(e,this,r),i},Chunk.prototype.helper=function(e,t,n,r){var i=this;try{return dust.helpers[e]?dust.helpers[e](i,t,n,r):dust.onError(new Error("Invalid helper ["+e+"]"),i)}catch(s){return dust.onError(s,i)}},Chunk.prototype.capture=function(e,t,n){return this.map(function(r){var i=new Stub(function(e,t){e?r.setError(e):n(t,r)});e(i.head,t).end()})},Chunk.prototype.setError=function(e){return this.error=e,this.root.flush(),this},Tap.prototype.push=function(e){return new Tap(e,this)},Tap.prototype.go=function(e){var t=this;while(t)e=t.head(e),t=t.tail;return e};var HCHARS=new RegExp(/[&<>\"\']/),AMP=/&/g,LT=/</g,GT=/>/g,QUOT=/\"/g,SQUOT=/\'/g;dust.escapeHtml=function(e){return typeof e=="string"?HCHARS.test(e)?e.replace(AMP,"&amp;").replace(LT,"&lt;").replace(GT,"&gt;").replace(QUOT,"&quot;").replace(SQUOT,"&#39;"):e:e};var BS=/\\/g,FS=/\//g,CR=/\r/g,LS=/\u2028/g,PS=/\u2029/g,NL=/\n/g,LF=/\f/g,SQ=/'/g,DQ=/"/g,TB=/\t/g;dust.escapeJs=function(e){return typeof e=="string"?e.replace(BS,"\\\\").replace(FS,"\\/").replace(DQ,'\\"').replace(SQ,"\\'").replace(CR,"\\r").replace(LS,"\\u2028").replace(PS,"\\u2029").replace(NL,"\\n").replace(LF,"\\f").replace(TB,"\\t"):e}})(dust),typeof exports!="undefined"&&(typeof process!="undefined"&&require("./server")(dust),module.exports=dust)
\ No newline at end of file

diff --git a/src/web/js/moment.min.js b/src/web/js/moment.min.js
new file mode 100644
index 0000000..568ad05
--- /dev/null
+++ b/src/web/js/moment.min.js
@@ -0,0 +1,6 @@
+//! moment.js
+//! version : 2.4.0
+//! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+//! license : MIT
+//! momentjs.com
+(function(a){function b(a,b){return function(c){return i(a.call(this,c),b)}}function c(a,b){return function(c){return this.lang().ordinal(a.call(this,c),b)}}function d(){}function e(a){u(a),g(this,a)}function f(a){var b=o(a),c=b.year||0,d=b.month||0,e=b.week||0,f=b.day||0,g=b.hour||0,h=b.minute||0,i=b.second||0,j=b.millisecond||0;this._input=a,this._milliseconds=+j+1e3*i+6e4*h+36e5*g,this._days=+f+7*e,this._months=+d+12*c,this._data={},this._bubble()}function g(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return b.hasOwnProperty("toString")&&(a.toString=b.toString),b.hasOwnProperty("valueOf")&&(a.valueOf=b.valueOf),a}function h(a){return 0>a?Math.ceil(a):Math.floor(a)}function i(a,b){for(var c=a+"";c.length<b;)c="0"+c;return c}function j(a,b,c,d){var e,f,g=b._milliseconds,h=b._days,i=b._months;g&&a._d.setTime(+a._d+g*c),(h||i)&&(e=a.minute(),f=a.hour()),h&&a.date(a.date()+h*c),i&&a.month(a.month()+i*c),g&&!d&&bb.updateOffset(a),(h||i)&&(a.minute(e),a.hour(f))}function k(a){return"[object Array]"===Object.prototype.toString.call(a)}function l(a){return"[object Date]"===Object.prototype.toString.call(a)||a instanceof Date}function m(a,b,c){var d,e=Math.min(a.length,b.length),f=Math.abs(a.length-b.length),g=0;for(d=0;e>d;d++)(c&&a[d]!==b[d]||!c&&q(a[d])!==q(b[d]))&&g++;return g+f}function n(a){if(a){var b=a.toLowerCase().replace(/(.)s$/,"$1");a=Kb[a]||Lb[b]||b}return a}function o(a){var b,c,d={};for(c in a)a.hasOwnProperty(c)&&(b=n(c),b&&(d[b]=a[c]));return d}function p(b){var c,d;if(0===b.indexOf("week"))c=7,d="day";else{if(0!==b.indexOf("month"))return;c=12,d="month"}bb[b]=function(e,f){var g,h,i=bb.fn._lang[b],j=[];if("number"==typeof e&&(f=e,e=a),h=function(a){var b=bb().utc().set(d,a);return i.call(bb.fn._lang,b,e||"")},null!=f)return h(f);for(g=0;c>g;g++)j.push(h(g));return j}}function q(a){var b=+a,c=0;return 0!==b&&isFinite(b)&&(c=b>=0?Math.floor(b):Math.ceil(b)),c}function r(a,b){return new Date(Date.UTC(a,b+1,0)).getUTCDate()}function s(a){return t(a)?366:365}function t(a){return 0===a%4&&0!==a%100||0===a%400}function u(a){var b;a._a&&-2===a._pf.overflow&&(b=a._a[gb]<0||a._a[gb]>11?gb:a._a[hb]<1||a._a[hb]>r(a._a[fb],a._a[gb])?hb:a._a[ib]<0||a._a[ib]>23?ib:a._a[jb]<0||a._a[jb]>59?jb:a._a[kb]<0||a._a[kb]>59?kb:a._a[lb]<0||a._a[lb]>999?lb:-1,a._pf._overflowDayOfYear&&(fb>b||b>hb)&&(b=hb),a._pf.overflow=b)}function v(a){a._pf={empty:!1,unusedTokens:[],unusedInput:[],overflow:-2,charsLeftOver:0,nullInput:!1,invalidMonth:null,invalidFormat:!1,userInvalidated:!1,iso:!1}}function w(a){return null==a._isValid&&(a._isValid=!isNaN(a._d.getTime())&&a._pf.overflow<0&&!a._pf.empty&&!a._pf.invalidMonth&&!a._pf.nullInput&&!a._pf.invalidFormat&&!a._pf.userInvalidated,a._strict&&(a._isValid=a._isValid&&0===a._pf.charsLeftOver&&0===a._pf.unusedTokens.length)),a._isValid}function x(a){return a?a.toLowerCase().replace("_","-"):a}function y(a,b){return b.abbr=a,mb[a]||(mb[a]=new d),mb[a].set(b),mb[a]}function z(a){delete mb[a]}function A(a){var b,c,d,e,f=0,g=function(a){if(!mb[a]&&nb)try{require("./lang/"+a)}catch(b){}return mb[a]};if(!a)return bb.fn._lang;if(!k(a)){if(c=g(a))return c;a=[a]}for(;f<a.length;){for(e=x(a[f]).split("-"),b=e.length,d=x(a[f+1]),d=d?d.split("-"):null;b>0;){if(c=g(e.slice(0,b).join("-")))return c;if(d&&d.length>=b&&m(e,d,!0)>=b-1)break;b--}f++}return bb.fn._lang}function B(a){return a.match(/\[[\s\S]/)?a.replace(/^\[|\]$/g,""):a.replace(/\\/g,"")}function C(a){var b,c,d=a.match(rb);for(b=0,c=d.length;c>b;b++)d[b]=Pb[d[b]]?Pb[d[b]]:B(d[b]);return function(e){var f="";for(b=0;c>b;b++)f+=d[b]instanceof Function?d[b].call(e,a):d[b];return f}}function D(a,b){return a.isValid()?(b=E(b,a.lang()),Mb[b]||(Mb[b]=C(b)),Mb[b](a)):a.lang().invalidDate()}function E(a,b){function c(a){return b.longDateFormat(a)||a}var d=5;for(sb.lastIndex=0;d>=0&&sb.test(a);)a=a.replace(sb,c),sb.lastIndex=0,d-=1;return a}function F(a,b){var c;switch(a){case"DDDD":return vb;case"YYYY":case"GGGG":case"gggg":return wb;case"YYYYY":case"GGGGG":case"ggggg":return xb;case"S":case"SS":case"SSS":case"DDD":return ub;case"MMM":case"MMMM":case"dd":case"ddd":case"dddd":return zb;case"a":case"A":return A(b._l)._meridiemParse;case"X":return Cb;case"Z":case"ZZ":return Ab;case"T":return Bb;case"SSSS":return yb;case"MM":case"DD":case"YY":case"GG":case"gg":case"HH":case"hh":case"mm":case"ss":case"M":case"D":case"d":case"H":case"h":case"m":case"s":case"w":case"ww":case"W":case"WW":case"e":case"E":return tb;default:return c=new RegExp(N(M(a.replace("\\","")),"i"))}}function G(a){var b=(Ab.exec(a)||[])[0],c=(b+"").match(Hb)||["-",0,0],d=+(60*c[1])+q(c[2]);return"+"===c[0]?-d:d}function H(a,b,c){var d,e=c._a;switch(a){case"M":case"MM":null!=b&&(e[gb]=q(b)-1);break;case"MMM":case"MMMM":d=A(c._l).monthsParse(b),null!=d?e[gb]=d:c._pf.invalidMonth=b;break;case"D":case"DD":null!=b&&(e[hb]=q(b));break;case"DDD":case"DDDD":null!=b&&(c._dayOfYear=q(b));break;case"YY":e[fb]=q(b)+(q(b)>68?1900:2e3);break;case"YYYY":case"YYYYY":e[fb]=q(b);break;case"a":case"A":c._isPm=A(c._l).isPM(b);break;case"H":case"HH":case"h":case"hh":e[ib]=q(b);break;case"m":case"mm":e[jb]=q(b);break;case"s":case"ss":e[kb]=q(b);break;case"S":case"SS":case"SSS":case"SSSS":e[lb]=q(1e3*("0."+b));break;case"X":c._d=new Date(1e3*parseFloat(b));break;case"Z":case"ZZ":c._useUTC=!0,c._tzm=G(b);break;case"w":case"ww":case"W":case"WW":case"d":case"dd":case"ddd":case"dddd":case"e":case"E":a=a.substr(0,1);case"gg":case"gggg":case"GG":case"GGGG":case"GGGGG":a=a.substr(0,2),b&&(c._w=c._w||{},c._w[a]=b)}}function I(a){var b,c,d,e,f,g,h,i,j,k,l=[];if(!a._d){for(d=K(a),a._w&&null==a._a[hb]&&null==a._a[gb]&&(f=function(b){return b?b.length<3?parseInt(b,10)>68?"19"+b:"20"+b:b:null==a._a[fb]?bb().weekYear():a._a[fb]},g=a._w,null!=g.GG||null!=g.W||null!=g.E?h=X(f(g.GG),g.W||1,g.E,4,1):(i=A(a._l),j=null!=g.d?T(g.d,i):null!=g.e?parseInt(g.e,10)+i._week.dow:0,k=parseInt(g.w,10)||1,null!=g.d&&j<i._week.dow&&k++,h=X(f(g.gg),k,j,i._week.doy,i._week.dow)),a._a[fb]=h.year,a._dayOfYear=h.dayOfYear),a._dayOfYear&&(e=null==a._a[fb]?d[fb]:a._a[fb],a._dayOfYear>s(e)&&(a._pf._overflowDayOfYear=!0),c=S(e,0,a._dayOfYear),a._a[gb]=c.getUTCMonth(),a._a[hb]=c.getUTCDate()),b=0;3>b&&null==a._a[b];++b)a._a[b]=l[b]=d[b];for(;7>b;b++)a._a[b]=l[b]=null==a._a[b]?2===b?1:0:a._a[b];l[ib]+=q((a._tzm||0)/60),l[jb]+=q((a._tzm||0)%60),a._d=(a._useUTC?S:R).apply(null,l)}}function J(a){var b;a._d||(b=o(a._i),a._a=[b.year,b.month,b.day,b.hour,b.minute,b.second,b.millisecond],I(a))}function K(a){var b=new Date;return a._useUTC?[b.getUTCFullYear(),b.getUTCMonth(),b.getUTCDate()]:[b.getFullYear(),b.getMonth(),b.getDate()]}function L(a){a._a=[],a._pf.empty=!0;var b,c,d,e,f,g=A(a._l),h=""+a._i,i=h.length,j=0;for(d=E(a._f,g).match(rb)||[],b=0;b<d.length;b++)e=d[b],c=(F(e,a).exec(h)||[])[0],c&&(f=h.substr(0,h.indexOf(c)),f.length>0&&a._pf.unusedInput.push(f),h=h.slice(h.indexOf(c)+c.length),j+=c.length),Pb[e]?(c?a._pf.empty=!1:a._pf.unusedTokens.push(e),H(e,c,a)):a._strict&&!c&&a._pf.unusedTokens.push(e);a._pf.charsLeftOver=i-j,h.length>0&&a._pf.unusedInput.push(h),a._isPm&&a._a[ib]<12&&(a._a[ib]+=12),a._isPm===!1&&12===a._a[ib]&&(a._a[ib]=0),I(a),u(a)}function M(a){return a.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g,function(a,b,c,d,e){return b||c||d||e})}function N(a){return a.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")}function O(a){var b,c,d,e,f;if(0===a._f.length)return a._pf.invalidFormat=!0,a._d=new Date(0/0),void 0;for(e=0;e<a._f.length;e++)f=0,b=g({},a),v(b),b._f=a._f[e],L(b),w(b)&&(f+=b._pf.charsLeftOver,f+=10*b._pf.unusedTokens.length,b._pf.score=f,(null==d||d>f)&&(d=f,c=b));g(a,c||b)}function P(a){var b,c=a._i,d=Db.exec(c);if(d){for(a._pf.iso=!0,b=4;b>0;b--)if(d[b]){a._f=Fb[b-1]+(d[6]||" ");break}for(b=0;4>b;b++)if(Gb[b][1].exec(c)){a._f+=Gb[b][0];break}Ab.exec(c)&&(a._f+="Z"),L(a)}else a._d=new Date(c)}function Q(b){var c=b._i,d=ob.exec(c);c===a?b._d=new Date:d?b._d=new Date(+d[1]):"string"==typeof c?P(b):k(c)?(b._a=c.slice(0),I(b)):l(c)?b._d=new Date(+c):"object"==typeof c?J(b):b._d=new Date(c)}function R(a,b,c,d,e,f,g){var h=new Date(a,b,c,d,e,f,g);return 1970>a&&h.setFullYear(a),h}function S(a){var b=new Date(Date.UTC.apply(null,arguments));return 1970>a&&b.setUTCFullYear(a),b}function T(a,b){if("string"==typeof a)if(isNaN(a)){if(a=b.weekdaysParse(a),"number"!=typeof a)return null}else a=parseInt(a,10);return a}function U(a,b,c,d,e){return e.relativeTime(b||1,!!c,a,d)}function V(a,b,c){var d=eb(Math.abs(a)/1e3),e=eb(d/60),f=eb(e/60),g=eb(f/24),h=eb(g/365),i=45>d&&["s",d]||1===e&&["m"]||45>e&&["mm",e]||1===f&&["h"]||22>f&&["hh",f]||1===g&&["d"]||25>=g&&["dd",g]||45>=g&&["M"]||345>g&&["MM",eb(g/30)]||1===h&&["y"]||["yy",h];return i[2]=b,i[3]=a>0,i[4]=c,U.apply({},i)}function W(a,b,c){var d,e=c-b,f=c-a.day();return f>e&&(f-=7),e-7>f&&(f+=7),d=bb(a).add("d",f),{week:Math.ceil(d.dayOfYear()/7),year:d.year()}}function X(a,b,c,d,e){var f,g,h=new Date(Date.UTC(a,0)).getUTCDay();return c=null!=c?c:e,f=e-h+(h>d?7:0),g=7*(b-1)+(c-e)+f+1,{year:g>0?a:a-1,dayOfYear:g>0?g:s(a-1)+g}}function Y(a){var b=a._i,c=a._f;return"undefined"==typeof a._pf&&v(a),null===b?bb.invalid({nullInput:!0}):("string"==typeof b&&(a._i=b=A().preparse(b)),bb.isMoment(b)?(a=g({},b),a._d=new Date(+b._d)):c?k(c)?O(a):L(a):Q(a),new e(a))}function Z(a,b){bb.fn[a]=bb.fn[a+"s"]=function(a){var c=this._isUTC?"UTC":"";return null!=a?(this._d["set"+c+b](a),bb.updateOffset(this),this):this._d["get"+c+b]()}}function $(a){bb.duration.fn[a]=function(){return this._data[a]}}function _(a,b){bb.duration.fn["as"+a]=function(){return+this/b}}function ab(a){var b=!1,c=bb;"undefined"==typeof ender&&(this.moment=a?function(){return!b&&console&&console.warn&&(b=!0,console.warn("Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release.")),c.apply(null,arguments)}:bb)}for(var bb,cb,db="2.4.0",eb=Math.round,fb=0,gb=1,hb=2,ib=3,jb=4,kb=5,lb=6,mb={},nb="undefined"!=typeof module&&module.exports,ob=/^\/?Date\((\-?\d+)/i,pb=/(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,qb=/^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/,rb=/(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|X|zz?|ZZ?|.)/g,sb=/(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,tb=/\d\d?/,ub=/\d{1,3}/,vb=/\d{3}/,wb=/\d{1,4}/,xb=/[+\-]?\d{1,6}/,yb=/\d+/,zb=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,Ab=/Z|[\+\-]\d\d:?\d\d/i,Bb=/T/i,Cb=/[\+\-]?\d+(\.\d{1,3})?/,Db=/^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d:?\d\d|Z)?)?$/,Eb="YYYY-MM-DDTHH:mm:ssZ",Fb=["YYYY-MM-DD","GGGG-[W]WW","GGGG-[W]WW-E","YYYY-DDD"],Gb=[["HH:mm:ss.SSSS",/(T| )\d\d:\d\d:\d\d\.\d{1,3}/],["HH:mm:ss",/(T| )\d\d:\d\d:\d\d/],["HH:mm",/(T| )\d\d:\d\d/],["HH",/(T| )\d\d/]],Hb=/([\+\-]|\d\d)/gi,Ib="Date|Hours|Minutes|Seconds|Milliseconds".split("|"),Jb={Milliseconds:1,Seconds:1e3,Minutes:6e4,Hours:36e5,Days:864e5,Months:2592e6,Years:31536e6},Kb={ms:"millisecond",s:"second",m:"minute",h:"hour",d:"day",D:"date",w:"week",W:"isoWeek",M:"month",y:"year",DDD:"dayOfYear",e:"weekday",E:"isoWeekday",gg:"weekYear",GG:"isoWeekYear"},Lb={dayofyear:"dayOfYear",isoweekday:"isoWeekday",isoweek:"isoWeek",weekyear:"weekYear",isoweekyear:"isoWeekYear"},Mb={},Nb="DDD w W M D d".split(" "),Ob="M D H h m s w W".split(" "),Pb={M:function(){return this.month()+1},MMM:function(a){return this.lang().monthsShort(this,a)},MMMM:function(a){return this.lang().months(this,a)},D:function(){return this.date()},DDD:function(){return this.dayOfYear()},d:function(){return this.day()},dd:function(a){return this.lang().weekdaysMin(this,a)},ddd:function(a){return this.lang().weekdaysShort(this,a)},dddd:function(a){return this.lang().weekdays(this,a)},w:function(){return this.week()},W:function(){return this.isoWeek()},YY:function(){return i(this.year()%100,2)},YYYY:function(){return i(this.year(),4)},YYYYY:function(){return i(this.year(),5)},gg:function(){return i(this.weekYear()%100,2)},gggg:function(){return this.weekYear()},ggggg:function(){return i(this.weekYear(),5)},GG:function(){return i(this.isoWeekYear()%100,2)},GGGG:function(){return this.isoWeekYear()},GGGGG:function(){return i(this.isoWeekYear(),5)},e:function(){return this.weekday()},E:function(){return this.isoWeekday()},a:function(){return this.lang().meridiem(this.hours(),this.minutes(),!0)},A:function(){return this.lang().meridiem(this.hours(),this.minutes(),!1)},H:function(){return this.hours()},h:function(){return this.hours()%12||12},m:function(){return this.minutes()},s:function(){return this.seconds()},S:function(){return q(this.milliseconds()/100)},SS:function(){return i(q(this.milliseconds()/10),2)},SSS:function(){return i(this.milliseconds(),3)},SSSS:function(){return i(this.milliseconds(),3)},Z:function(){var a=-this.zone(),b="+";return 0>a&&(a=-a,b="-"),b+i(q(a/60),2)+":"+i(q(a)%60,2)},ZZ:function(){var a=-this.zone(),b="+";return 0>a&&(a=-a,b="-"),b+i(q(10*a/6),4)},z:function(){return this.zoneAbbr()},zz:function(){return this.zoneName()},X:function(){return this.unix()}},Qb=["months","monthsShort","weekdays","weekdaysShort","weekdaysMin"];Nb.length;)cb=Nb.pop(),Pb[cb+"o"]=c(Pb[cb],cb);for(;Ob.length;)cb=Ob.pop(),Pb[cb+cb]=b(Pb[cb],2);for(Pb.DDDD=b(Pb.DDD,3),g(d.prototype,{set:function(a){var b,c;for(c in a)b=a[c],"function"==typeof b?this[c]=b:this["_"+c]=b},_months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),months:function(a){return this._months[a.month()]},_monthsShort:"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),monthsShort:function(a){return this._monthsShort[a.month()]},monthsParse:function(a){var b,c,d;for(this._monthsParse||(this._monthsParse=[]),b=0;12>b;b++)if(this._monthsParse[b]||(c=bb.utc([2e3,b]),d="^"+this.months(c,"")+"|^"+this.monthsShort(c,""),this._monthsParse[b]=new RegExp(d.replace(".",""),"i")),this._monthsParse[b].test(a))return b},_weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),weekdays:function(a){return this._weekdays[a.day()]},_weekdaysShort:"Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),weekdaysShort:function(a){return this._weekdaysShort[a.day()]},_weekdaysMin:"Su_Mo_Tu_We_Th_Fr_Sa".split("_"),weekdaysMin:function(a){return this._weekdaysMin[a.day()]},weekdaysParse:function(a){var b,c,d;for(this._weekdaysParse||(this._weekdaysParse=[]),b=0;7>b;b++)if(this._weekdaysParse[b]||(c=bb([2e3,1]).day(b),d="^"+this.weekdays(c,"")+"|^"+this.weekdaysShort(c,"")+"|^"+this.weekdaysMin(c,""),this._weekdaysParse[b]=new RegExp(d.replace(".",""),"i")),this._weekdaysParse[b].test(a))return b},_longDateFormat:{LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D YYYY",LLL:"MMMM D YYYY LT",LLLL:"dddd, MMMM D YYYY LT"},longDateFormat:function(a){var b=this._longDateFormat[a];return!b&&this._longDateFormat[a.toUpperCase()]&&(b=this._longDateFormat[a.toUpperCase()].replace(/MMMM|MM|DD|dddd/g,function(a){return a.slice(1)}),this._longDateFormat[a]=b),b},isPM:function(a){return"p"===(a+"").toLowerCase().charAt(0)},_meridiemParse:/[ap]\.?m?\.?/i,meridiem:function(a,b,c){return a>11?c?"pm":"PM":c?"am":"AM"},_calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[Last] dddd [at] LT",sameElse:"L"},calendar:function(a,b){var c=this._calendar[a];return"function"==typeof c?c.apply(b):c},_relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},relativeTime:function(a,b,c,d){var e=this._relativeTime[c];return"function"==typeof e?e(a,b,c,d):e.replace(/%d/i,a)},pastFuture:function(a,b){var c=this._relativeTime[a>0?"future":"past"];return"function"==typeof c?c(b):c.replace(/%s/i,b)},ordinal:function(a){return this._ordinal.replace("%d",a)},_ordinal:"%d",preparse:function(a){return a},postformat:function(a){return a},week:function(a){return W(a,this._week.dow,this._week.doy).week},_week:{dow:0,doy:6},_invalidDate:"Invalid date",invalidDate:function(){return this._invalidDate}}),bb=function(b,c,d,e){return"boolean"==typeof d&&(e=d,d=a),Y({_i:b,_f:c,_l:d,_strict:e,_isUTC:!1})},bb.utc=function(b,c,d,e){var f;return"boolean"==typeof d&&(e=d,d=a),f=Y({_useUTC:!0,_isUTC:!0,_l:d,_i:b,_f:c,_strict:e}).utc()},bb.unix=function(a){return bb(1e3*a)},bb.duration=function(a,b){var c,d,e,g=bb.isDuration(a),h="number"==typeof a,i=g?a._input:h?{}:a,j=null;return h?b?i[b]=a:i.milliseconds=a:(j=pb.exec(a))?(c="-"===j[1]?-1:1,i={y:0,d:q(j[hb])*c,h:q(j[ib])*c,m:q(j[jb])*c,s:q(j[kb])*c,ms:q(j[lb])*c}):(j=qb.exec(a))&&(c="-"===j[1]?-1:1,e=function(a){var b=a&&parseFloat(a.replace(",","."));return(isNaN(b)?0:b)*c},i={y:e(j[2]),M:e(j[3]),d:e(j[4]),h:e(j[5]),m:e(j[6]),s:e(j[7]),w:e(j[8])}),d=new f(i),g&&a.hasOwnProperty("_lang")&&(d._lang=a._lang),d},bb.version=db,bb.defaultFormat=Eb,bb.updateOffset=function(){},bb.lang=function(a,b){var c;return a?(b?y(x(a),b):null===b?(z(a),a="en"):mb[a]||A(a),c=bb.duration.fn._lang=bb.fn._lang=A(a),c._abbr):bb.fn._lang._abbr},bb.langData=function(a){return a&&a._lang&&a._lang._abbr&&(a=a._lang._abbr),A(a)},bb.isMoment=function(a){return a instanceof e},bb.isDuration=function(a){return a instanceof f},cb=Qb.length-1;cb>=0;--cb)p(Qb[cb]);for(bb.normalizeUnits=function(a){return n(a)},bb.invalid=function(a){var b=bb.utc(0/0);return null!=a?g(b._pf,a):b._pf.userInvalidated=!0,b},bb.parseZone=function(a){return bb(a).parseZone()},g(bb.fn=e.prototype,{clone:function(){return bb(this)},valueOf:function(){return+this._d+6e4*(this._offset||0)},unix:function(){return Math.floor(+this/1e3)},toString:function(){return this.clone().lang("en").format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},toDate:function(){return this._offset?new Date(+this):this._d},toISOString:function(){return D(bb(this).utc(),"YYYY-MM-DD[T]HH:mm:ss.SSS[Z]")},toArray:function(){var a=this;return[a.year(),a.month(),a.date(),a.hours(),a.minutes(),a.seconds(),a.milliseconds()]},isValid:function(){return w(this)},isDSTShifted:function(){return this._a?this.isValid()&&m(this._a,(this._isUTC?bb.utc(this._a):bb(this._a)).toArray())>0:!1},parsingFlags:function(){return g({},this._pf)},invalidAt:function(){return this._pf.overflow},utc:function(){return this.zone(0)},local:function(){return this.zone(0),this._isUTC=!1,this},format:function(a){var b=D(this,a||bb.defaultFormat);return this.lang().postformat(b)},add:function(a,b){var c;return c="string"==typeof a?bb.duration(+b,a):bb.duration(a,b),j(this,c,1),this},subtract:function(a,b){var c;return c="string"==typeof a?bb.duration(+b,a):bb.duration(a,b),j(this,c,-1),this},diff:function(a,b,c){var d,e,f=this._isUTC?bb(a).zone(this._offset||0):bb(a).local(),g=6e4*(this.zone()-f.zone());return b=n(b),"year"===b||"month"===b?(d=432e5*(this.daysInMonth()+f.daysInMonth()),e=12*(this.year()-f.year())+(this.month()-f.month()),e+=(this-bb(this).startOf("month")-(f-bb(f).startOf("month")))/d,e-=6e4*(this.zone()-bb(this).startOf("month").zone()-(f.zone()-bb(f).startOf("month").zone()))/d,"year"===b&&(e/=12)):(d=this-f,e="second"===b?d/1e3:"minute"===b?d/6e4:"hour"===b?d/36e5:"day"===b?(d-g)/864e5:"week"===b?(d-g)/6048e5:d),c?e:h(e)},from:function(a,b){return bb.duration(this.diff(a)).lang(this.lang()._abbr).humanize(!b)},fromNow:function(a){return this.from(bb(),a)},calendar:function(){var a=this.diff(bb().zone(this.zone()).startOf("day"),"days",!0),b=-6>a?"sameElse":-1>a?"lastWeek":0>a?"lastDay":1>a?"sameDay":2>a?"nextDay":7>a?"nextWeek":"sameElse";return this.format(this.lang().calendar(b,this))},isLeapYear:function(){return t(this.year())},isDST:function(){return this.zone()<this.clone().month(0).zone()||this.zone()<this.clone().month(5).zone()},day:function(a){var b=this._isUTC?this._d.getUTCDay():this._d.getDay();return null!=a?(a=T(a,this.lang()),this.add({d:a-b})):b},month:function(a){var b,c=this._isUTC?"UTC":"";return null!=a?"string"==typeof a&&(a=this.lang().monthsParse(a),"number"!=typeof a)?this:(b=this.date(),this.date(1),this._d["set"+c+"Month"](a),this.date(Math.min(b,this.daysInMonth())),bb.updateOffset(this),this):this._d["get"+c+"Month"]()},startOf:function(a){switch(a=n(a)){case"year":this.month(0);case"month":this.date(1);case"week":case"isoWeek":case"day":this.hours(0);case"hour":this.minutes(0);case"minute":this.seconds(0);case"second":this.milliseconds(0)}return"week"===a?this.weekday(0):"isoWeek"===a&&this.isoWeekday(1),this},endOf:function(a){return a=n(a),this.startOf(a).add("isoWeek"===a?"week":a,1).subtract("ms",1)},isAfter:function(a,b){return b="undefined"!=typeof b?b:"millisecond",+this.clone().startOf(b)>+bb(a).startOf(b)},isBefore:function(a,b){return b="undefined"!=typeof b?b:"millisecond",+this.clone().startOf(b)<+bb(a).startOf(b)},isSame:function(a,b){return b="undefined"!=typeof b?b:"millisecond",+this.clone().startOf(b)===+bb(a).startOf(b)},min:function(a){return a=bb.apply(null,arguments),this>a?this:a},max:function(a){return a=bb.apply(null,arguments),a>this?this:a},zone:function(a){var b=this._offset||0;return null==a?this._isUTC?b:this._d.getTimezoneOffset():("string"==typeof a&&(a=G(a)),Math.abs(a)<16&&(a=60*a),this._offset=a,this._isUTC=!0,b!==a&&j(this,bb.duration(b-a,"m"),1,!0),this)},zoneAbbr:function(){return this._isUTC?"UTC":""},zoneName:function(){return this._isUTC?"Coordinated Universal Time":""},parseZone:function(){return"string"==typeof this._i&&this.zone(this._i),this},hasAlignedHourOffset:function(a){return a=a?bb(a).zone():0,0===(this.zone()-a)%60},daysInMonth:function(){return r(this.year(),this.month())},dayOfYear:function(a){var b=eb((bb(this).startOf("day")-bb(this).startOf("year"))/864e5)+1;return null==a?b:this.add("d",a-b)},weekYear:function(a){var b=W(this,this.lang()._week.dow,this.lang()._week.doy).year;return null==a?b:this.add("y",a-b)},isoWeekYear:function(a){var b=W(this,1,4).year;return null==a?b:this.add("y",a-b)},week:function(a){var b=this.lang().week(this);return null==a?b:this.add("d",7*(a-b))},isoWeek:function(a){var b=W(this,1,4).week;return null==a?b:this.add("d",7*(a-b))},weekday:function(a){var b=(this.day()+7-this.lang()._week.dow)%7;return null==a?b:this.add("d",a-b)},isoWeekday:function(a){return null==a?this.day()||7:this.day(this.day()%7?a:a-7)},get:function(a){return a=n(a),this[a]()},set:function(a,b){return a=n(a),"function"==typeof this[a]&&this[a](b),this},lang:function(b){return b===a?this._lang:(this._lang=A(b),this)}}),cb=0;cb<Ib.length;cb++)Z(Ib[cb].toLowerCase().replace(/s$/,""),Ib[cb]);Z("year","FullYear"),bb.fn.days=bb.fn.day,bb.fn.months=bb.fn.month,bb.fn.weeks=bb.fn.week,bb.fn.isoWeeks=bb.fn.isoWeek,bb.fn.toJSON=bb.fn.toISOString,g(bb.duration.fn=f.prototype,{_bubble:function(){var a,b,c,d,e=this._milliseconds,f=this._days,g=this._months,i=this._data;i.milliseconds=e%1e3,a=h(e/1e3),i.seconds=a%60,b=h(a/60),i.minutes=b%60,c=h(b/60),i.hours=c%24,f+=h(c/24),i.days=f%30,g+=h(f/30),i.months=g%12,d=h(g/12),i.years=d},weeks:function(){return h(this.days()/7)},valueOf:function(){return this._milliseconds+864e5*this._days+2592e6*(this._months%12)+31536e6*q(this._months/12)},humanize:function(a){var b=+this,c=V(b,!a,this.lang());return a&&(c=this.lang().pastFuture(b,c)),this.lang().postformat(c)},add:function(a,b){var c=bb.duration(a,b);return this._milliseconds+=c._milliseconds,this._days+=c._days,this._months+=c._months,this._bubble(),this},subtract:function(a,b){var c=bb.duration(a,b);return this._milliseconds-=c._milliseconds,this._days-=c._days,this._months-=c._months,this._bubble(),this},get:function(a){return a=n(a),this[a.toLowerCase()+"s"]()},as:function(a){return a=n(a),this["as"+a.charAt(0).toUpperCase()+a.slice(1)+"s"]()},lang:bb.fn.lang,toIsoString:function(){var a=Math.abs(this.years()),b=Math.abs(this.months()),c=Math.abs(this.days()),d=Math.abs(this.hours()),e=Math.abs(this.minutes()),f=Math.abs(this.seconds()+this.milliseconds()/1e3);return this.asSeconds()?(this.asSeconds()<0?"-":"")+"P"+(a?a+"Y":"")+(b?b+"M":"")+(c?c+"D":"")+(d||e||f?"T":"")+(d?d+"H":"")+(e?e+"M":"")+(f?f+"S":""):"P0D"}});for(cb in Jb)Jb.hasOwnProperty(cb)&&(_(cb,Jb[cb]),$(cb.toLowerCase()));_("Weeks",6048e5),bb.duration.fn.asMonths=function(){return(+this-31536e6*this.years())/2592e6+12*this.years()},bb.lang("en",{ordinal:function(a){var b=a%10,c=1===q(a%100/10)?"th":1===b?"st":2===b?"nd":3===b?"rd":"th";return a+c}}),nb?(module.exports=bb,ab(!0)):"function"==typeof define&&define.amd?define("moment",function(b,c,d){return d.config().noGlobal!==!0&&ab(d.config().noGlobal===a),bb}):ab()}).call(this);
\ No newline at end of file