Browse Source

Add initial website pages

Alex Dima 9 years ago
parent
commit
99bc54b159
55 changed files with 13023 additions and 1 deletions
  1. 6 1
      .vscode/settings.json
  2. 2 0
      README.md
  3. 274 0
      website/all.css
  4. 154 0
      website/index.html
  5. 308 0
      website/index/index.css
  6. 147 0
      website/index/index.js
  7. 216 0
      website/index/samples/diff.lhs.txt
  8. 213 0
      website/index/samples/diff.rhs.txt
  9. 13 0
      website/index/samples/sample.bat.txt
  10. 246 0
      website/index/samples/sample.c.txt
  11. 28 0
      website/index/samples/sample.coffeescript.txt
  12. 246 0
      website/index/samples/sample.cpp.txt
  13. 23 0
      website/index/samples/sample.csharp.txt
  14. 828 0
      website/index/samples/sample.css.txt
  15. 32 0
      website/index/samples/sample.dockerfile.txt
  16. 8 0
      website/index/samples/sample.fsharp.txt
  17. 111 0
      website/index/samples/sample.go.txt
  18. 31 0
      website/index/samples/sample.handlebars.txt
  19. 22 0
      website/index/samples/sample.html.txt
  20. 15 0
      website/index/samples/sample.ini.txt
  21. 18 0
      website/index/samples/sample.jade.txt
  22. 14 0
      website/index/samples/sample.java.txt
  23. 214 0
      website/index/samples/sample.javascript.txt
  24. 68 0
      website/index/samples/sample.json.txt
  25. 46 0
      website/index/samples/sample.less.txt
  26. 12 0
      website/index/samples/sample.lua.txt
  27. 97 0
      website/index/samples/sample.markdown.txt
  28. 52 0
      website/index/samples/sample.objective-c.txt
  29. 82 0
      website/index/samples/sample.php.txt
  30. 9 0
      website/index/samples/sample.plaintext.txt
  31. 30 0
      website/index/samples/sample.powershell.txt
  32. 12 0
      website/index/samples/sample.python.txt
  33. 41 0
      website/index/samples/sample.r.txt
  34. 46 0
      website/index/samples/sample.razor.txt
  35. 21 0
      website/index/samples/sample.ruby.txt
  36. 37 0
      website/index/samples/sample.sass.txt
  37. 52 0
      website/index/samples/sample.sql.txt
  38. 50 0
      website/index/samples/sample.swift.txt
  39. 124 0
      website/index/samples/sample.typescript.txt
  40. 59 0
      website/index/samples/sample.vb.txt
  41. 14 0
      website/index/samples/sample.xml.txt
  42. 6808 0
      website/lib/bootstrap-cosmo.css
  43. 8 0
      website/lib/bootstrap-responsive.min.css
  44. 1 0
      website/lib/bootstrap-select.min.css
  45. 0 0
      website/lib/bootstrap-select.min.js
  46. 5 0
      website/lib/bootstrap.min.js
  47. 2 0
      website/lib/jquery-1.9.1.min.js
  48. 84 0
      website/playground.html
  49. 86 0
      website/playground/playground-runner.html
  50. 59 0
      website/playground/playground.css
  51. 314 0
      website/playground/playground.js
  52. 1577 0
      website/playground/playground.mdoc
  53. BIN
      website/playground/run.png
  54. 54 0
      website/playground/spinner.css
  55. 4 0
      website/worker-loader-proxy.js

+ 6 - 1
.vscode/settings.json

@@ -1,4 +1,9 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-	"files.trimTrailingWhitespace": true
+	"files.trimTrailingWhitespace": true,
+	"search.exclude": {
+		"**/node_modules": true,
+		"**/bower_components": true,
+		"**/release": true
+	}
 }

+ 2 - 0
README.md

@@ -6,6 +6,8 @@ The Monaco Editor is the code editor that powers [VS Code](https://github.com/Mi
 
 ## Issues
 
+Please mention the version of the editor when creating issues and the browser you're having trouble in.
+
 This repository contains only the scripts to glue things together, please create issues against the actual repositories where the source code lives:
  * monaco-editor-core: [Issues](https://github.com/Microsoft/vscode) -- [npm module](https://www.npmjs.com/package/monaco-editor-core) (Issues with the editor itself)
  * monaco-typescript: [Issues](https://github.com/Microsoft/monaco-typescript) -- [npm module](https://www.npmjs.com/package/monaco-typescript) (Issues with JavaScript or TypeScript language support)

+ 274 - 0
website/all.css

@@ -0,0 +1,274 @@
+body {
+	padding: 54px 0 40px 0;
+	overflow-y: scroll;
+}
+
+body.home {
+	padding-top: 0;
+}
+
+body,
+input,
+button,
+select,
+textarea,
+.navbar-search .search-query {
+  font: 400 14px/1.4em "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif;
+}
+
+.navbar .nav {
+	float: left;
+	margin-right: 0;
+}
+
+a {
+	color: #0066cc;
+	cursor: pointer;
+}
+
+h1, h2, h3, h4, h5, h6 {
+	letter-spacing: -0.01em;
+	margin: 0;
+	line-height: normal;
+}
+
+/***** Bootstrap Cosmo Overrides *****/
+h1, h2 {
+	font-family: "Segoe UI Light", "Segoe UI", "Open Sans", Calibri, Candara, Arial, sans-serif;
+	font-weight: 300;
+}
+h1 {
+	font-size: 72px;
+	letter-spacing: -0.02em;
+}
+
+.hero-unit h1 {
+	font-size: 48px;
+}
+
+h2 {
+	font-size: 26px;
+}
+
+h3 {
+	font-size: 26px;
+}
+
+h4 {
+	font-size: 16px;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  color: #999;
+}
+
+.alert-heading,
+.alert h1,
+.alert h2,
+.alert h3,
+.alert h4,
+.alert h5,
+.alert h6 {
+  color: inherit;
+}
+
+.alert-info {
+  color: #3a87ad;
+  background-color: #d9edf7;
+}
+
+.navbar-inverse .navbar-inner {
+	background-color: #68217A;
+	filter: none;
+}
+
+.navbar-inverse.home .navbar-inner {
+	background-color: transparent;
+}
+
+.navbar-inverse .btn-navbar {
+	background: transparent;
+	margin-top: 14px;
+}
+
+.navbar-inverse .btn-navbar:hover,
+.navbar-inverse .btn-navbar:focus,
+.navbar-inverse .btn-navbar:active,
+.navbar-inverse .btn-navbar.active,
+.navbar-inverse .btn-navbar.disabled,
+.navbar-inverse .btn-navbar[disabled] {
+	background: #442359;
+}
+
+.btn-primary {
+	background-color: #0072C6;
+}
+
+.home .hero-unit {
+	margin-top: -54px;
+	position: relative;
+	z-index: 100;
+}
+
+.hero-unit {
+	font-weight: normal;
+}
+
+.hero-unit h1 {
+	margin: 0 0 6px;
+}
+
+.nav-tabs > li > a {
+	color: #999;
+}
+
+.nav-tabs > li > a:hover {
+	color: #555;
+}
+
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+	color: #0072C6;
+}
+
+/***** General *****/
+
+body > section > .container {
+	padding-top: 12px;
+}
+
+.masthead {
+	background-color: #0072C6;
+	color: white;
+}
+
+.masthead .hero-unit {
+	padding: 30px 0 0;
+	background: none;
+}
+
+.navbar.home {
+	position: relative;
+	z-index: 500;
+}
+
+.navbar .nav>li>a {
+	text-shadow: none;
+	padding-top: 18px;
+	font-size: 14px;
+	text-transform: uppercase;
+}
+
+.navbar-inverse .nav-collapse .nav>li>a {
+	color: white;
+	padding-left: 0;
+}
+
+.navbar-inverse .nav>li>a.nav-item:focus, .navbar-inverse .nav>li>a.nav-item:hover {
+	background-color: rgba(0,0,0,.12);
+}
+
+.navbar-inverse .nav .active>a.nav-item, .navbar-inverse .nav .active>a.nav-item:hover, .navbar-inverse .nav .active>a.nav-item:focus {
+	color:#fff;
+	background-color: rgba(0,0,0,.24);
+	box-shadow: none;
+}
+
+.navbar .logo {
+	/*background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIxIDBsLTExIDEyLTcuMzMzLTUuNjY2LTIuNjY3IDEuNjgydjEzLjk4NGwyLjY2NyAxLjY2NiA3LjMzMy01LjY2NiAxMSAxMSA3LTN2LTIyLjMzM2wtNy0zLjY2N3ptLTE4IDE5di05bDQgNS00IDR6bTExLTRsNy02djEybC03LTZ6Ii8+PC9zdmc+") left center no-repeat;*/
+	/*padding: 16px 12px 0 34px;*/
+	padding: 16px 12px 0 0px;
+	height: 35px;
+	display: block;
+	float: left;
+}
+
+.navbar .logo a {
+	color: #fff;
+	font-size: 24px;
+	letter-spacing: -1px;
+}
+
+.navbar-fixed-top {
+	z-index: 500;
+}
+
+.flgroup:after {
+	content: "";
+	display: block;
+	visibility: hidden;
+	height: 0;
+	clear: both;
+}
+
+/* Controls */
+
+/* Media Queries */
+@media (min-width: 1200px) {
+	h1, h2 {
+		letter-spacing: -0.04em;
+	}
+
+	.hero-unit h1 {
+		font-size: 72px;
+	}
+
+	h2 {
+		font-size: 36px;
+	}
+
+}
+
+@media (min-width: 980px) {
+	.navbar .nav {
+		float: right;
+	}
+
+	.navbar-inverse .nav-collapse .nav>li>a {
+		padding-left: 15px;
+	}
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+	h1 {
+		letter-spacing: -0.02em;
+	}
+}
+
+@media (max-width: 979px) {
+	body {
+		padding: inherit;
+	}
+
+	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
+		margin-right: inherit;
+		margin-left: inherit;
+		margin-bottom: 0;
+	}
+
+	.navbar-fixed-top .navbar-inner {
+		padding: 0 20px;
+	}
+
+	.navbar .container {
+		width: 724px;
+	}
+}
+
+@media (max-width: 767px) {
+	.navbar .container {
+		width: 100%;
+	}
+}
+
+@media (max-width: 480px) {
+	.navbar .logo a {
+		display: none;
+	}
+}

+ 154 - 0
website/index.html

@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Monaco Editor</title>
+
+	<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
+	<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
+	<link href="./all.css" rel="stylesheet" type="text/css">
+	<link href="./lib/bootstrap-select.min.css" rel="stylesheet" type="text/css">
+
+	<link href="./index/index.css" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+	<nav class="navbar navbar-inverse navbar-fixed-top">
+		<div class="navbar-inner">
+			<div class="container">
+				<div class="logo">
+					<a href="#">Monaco Editor</a>
+				</div>
+				<!-- collapse button for smaller screens -->
+				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				</button>
+
+				<!-- navbar title -->
+				<div class="nav-collapse collapse">
+					<ul class="nav">
+						<li><a class="nav-item" href="index.html">Home</a></li>
+						<li><a class="nav-item" href="playground.html">Playground</a></li>
+						<li><a class="nav-item" href="monarch.html">Monarch</a></li>
+						<li><a class="nav-item" href="https://www.npmjs.com/package/monaco-editor">Download</a></li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</nav>
+	<section class="try">
+		<div class="container">
+			<h3>About</h3>
+			<div class="row">
+				<div class="span12">
+					<br/>
+					<p>The Monaco Editor is the code editor that powers <a href="https://github.com/Microsoft/vscode">VS Code</a>, a good page describing the code editor's features is <a href="https://code.visualstudio.com/docs/editor/editingevolved">here</a>.</p>
+
+					<p>It is licensed under the MIT License and supports IE 9/10/11, Edge, Chrome, Firefox, Safari and Opera.</p>
+				</div>
+			</div>
+			<hr/>
+			<h3>Editor</h3>
+			<div class="editor row">
+				<div class="span3">
+					<h4 title="Syntax colorization plus support for errors, warnings, IntelliSense, formatting and outlining">Rich IntelliSense, Validation</h4>
+					<p>TypeScript, JavaScript, CSS, LESS</p>
+					<br>
+					<h4 title="Syntax colorization">Basic Syntax Colorization</h4>
+					<p>HTML, XML, PHP, C#, C++, Razor, Markdown, Diff, Java, VB, CoffeeScript, Handlebars, Batch, Jade, F#, Lua, Powershell,
+						Python, SASS, R, Objective-C</p>
+					<br>
+					<p>Colorizers are implemented using <a href="monarch.html"
+						target="_blank">Monarch</a>.</p>
+				</div>
+				<div class="span9">
+					<div class="row">
+						<div class="span4">
+							<label class="control-label">Language</label>
+							<select class="language-picker"></select>
+						</div>
+						<div class="span4">
+							<label class="control-label">Theme</label>
+							<select class="theme-picker">
+								<option>Visual Studio</option>
+								<option>Visual Studio Dark</option>
+							</select>
+						</div>
+					</div>
+					<div class="editor-frame">
+						<div class="loading editor" style="display: none;">
+							<div class="progress progress-striped active">
+								<div class="bar"></div>
+							</div>
+						</div>
+						<div id="editor"></div>
+					</div>
+				</div>
+			</div>
+			<hr>
+			<h3>Diff Editor</h3>
+			<div class="editor row">
+				<div class="span3">
+					<h4 title="As you type diffing for all supported languages">Side by side live comparison</h4>
+					<p>Supports all languages out of the box</p>
+				</div>
+				<div class="span9">
+					<div class="row">
+						<div class="span8">
+							<div class="checkbox">
+								<label class="control-label">
+									<input id="inline-diff-checkbox" type="checkbox" value=""> Inline diff
+								</label>
+							</div>
+						</div>
+					</div>
+					<div class="editor-frame">
+						<div class="loading diff-editor" style="display: none;">
+							<div class="progress progress-striped active">
+								<div class="bar"></div>
+							</div>
+						</div>
+						<div id="diff-editor"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</section>
+</div>
+
+	<footer class="container">
+		<hr>
+		<p class="text-center">
+			<small>&copy; 2016 Microsoft</small>
+		</p>
+	</footer>
+
+	<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script src="./lib/bootstrap.min.js"></script>
+	<script src="./lib/bootstrap-select.min.js" type="text/javascript"></script>
+
+	<script type="text/javascript" src="../release/min/vs/loader.js"></script>
+	<script type="text/javascript">
+		window.MonacoEnvironment = {
+			getWorkerUrl: function(workerId, label) {
+				return 'worker-loader-proxy.js';
+			}
+		};
+		require.config({
+			paths: {
+				vs: '../release/min/vs'
+			}
+		});
+	</script>
+	<script src="./index/index.js" type="text/javascript"></script>
+
+</body>
+</html>

+ 308 - 0
website/index/index.css

@@ -0,0 +1,308 @@
+.try [class*="span"] {
+	-webkit-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-moz-box-sizing:	border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+	word-wrap:          break-word;
+}
+
+.try .drops {
+	margin: 0;
+	list-style: none;
+	float: right;
+}
+
+.try .drops li {
+	float: left;
+	width: auto;
+	height: auto;
+	text-indent: 0;
+	font-size: 26px;
+	line-height: normal;
+	margin: 0 12px;
+	cursor: pointer;
+}
+
+.try .drops li a:hover,
+.try .drops li a:focus {
+	text-decoration: none;
+}
+
+.try .drops li h4 {
+	color: #999;
+}
+
+.try .drops li.active h4,
+.try .drops li.active:hover h4 {
+	color: #0072C6;
+}
+
+.try .drops li:hover h4 {
+	color: rgba(0, 114, 198, .5);
+}
+
+.try .editor.row {
+	padding: 18px 0
+}
+
+.try .row h4 {
+	padding-bottom: 6px;
+}
+
+.try .tile {
+	position: relative;
+	height: 72px;
+	border: 1px solid #ddd;
+	text-align: right;
+	overflow: hidden;
+	cursor: pointer;
+
+	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+
+	-webkit-box-sizing:	border-box;
+	-o-box-sizing:		border-box;
+	-moz-box-sizing:	border-box;
+	-ms-box-sizing:		border-box;
+	box-sizing:			border-box;
+}
+
+.try .tile:hover {
+	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
+}
+
+.try .tile h4 {
+	margin: 0;
+	position: absolute;
+	right: 12px;
+	bottom: 12px;
+	z-index: 1;
+}
+
+.try .tile .glyph {
+	position: absolute;
+	left: 12px;
+	bottom: -6px;
+	background: url('../img/cloud.png') no-repeat;
+	background-size: 80px 43px;
+	height: 43px;
+	width: 80px;
+
+	opacity: .5;
+	transition: opacity .5s ease, bottom .5s ease;
+	-webkit-transition: opacity .5s ease, bottom .5s ease;
+}
+
+.try .tile:hover .glyph {
+	opacity: 1;
+	bottom: -2px;
+}
+
+.try .editor.row h4 small {
+	color: #555;
+}
+
+.try .editor.row .control-label {
+	display: inline-block;
+	position: relative;
+	top: -4px;
+	margin-right: 4px;
+}
+
+.try .editor.row .monaco-editor .find-widget input[type="text"] {
+	margin-bottom: 0;
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: none;
+	transition: none;
+}
+
+.try .editor.row .monaco-editor .find-widget .monaco-checkbox .label {
+	min-height: 20px;
+	min-width: 20px;
+}
+
+.try .editor.row .monaco-editor .find-widget .close {
+	float: none;
+	opacity: 1;
+}
+
+.try .editor.row .bootstrap-select {
+	width: 200px;
+}
+
+.try .editor.row .bootstrap-select .btn {
+	background: none;
+	color: #555;
+	border: 1px solid #ddd;
+	width: 100%;
+}
+
+.try .editor.row .bootstrap-select .open .btn {
+	background-color: #0072C6;
+	color: #FFF;
+}
+
+.try .editor.row .bootstrap-select .open .btn .caret {
+	border-top-color: #FFF;
+}
+
+.try .editor.row .bootstrap-select .btn:focus {
+	outline: 0 auto #0072C6 !important;
+}
+
+.try .editor.row .bootstrap-select .btn:active,
+.try .editor.row .bootstrap-select.btn-group.open .dropdown-toggle {
+	-webkit-box-shadow: none;
+	-moz-box-shadow: none;
+	box-shadow: none;
+}
+
+.try .editor.row .bootstrap-select .dropdown-menu > li > a {
+	color: #555;
+}
+
+.try .editor.row .bootstrap-select .dropdown-menu > li > a:hover {
+	background: none;
+	background-color: #CDE7F9;
+}
+
+.try .editor .editor-frame {
+	position: relative;
+}
+
+.try .editor .editor-frame #editor,
+.try .editor .editor-frame #diff-editor {
+	height: 400px;
+	margin-bottom: 10px;
+	border: 1px solid #eee;
+}
+
+.try .editor .editor-frame .loading {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	background-color: rgba(255, 255, 255, .5);
+	margin: 0 auto;
+	display: none;
+	z-index: 100;
+}
+
+.try .editor .editor-frame .progress {
+	width: 50%;
+	margin: 15% auto 0;
+}
+
+.try .editor .editor-frame .progress .bar {
+	width: 100%;
+	background-color: #4bb1cf;
+}
+
+.try .editor .editor-frame #editor .alert,
+.try .editor .editor-frame #diff-editor .alert {
+	margin: 18% auto 0;
+	width: 30%;
+	text-align: center;
+	color: #b94a48;
+	background-color: #f2dede;
+	border-color: #eed3d7;
+}
+
+.try .editor #editor .monaco-editor .row,
+.try .editor #diff-editor .monaco-editor .row {
+	margin-left: 0;
+}
+
+.try .editor .vs.monaco-editor .context-view.monaco-menu-container a {
+	color: #646465;
+}
+
+.try .editor .vs-dark.monaco-editor .context-view.monaco-menu-container a {
+	color: #BBB;
+}
+
+@media (max-width: 767px) {
+	.try .container {
+		margin: 0 24px;
+	}
+
+	.try .tile h4 {
+		right: 6px;
+	}
+
+	.try .editor > .span9 .row .span4 {
+		float: left;
+		width: 50%;
+	}
+
+	.try .editor > .span9 .row .bootstrap-select {
+		display: block;
+		width: 90%;
+	}
+
+	.try .editor > .span9 .row .bootstrap-select .btn {
+		width: 90%;
+	}
+
+	.try .editor h4 {
+		margin-top: 0;
+	}
+}
+
+@media (max-width: 520px) {
+	.try .editor > .span3 p,
+	.try .editor > .span3 h4 {
+		display: none;
+	}
+}
+
+@media (max-width: 320px) {
+	.try .editor > .span9 {
+		display: none;
+	}
+}
+
+/* ------- BEGIN bootstrap fixes for the editor ------- */
+
+.monaco-editor .container:before, .monaco-editor .row:before {
+	content: "";
+	display: inherit;
+}
+
+.monaco-editor .container:after, .monaco-editor .row:after {
+	clear: inherit;
+}
+
+.monaco-editor .container {
+	width: auto;
+	margin: inherit;
+	padding: inherit;
+}
+
+.monaco-editor .close {
+	float: none;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	color: inherit;
+	text-shadow: inherit;
+	opacity: inherit;
+	filter: inherit;
+}
+
+.monaco-editor .row {
+	margin: inherit;
+}
+
+.monaco-editor .invisible {
+	visibility: visible;
+}
+
+/* ------- END bootstrap fixes for the editor ------- */

+ 147 - 0
website/index/index.js

@@ -0,0 +1,147 @@
+/// <reference path="../../release/monaco.d.ts" />
+
+"use strict";
+
+var editor = null, diffEditor = null;
+
+$(document).ready(function() {
+	require(['vs/editor/editor.main'], function () {
+		var MODES = (function() {
+			var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
+			modesIds.sort();
+
+			return modesIds.map(function(modeId) {
+				return {
+					modeId: modeId,
+					sampleURL: 'index/samples/sample.' + modeId + '.txt'
+				};
+			});
+		})();
+
+		for (var i = 0; i < MODES.length; i++) {
+			var o = document.createElement('option');
+			o.textContent = MODES[i].modeId;
+			$(".language-picker").append(o);
+		}
+		$(".language-picker").change(function() {
+			loadSample(MODES[this.selectedIndex]);
+		});
+		$('.language-picker').selectpicker({
+			size: 10
+		});
+		loadSample(MODES[0]);
+
+		$(".theme-picker").change(function() {
+			changeTheme(this.selectedIndex);
+		});
+		$('.theme-picker').selectpicker({
+			size: 2
+		});
+
+		loadDiffSample();
+
+		$('#inline-diff-checkbox').change(function () {
+			diffEditor.updateOptions({
+				renderSideBySide: !$(this).is(':checked')
+			});
+		});
+	});
+
+	window.onresize = function () {
+		if (editor) {
+			editor.layout();
+		}
+		if (diffEditor) {
+			diffEditor.layout();
+		}
+	};
+});
+
+function loadSample(mode) {
+	$.ajax({
+		type: 'GET',
+		url: mode.sampleURL,
+		dataType: 'text',
+		beforeSend: function() {
+			$('.loading.editor').show();
+		},
+		error: function () {
+			$('.loading.editor').fadeOut({ duration: 200 });
+			$('#editor').append('<p class="alert alert-error">Failed to load ' + mode.name + ' sample</p>');
+		}
+	}).done(function (data) {
+		if (!editor) {
+			editor = monaco.editor.create(document.getElementById('editor'), {
+				model: null,
+			});
+		}
+
+		var oldModel = editor.getModel();
+		var newModel = monaco.editor.createModel(data, mode.modeId);
+		editor.setModel(newModel);
+		if (oldModel) {
+			oldModel.dispose();
+		}
+		$('.loading.editor').fadeOut({ duration: 300 });
+	});
+}
+
+function loadDiffSample() {
+
+	var onError = function() {
+		$('.loading.diff-editor').fadeOut({ duration: 200 });
+		$('#diff-editor').append('<p class="alert alert-error">Failed to load diff editor sample</p>');
+	};
+
+	$('.loading.diff-editor').show();
+
+	var lhsData = null, rhsData = null, jsMode = null;
+
+	$.ajax({
+		type: 'GET',
+		url: 'index/samples/diff.lhs.txt',
+		dataType: 'text',
+		error: onError
+	}).done(function (data) {
+		lhsData = data;
+		onProgress();
+	});
+
+	$.ajax({
+		type: 'GET',
+		url: 'index/samples/diff.rhs.txt',
+		dataType: 'text',
+		error: onError
+	}).done(function (data) {
+		rhsData = data;
+		onProgress();
+	});
+
+	function onProgress() {
+		if (lhsData && rhsData) {
+			diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
+				enableSplitViewResizing: false
+			});
+
+			var lhsModel = monaco.editor.createModel(lhsData, 'text/javascript');
+			var rhsModel = monaco.editor.createModel(rhsData, 'text/javascript');
+
+			diffEditor.setModel({
+				original: lhsModel,
+				modified: rhsModel
+			});
+
+			$('.loading.diff-editor').fadeOut({ duration: 300 });
+		}
+	}
+}
+
+function changeTheme(theme) {
+	var newTheme = (theme === 1 ? 'vs-dark' : 'vs');
+	if (editor) {
+		editor.updateOptions({ 'theme' : newTheme });
+	}
+	if (diffEditor) {
+		diffEditor.updateOptions({ 'theme': newTheme });
+	}
+}

+ 216 - 0
website/index/samples/diff.lhs.txt

@@ -0,0 +1,216 @@
+
+/*
+  © Microsoft. All rights reserved.
+
+  This library is supported for use in Windows Tailored Apps only.
+
+  Build: 6.2.8100.0 
+  Version: 0.5 
+*/
+
+(function (global, undefined) {
+	"use strict";
+	undefinedVariable = {};
+	undefinedVariable.prop = 5;
+
+	function initializeProperties(target, members) {
+		var keys = Object.keys(members);
+		var properties;
+		var i, len;
+		for (i = 0, len = keys.length; i < len; i++) {
+			var key = keys[i];
+			var enumerable = key.charCodeAt(0) !== /*_*/95;
+			var member = members[key];
+			if (member && typeof member === 'object') {
+				if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {
+					if (member.enumerable === undefined) {
+						member.enumerable = enumerable;
+					}
+					properties = properties || {};
+					properties[key] = member;
+					continue;
+				} 
+			}
+			// These next lines will be deleted
+			if (!enumerable) {
+				properties = properties || {};
+				properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true }
+				continue;
+			}
+			target[key] = member;
+		}
+		if (properties) {
+			Object.defineProperties(target, properties);
+		}
+	}
+
+	(function (rootNamespace) {
+
+		// Create the rootNamespace in the global namespace
+		if (!global[rootNamespace]) {
+			global[rootNamespace] = Object.create(Object.prototype);
+		}
+
+		// Cache the rootNamespace we just created in a local variable
+		var _rootNamespace = global[rootNamespace];
+		if (!_rootNamespace.Namespace) {
+			_rootNamespace.Namespace = Object.create(Object.prototype);
+		}
+
+		function defineWithParent(parentNamespace, name, members) {
+			/// <summary locid="1">
+			/// Defines a new namespace with the specified name, under the specified parent namespace.
+			/// </summary>
+			/// <param name="parentNamespace" type="Object" locid="2">
+			/// The parent namespace which will contain the new namespace.
+			/// </param>
+			/// <param name="name" type="String" locid="3">
+			/// Name of the new namespace.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			var currentNamespace = parentNamespace,
+				namespaceFragments = name.split(".");
+
+			for (var i = 0, len = namespaceFragments.length; i < len; i++) {
+				var namespaceName = namespaceFragments[i];
+				if (!currentNamespace[namespaceName]) {
+					Object.defineProperty(currentNamespace, namespaceName, 
+						{ value: {}, writable: false, enumerable: true, configurable: true }
+					);
+				}
+				currentNamespace = currentNamespace[namespaceName];
+			}
+
+			if (members) {
+				initializeProperties(currentNamespace, members);
+			}
+
+			return currentNamespace;
+		}
+
+		function define(name, members) {
+			/// <summary locid="6">
+			/// Defines a new namespace with the specified name.
+			/// </summary>
+			/// <param name="name" type="String" locid="7">
+			/// Name of the namespace.  This could be a dot-separated nested name.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			return defineWithParent(global, name, members);
+		}
+
+		// Establish members of the "WinJS.Namespace" namespace
+		Object.defineProperties(_rootNamespace.Namespace, {
+
+			defineWithParent: { value: defineWithParent, writable: true, enumerable: true },
+
+			define: { value: define, writable: true, enumerable: true }
+
+		});
+
+	})("WinJS");
+
+	(function (WinJS) {
+
+		function define(constructor, instanceMembers, staticMembers) {
+			/// <summary locid="8">
+			/// Defines a class using the given constructor and with the specified instance members.
+			/// </summary>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			if (instanceMembers) {
+				initializeProperties(constructor.prototype, instanceMembers);
+			}
+			if (staticMembers) {
+				initializeProperties(constructor, staticMembers);
+			}
+			return constructor;
+		}
+
+		function derive(baseClass, constructor, instanceMembers, staticMembers) {
+			/// <summary locid="13">
+			/// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.
+			/// </summary>
+			/// <param name="baseClass" type="Function" locid="14">
+			/// The class to inherit from.
+			/// </param>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			if (baseClass) {
+				constructor = constructor || function () { };
+				var basePrototype = baseClass.prototype;
+				constructor.prototype = Object.create(basePrototype);
+				Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });
+				Object.defineProperty(constructor.prototype, "constructor", { value: constructor });
+				if (instanceMembers) {
+					initializeProperties(constructor.prototype, instanceMembers);
+				}
+				if (staticMembers) {
+					initializeProperties(constructor, staticMembers);
+				}
+				return constructor;
+			} else {
+				return define(constructor, instanceMembers, staticMembers);
+			}
+		}
+
+		function mix(constructor) {
+			/// <summary locid="15">
+			/// Defines a class using the given constructor and the union of the set of instance members
+			/// specified by all the mixin objects.  The mixin parameter list can be of variable length.
+			/// </summary>
+			/// <param name="constructor" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <returns locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			var i, len;
+			for (i = 0, len = arguments.length; i < len; i++) {
+				initializeProperties(constructor.prototype, arguments[i]);
+			}
+			return constructor;
+		}
+
+		// Establish members of "WinJS.Class" namespace
+		WinJS.Namespace.define("WinJS.Class", {
+			define: define,
+			derive: derive,
+			mix: mix
+		});
+
+	})(WinJS);
+
+})(this);

+ 213 - 0
website/index/samples/diff.rhs.txt

@@ -0,0 +1,213 @@
+
+/*
+  © Microsoft. All rights reserved.
+
+  This library is supported for use in Windows Tailored Apps only.
+
+  Build: 6.2.8100.0 
+  Version: 0.5 
+*/
+
+// Here are some inserted lines
+// with some extra comments
+	
+(function (global, undefined) {
+	"use strict";
+	var definedVariable = {};
+	definedVariable.prop = 5;
+
+	function initializeProperties(target, members) {
+		var keys = Object.keys(members);
+		var properties;
+		var i, len;
+		for (i = 0, len = keys.length; i < len; i++) {
+			var key = keys[i];
+			var enumerable = key.charCodeAt(0) !== /*_*/95;
+			var member = members[key];
+			if (member && typeof member === 'object') {
+				if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {
+					if (member.enumerable === undefined) {
+						member.enumerable = enumerable;
+					}
+					properties = properties || {};
+					properties[key] = member;
+					continue;
+				} 
+			}
+			target[key] = member;
+		}
+		if (properties) {
+			Object.defineProperties(target, properties);
+		}
+	}
+
+	(function (rootNamespace) {
+
+		// Create the rootNamespace in the global namespace
+		if (!global[rootNamespace]) {
+			global[rootNamespace] = Object.create(Object.prototype);
+		}
+
+		// Cache the rootNamespace we just created in a local variable
+		var _rootNamespace = global[rootNamespace];
+		if (!_rootNamespace.Namespace) {
+			_rootNamespace.Namespace = Object.create(Object.prototype);
+		}
+
+		function defineWithParent(parentNamespace, name, members) {
+			/// <summary locid="1">
+			/// Defines a new namespace with the specified name, under the specified parent namespace.
+			/// </summary>
+			/// <param name="parentNamespace" type="Object" locid="2">
+			/// The parent namespace which will contain the new namespace.
+			/// </param>
+			/// <param name="name" type="String" locid="3">
+			/// Name of the new namespace.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			var currentNamespace = parentNamespace,
+				namespaceFragments = name.split(".");
+
+			for (var i = 0, len = namespaceFragments.length; i < len; i++) {
+				var namespaceName = namespaceFragments[i];
+				if (!currentNamespace[namespaceName]) {
+					Object.defineProperty(currentNamespace, namespaceName, 
+						{ value: {}, writable: false, enumerable: true, configurable: true }
+					);
+				}
+				currentNamespace = currentNamespace[namespaceName];
+			}
+
+			if (members) {
+				initializeProperties(currentNamespace, members);
+			}
+
+			return currentNamespace;
+		}
+
+		function define(name, members) {
+			/// <summary locid="6">
+			/// Defines a new namespace with the specified name.
+			/// </summary>
+			/// <param name="name" type="String" locid="7">
+			/// Name of the namespace.  This could be a dot-separated nested name.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			return defineWithParent(global, name, members);
+		}
+
+		// Establish members of the "WinJS.Namespace" namespace
+		Object.defineProperties(_rootNamespace.Namespace, {
+
+			defineWithParent: { value: defineWithParent, writable: true, enumerable: true },
+
+			define: { value: define, writable: true, enumerable: true }
+
+		});
+
+	})("WinJS");
+
+	(function (WinJS) {
+
+		function define(constructor, instanceMembers, staticMembers) {
+			/// <summary locid="8">
+			/// Defines a class using the given constructor and with the specified instance members.
+			/// </summary>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			if (instanceMembers) {
+				initializeProperties(constructor.prototype, instanceMembers);
+			}
+			if (staticMembers) {
+				initializeProperties(constructor, staticMembers);
+			}
+			return constructor;
+		}
+
+		function derive(baseClass, constructor, instanceMembers, staticMembers) {
+			/// <summary locid="13">
+			/// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.
+			/// </summary>
+			/// <param name="baseClass" type="Function" locid="14">
+			/// The class to inherit from.
+			/// </param>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			if (baseClass) {
+				constructor = constructor || function () { };
+				var basePrototype = baseClass.prototype;
+				constructor.prototype = Object.create(basePrototype);
+				Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });
+				Object.defineProperty(constructor.prototype, "constructor", { value: constructor });
+				if (instanceMembers) {
+					initializeProperties(constructor.prototype, instanceMembers);
+				}
+				if (staticMembers) {
+					initializeProperties(constructor, staticMembers);
+				}
+				return constructor;
+			} else {
+				return define(constructor, instanceMembers, staticMembers);
+			}
+		}
+
+		function mix(constructor) {
+			/// <summary locid="15">
+			/// Defines a class using the given constructor and the union of the set of instance members
+			/// specified by all the mixin objects.  The mixin parameter list can be of variable length.
+			/// </summary>
+			/// <param name="constructor" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <returns locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			var i, len;
+			for (i = 0, len = arguments.length; i < len; i++) {
+				initializeProperties(constructor.prototype, arguments[i]);
+			}
+			return constructor;
+		}
+
+		// Establish members of "WinJS.Class" namespace
+		WinJS.Namespace.define("WinJS.Class", {
+			define: define,
+			derive: derive,
+			mix: mix
+		});
+
+	})(WinJS);
+
+})(this);

+ 13 - 0
website/index/samples/sample.bat.txt

@@ -0,0 +1,13 @@
+rem *******Begin Comment**************
+rem This program starts the superapp batch program on the network,
+rem directs the output to a file, and displays the file
+rem in Notepad.
+rem *******End Comment**************
+@echo off
+if exist C:\output.txt goto EMPTYEXISTS
+setlocal
+	path=g:\programs\superapp;%path%
+	call superapp>C:\output.txt
+endlocal
+:EMPTYEXISTS
+start notepad c:\output.txt

+ 246 - 0
website/index/samples/sample.c.txt

@@ -0,0 +1,246 @@
+#include "pch.h"
+#include "Direct3DBase.h"
+
+using namespace Microsoft::WRL;
+using namespace Windows::UI::Core;
+using namespace Windows::Foundation;
+
+// Constructor.
+Direct3DBase::Direct3DBase()
+{
+}
+
+// Initialize the Direct3D resources required to run.
+void Direct3DBase::Initialize(CoreWindow^ window)
+{
+    m_window = window;
+    
+    CreateDeviceResources();
+    CreateWindowSizeDependentResources();
+}
+
+// These are the resources that depend on the device.
+void Direct3DBase::CreateDeviceResources()
+{
+    // This flag adds support for surfaces with a different color channel ordering than the API default.
+    // It is recommended usage, and is required for compatibility with Direct2D.
+    UINT creationFlags = D3D11_CREATE_DEVICE_BGRA_SUPPORT;
+
+#if defined(_DEBUG)
+    // If the project is in a debug build, enable debugging via SDK Layers with this flag.
+    creationFlags |= D3D11_CREATE_DEVICE_DEBUG;
+#endif
+
+    // This array defines the set of DirectX hardware feature levels this app will support.
+    // Note the ordering should be preserved.
+    // Don't forget to declare your application's minimum required feature level in its
+    // description.  All applications are assumed to support 9.1 unless otherwise stated.
+    D3D_FEATURE_LEVEL featureLevels[] = 
+    {
+        D3D_FEATURE_LEVEL_11_1,
+        D3D_FEATURE_LEVEL_11_0,
+        D3D_FEATURE_LEVEL_10_1,
+        D3D_FEATURE_LEVEL_10_0,
+        D3D_FEATURE_LEVEL_9_3,
+        D3D_FEATURE_LEVEL_9_2,
+        D3D_FEATURE_LEVEL_9_1
+    };
+
+    // Create the DX11 API device object, and get a corresponding context.
+    ComPtr<ID3D11Device> device;
+    ComPtr<ID3D11DeviceContext> context;
+    DX::ThrowIfFailed(
+        D3D11CreateDevice(
+            nullptr,                    // specify null to use the default adapter
+            D3D_DRIVER_TYPE_HARDWARE,
+            nullptr,                    // leave as nullptr unless software device
+            creationFlags,              // optionally set debug and Direct2D compatibility flags
+            featureLevels,              // list of feature levels this app can support
+            ARRAYSIZE(featureLevels),   // number of entries in above list
+            D3D11_SDK_VERSION,          // always set this to D3D11_SDK_VERSION
+            &device,                    // returns the Direct3D device created
+            &m_featureLevel,            // returns feature level of device created
+            &context                    // returns the device immediate context
+            )
+        );
+
+    // Get the DirectX11.1 device by QI off the DirectX11 one.
+    DX::ThrowIfFailed(
+        device.As(&m_d3dDevice)
+        );
+
+    // And get the corresponding device context in the same way.
+    DX::ThrowIfFailed(
+        context.As(&m_d3dContext)
+        );
+}
+
+// Allocate all memory resources that change on a window SizeChanged event.
+void Direct3DBase::CreateWindowSizeDependentResources()
+{ 
+    // Store the window bounds so the next time we get a SizeChanged event we can
+    // avoid rebuilding everything if the size is identical.
+    m_windowBounds = m_window->Bounds;
+
+    // If the swap chain already exists, resize it.
+    if(m_swapChain != nullptr)
+    {
+        DX::ThrowIfFailed(
+            m_swapChain->ResizeBuffers(2, 0, 0, DXGI_FORMAT_B8G8R8A8_UNORM, 0)
+            );
+    }
+    // Otherwise, create a new one.
+    else
+    {
+        // Create a descriptor for the swap chain.
+        DXGI_SWAP_CHAIN_DESC1 swapChainDesc = {0};
+        swapChainDesc.Width = 0;                                     // use automatic sizing
+        swapChainDesc.Height = 0;
+        swapChainDesc.Format = DXGI_FORMAT_B8G8R8A8_UNORM;           // this is the most common swapchain format
+        swapChainDesc.Stereo = false; 
+        swapChainDesc.SampleDesc.Count = 1;                          // don't use multi-sampling
+        swapChainDesc.SampleDesc.Quality = 0;
+        swapChainDesc.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
+        swapChainDesc.BufferCount = 2;                               // use two buffers to enable flip effect
+        swapChainDesc.Scaling = DXGI_SCALING_NONE;
+        swapChainDesc.SwapEffect = DXGI_SWAP_EFFECT_FLIP_SEQUENTIAL; // we recommend using this swap effect for all applications
+        swapChainDesc.Flags = 0;
+
+        // Once the desired swap chain description is configured, it must be created on the same adapter as our D3D Device
+
+        // First, retrieve the underlying DXGI Device from the D3D Device
+        ComPtr<IDXGIDevice1>  dxgiDevice;
+        DX::ThrowIfFailed(
+            m_d3dDevice.As(&dxgiDevice)
+            );
+
+        // Identify the physical adapter (GPU or card) this device is running on.
+        ComPtr<IDXGIAdapter> dxgiAdapter;
+        DX::ThrowIfFailed(
+            dxgiDevice->GetAdapter(&dxgiAdapter)
+            );
+
+        // And obtain the factory object that created it.
+        ComPtr<IDXGIFactory2> dxgiFactory;
+        DX::ThrowIfFailed(
+            dxgiAdapter->GetParent(
+                __uuidof(IDXGIFactory2), 
+                &dxgiFactory
+                )
+            );
+
+		Windows::UI::Core::CoreWindow^ p = m_window.Get();
+
+        // Create a swap chain for this window from the DXGI factory.
+        DX::ThrowIfFailed(
+            dxgiFactory->CreateSwapChainForCoreWindow(
+                m_d3dDevice.Get(),
+                reinterpret_cast<IUnknown*>(p),
+                &swapChainDesc,
+                nullptr,    // allow on all displays
+                &m_swapChain
+                )
+            );
+            
+        // Ensure that DXGI does not queue more than one frame at a time. This both reduces 
+        // latency and ensures that the application will only render after each VSync, minimizing 
+        // power consumption.
+        DX::ThrowIfFailed(
+            dxgiDevice->SetMaximumFrameLatency(1)
+            );
+    }
+    
+    // Obtain the backbuffer for this window which will be the final 3D rendertarget.
+    ComPtr<ID3D11Texture2D> backBuffer;
+    DX::ThrowIfFailed(
+        m_swapChain->GetBuffer(
+            0,
+            __uuidof(ID3D11Texture2D),
+            &backBuffer
+            )
+        );
+
+    // Create a view interface on the rendertarget to use on bind.
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateRenderTargetView(
+            backBuffer.Get(),
+            nullptr,
+            &m_renderTargetView
+            )
+        );
+
+    // Cache the rendertarget dimensions in our helper class for convenient use.
+    D3D11_TEXTURE2D_DESC backBufferDesc;
+    backBuffer->GetDesc(&backBufferDesc);
+    m_renderTargetSize.Width  = static_cast<float>(backBufferDesc.Width);
+    m_renderTargetSize.Height = static_cast<float>(backBufferDesc.Height);
+
+    // Create a descriptor for the depth/stencil buffer.
+    CD3D11_TEXTURE2D_DESC depthStencilDesc(
+        DXGI_FORMAT_D24_UNORM_S8_UINT, 
+        backBufferDesc.Width,
+        backBufferDesc.Height,
+        1,
+        1,
+        D3D11_BIND_DEPTH_STENCIL);
+
+    // Allocate a 2-D surface as the depth/stencil buffer.
+    ComPtr<ID3D11Texture2D> depthStencil;
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateTexture2D(
+            &depthStencilDesc,
+            nullptr,
+            &depthStencil
+            )
+        );
+
+    // Create a DepthStencil view on this surface to use on bind.
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateDepthStencilView(
+            depthStencil.Get(),
+            &CD3D11_DEPTH_STENCIL_VIEW_DESC(D3D11_DSV_DIMENSION_TEXTURE2D),
+            &m_depthStencilView
+            )
+        );
+
+    // Create a viewport descriptor of the full window size.
+    CD3D11_VIEWPORT viewPort(
+        0.0f,
+        0.0f,
+        static_cast<float>(backBufferDesc.Width),
+        static_cast<float>(backBufferDesc.Height)
+        );
+        
+    // Set the current viewport using the descriptor.
+    m_d3dContext->RSSetViewports(1, &viewPort);
+}
+
+void Direct3DBase::UpdateForWindowSizeChange()
+{
+    if (m_window->Bounds.Width  != m_windowBounds.Width ||
+        m_window->Bounds.Height != m_windowBounds.Height)
+    {
+        m_renderTargetView = nullptr;
+        m_depthStencilView = nullptr;
+        CreateWindowSizeDependentResources();
+    }
+}
+
+void Direct3DBase::Present()
+{
+    // The first argument instructs DXGI to block until VSync, putting the application
+    // to sleep until the next VSync. This ensures we don't waste any cycles rendering
+    // frames that will never be displayed to the screen.
+    HRESULT hr = m_swapChain->Present(1, 0);
+
+    // If the device was removed either by a disconnect or a driver upgrade, we 
+    // must completely reinitialize the renderer.
+    if (hr == DXGI_ERROR_DEVICE_REMOVED || hr == DXGI_ERROR_DEVICE_RESET)
+    {
+        Initialize(m_window.Get());
+    }
+    else
+    {
+        DX::ThrowIfFailed(hr);
+    }
+}

+ 28 - 0
website/index/samples/sample.coffeescript.txt

@@ -0,0 +1,28 @@
+"""
+A CoffeeScript sample.
+"""
+
+class Vehicle
+  constructor: (@name) =>
+  
+  drive: () =>
+    alert "Conducting #{@name}"
+
+class Car extends Vehicle
+  drive: () =>
+    alert "Driving #{@name}"
+
+c = new Car "Brandie"
+
+while notAtDestination()
+  c.drive()
+
+raceVehicles = (new Car for i in [1..100])
+
+startRace = (vehicles) -> [vehicle.drive() for vehicle in vehicles]
+
+fancyRegExp = ///
+	(\d+)	# numbers
+	(\w*)	# letters
+	$		# the end
+///

+ 246 - 0
website/index/samples/sample.cpp.txt

@@ -0,0 +1,246 @@
+#include "pch.h"
+#include "Direct3DBase.h"
+
+using namespace Microsoft::WRL;
+using namespace Windows::UI::Core;
+using namespace Windows::Foundation;
+
+// Constructor.
+Direct3DBase::Direct3DBase()
+{
+}
+
+// Initialize the Direct3D resources required to run.
+void Direct3DBase::Initialize(CoreWindow^ window)
+{
+    m_window = window;
+    
+    CreateDeviceResources();
+    CreateWindowSizeDependentResources();
+}
+
+// These are the resources that depend on the device.
+void Direct3DBase::CreateDeviceResources()
+{
+    // This flag adds support for surfaces with a different color channel ordering than the API default.
+    // It is recommended usage, and is required for compatibility with Direct2D.
+    UINT creationFlags = D3D11_CREATE_DEVICE_BGRA_SUPPORT;
+
+#if defined(_DEBUG)
+    // If the project is in a debug build, enable debugging via SDK Layers with this flag.
+    creationFlags |= D3D11_CREATE_DEVICE_DEBUG;
+#endif
+
+    // This array defines the set of DirectX hardware feature levels this app will support.
+    // Note the ordering should be preserved.
+    // Don't forget to declare your application's minimum required feature level in its
+    // description.  All applications are assumed to support 9.1 unless otherwise stated.
+    D3D_FEATURE_LEVEL featureLevels[] = 
+    {
+        D3D_FEATURE_LEVEL_11_1,
+        D3D_FEATURE_LEVEL_11_0,
+        D3D_FEATURE_LEVEL_10_1,
+        D3D_FEATURE_LEVEL_10_0,
+        D3D_FEATURE_LEVEL_9_3,
+        D3D_FEATURE_LEVEL_9_2,
+        D3D_FEATURE_LEVEL_9_1
+    };
+
+    // Create the DX11 API device object, and get a corresponding context.
+    ComPtr<ID3D11Device> device;
+    ComPtr<ID3D11DeviceContext> context;
+    DX::ThrowIfFailed(
+        D3D11CreateDevice(
+            nullptr,                    // specify null to use the default adapter
+            D3D_DRIVER_TYPE_HARDWARE,
+            nullptr,                    // leave as nullptr unless software device
+            creationFlags,              // optionally set debug and Direct2D compatibility flags
+            featureLevels,              // list of feature levels this app can support
+            ARRAYSIZE(featureLevels),   // number of entries in above list
+            D3D11_SDK_VERSION,          // always set this to D3D11_SDK_VERSION
+            &device,                    // returns the Direct3D device created
+            &m_featureLevel,            // returns feature level of device created
+            &context                    // returns the device immediate context
+            )
+        );
+
+    // Get the DirectX11.1 device by QI off the DirectX11 one.
+    DX::ThrowIfFailed(
+        device.As(&m_d3dDevice)
+        );
+
+    // And get the corresponding device context in the same way.
+    DX::ThrowIfFailed(
+        context.As(&m_d3dContext)
+        );
+}
+
+// Allocate all memory resources that change on a window SizeChanged event.
+void Direct3DBase::CreateWindowSizeDependentResources()
+{ 
+    // Store the window bounds so the next time we get a SizeChanged event we can
+    // avoid rebuilding everything if the size is identical.
+    m_windowBounds = m_window->Bounds;
+
+    // If the swap chain already exists, resize it.
+    if(m_swapChain != nullptr)
+    {
+        DX::ThrowIfFailed(
+            m_swapChain->ResizeBuffers(2, 0, 0, DXGI_FORMAT_B8G8R8A8_UNORM, 0)
+            );
+    }
+    // Otherwise, create a new one.
+    else
+    {
+        // Create a descriptor for the swap chain.
+        DXGI_SWAP_CHAIN_DESC1 swapChainDesc = {0};
+        swapChainDesc.Width = 0;                                     // use automatic sizing
+        swapChainDesc.Height = 0;
+        swapChainDesc.Format = DXGI_FORMAT_B8G8R8A8_UNORM;           // this is the most common swapchain format
+        swapChainDesc.Stereo = false; 
+        swapChainDesc.SampleDesc.Count = 1;                          // don't use multi-sampling
+        swapChainDesc.SampleDesc.Quality = 0;
+        swapChainDesc.BufferUsage = DXGI_USAGE_RENDER_TARGET_OUTPUT;
+        swapChainDesc.BufferCount = 2;                               // use two buffers to enable flip effect
+        swapChainDesc.Scaling = DXGI_SCALING_NONE;
+        swapChainDesc.SwapEffect = DXGI_SWAP_EFFECT_FLIP_SEQUENTIAL; // we recommend using this swap effect for all applications
+        swapChainDesc.Flags = 0;
+
+        // Once the desired swap chain description is configured, it must be created on the same adapter as our D3D Device
+
+        // First, retrieve the underlying DXGI Device from the D3D Device
+        ComPtr<IDXGIDevice1>  dxgiDevice;
+        DX::ThrowIfFailed(
+            m_d3dDevice.As(&dxgiDevice)
+            );
+
+        // Identify the physical adapter (GPU or card) this device is running on.
+        ComPtr<IDXGIAdapter> dxgiAdapter;
+        DX::ThrowIfFailed(
+            dxgiDevice->GetAdapter(&dxgiAdapter)
+            );
+
+        // And obtain the factory object that created it.
+        ComPtr<IDXGIFactory2> dxgiFactory;
+        DX::ThrowIfFailed(
+            dxgiAdapter->GetParent(
+                __uuidof(IDXGIFactory2), 
+                &dxgiFactory
+                )
+            );
+
+		Windows::UI::Core::CoreWindow^ p = m_window.Get();
+
+        // Create a swap chain for this window from the DXGI factory.
+        DX::ThrowIfFailed(
+            dxgiFactory->CreateSwapChainForCoreWindow(
+                m_d3dDevice.Get(),
+                reinterpret_cast<IUnknown*>(p),
+                &swapChainDesc,
+                nullptr,    // allow on all displays
+                &m_swapChain
+                )
+            );
+            
+        // Ensure that DXGI does not queue more than one frame at a time. This both reduces 
+        // latency and ensures that the application will only render after each VSync, minimizing 
+        // power consumption.
+        DX::ThrowIfFailed(
+            dxgiDevice->SetMaximumFrameLatency(1)
+            );
+    }
+    
+    // Obtain the backbuffer for this window which will be the final 3D rendertarget.
+    ComPtr<ID3D11Texture2D> backBuffer;
+    DX::ThrowIfFailed(
+        m_swapChain->GetBuffer(
+            0,
+            __uuidof(ID3D11Texture2D),
+            &backBuffer
+            )
+        );
+
+    // Create a view interface on the rendertarget to use on bind.
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateRenderTargetView(
+            backBuffer.Get(),
+            nullptr,
+            &m_renderTargetView
+            )
+        );
+
+    // Cache the rendertarget dimensions in our helper class for convenient use.
+    D3D11_TEXTURE2D_DESC backBufferDesc;
+    backBuffer->GetDesc(&backBufferDesc);
+    m_renderTargetSize.Width  = static_cast<float>(backBufferDesc.Width);
+    m_renderTargetSize.Height = static_cast<float>(backBufferDesc.Height);
+
+    // Create a descriptor for the depth/stencil buffer.
+    CD3D11_TEXTURE2D_DESC depthStencilDesc(
+        DXGI_FORMAT_D24_UNORM_S8_UINT, 
+        backBufferDesc.Width,
+        backBufferDesc.Height,
+        1,
+        1,
+        D3D11_BIND_DEPTH_STENCIL);
+
+    // Allocate a 2-D surface as the depth/stencil buffer.
+    ComPtr<ID3D11Texture2D> depthStencil;
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateTexture2D(
+            &depthStencilDesc,
+            nullptr,
+            &depthStencil
+            )
+        );
+
+    // Create a DepthStencil view on this surface to use on bind.
+    DX::ThrowIfFailed(
+        m_d3dDevice->CreateDepthStencilView(
+            depthStencil.Get(),
+            &CD3D11_DEPTH_STENCIL_VIEW_DESC(D3D11_DSV_DIMENSION_TEXTURE2D),
+            &m_depthStencilView
+            )
+        );
+
+    // Create a viewport descriptor of the full window size.
+    CD3D11_VIEWPORT viewPort(
+        0.0f,
+        0.0f,
+        static_cast<float>(backBufferDesc.Width),
+        static_cast<float>(backBufferDesc.Height)
+        );
+        
+    // Set the current viewport using the descriptor.
+    m_d3dContext->RSSetViewports(1, &viewPort);
+}
+
+void Direct3DBase::UpdateForWindowSizeChange()
+{
+    if (m_window->Bounds.Width  != m_windowBounds.Width ||
+        m_window->Bounds.Height != m_windowBounds.Height)
+    {
+        m_renderTargetView = nullptr;
+        m_depthStencilView = nullptr;
+        CreateWindowSizeDependentResources();
+    }
+}
+
+void Direct3DBase::Present()
+{
+    // The first argument instructs DXGI to block until VSync, putting the application
+    // to sleep until the next VSync. This ensures we don't waste any cycles rendering
+    // frames that will never be displayed to the screen.
+    HRESULT hr = m_swapChain->Present(1, 0);
+
+    // If the device was removed either by a disconnect or a driver upgrade, we 
+    // must completely reinitialize the renderer.
+    if (hr == DXGI_ERROR_DEVICE_REMOVED || hr == DXGI_ERROR_DEVICE_RESET)
+    {
+        Initialize(m_window.Get());
+    }
+    else
+    {
+        DX::ThrowIfFailed(hr);
+    }
+}

+ 23 - 0
website/index/samples/sample.csharp.txt

@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace VS
+{
+	class Program
+	{
+		static void Main(string[] args)
+		{
+			ProcessStartInfo si = new ProcessStartInfo();
+			float load= 3.2e02f;
+
+			si.FileName = @"tools\\node.exe";
+			si.Arguments = "tools\\simpleserver.js";
+
+			Process.Start(si);
+		}
+	}
+}

+ 828 - 0
website/index/samples/sample.css.txt

@@ -0,0 +1,828 @@
+html {
+    background-color: #e2e2e2;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #fff;
+    border-top: solid 10px #000;
+    color: #333;
+    font-size: .85em;
+    font-family: "Segoe UI","HelveticaNeue-Light", sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+a:link, a:visited, 
+a:active, a:hover {
+    color: #333;
+    outline: none;
+    padding-left: 0;
+    padding-right: 3px;
+    text-decoration: none;
+        
+}
+
+
+a:hover {
+    background-color: #c7d1d6;
+}
+
+
+header, footer, hgroup
+nav, section {
+    display: block;
+}
+
+.float-left {
+    float: left;
+}
+
+.float-right {
+    float: right;
+}
+
+.highlight {
+/*    background-color: #a6dbed;
+    padding-left: 5px;
+    padding-right: 5px;*/
+}
+
+.clear-fix:after {
+    content: ".";
+    clear: both;
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+
+h1, h2, h3, 
+h4, h5, h6 {
+    color: #000;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    
+}
+
+h1 {
+    font-size: 2em; 
+}
+
+h2 {
+    font-size: 1.75em;
+}
+
+h3 {
+    font-size: 1.2em;
+}
+
+h4 {
+    font-size: 1.1em;
+}
+
+h5, h6 {
+    font-size: 1em;
+}
+
+
+.tile {
+    /* 2px solid #7ac0da; */
+    border: 0;
+    
+    float: left;
+    width: 200px;
+    height: 325px;
+    
+    padding: 5px;
+    margin-right: 5px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    -webkit-perspective: 0;
+    -webkit-transform-style: preserve-3d;
+    -webkit-transition: -webkit-transform 0.2s;
+    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    background-position: center center;
+    background-repeat: no-repeat;
+    
+    background-color:  #fff;
+}
+
+.tile-item {
+    /* 2px solid #7ac0da; */
+    border-color: inherit;
+    float: left;
+    width: 50px;
+    height: 70px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    background-image: url('../Images/documents.png');
+    background-repeat: no-repeat;
+    
+}
+
+.tile-wrapper {
+    width: 100%;
+    font-family: "Segoe UI" , Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 21px;
+    font-size: 14px;
+}
+
+a.blue-box {
+    font-size: 28px;
+    height: 100px;
+    display: block;
+    border-style: solid;
+    border-width: 1px 1px 4px 1px;
+    border-color: #C0C0C0 #C0C0C0 #8ABAE4 #C0C0C0;
+    padding-top: 15px;
+    padding-left: 15px;
+}
+
+    a.blue-box:hover {
+    border: 4px solid #8ABAE4; 
+    padding-top: 12px;
+    padding-left: 12px;
+    background-color: #FFFFFF;
+}
+    
+a.green-box {
+    font-size: 28px;
+    height: 100px;
+    display: block;
+    border-style: solid;
+    border-width: 1px 1px 4px 1px;
+    border-color: #C0C0C0 #C0C0C0 #9CCF42 #C0C0C0;
+    padding-top: 15px;
+    padding-left: 15px;
+}
+
+    a.green-box:hover {
+        border: 4px solid #9CCF42; 
+        padding-top: 12px;
+        padding-left: 12px;
+        background-color: #FFFFFF;
+}
+
+
+a.green-box2 {
+    font-size: 14px;
+    height: 48px;
+    width: 48px;
+    display: block; /* border-color: #C0C0C0; */
+    padding-top: 6px;
+    font-weight: bold;
+    
+}
+
+    a.green-box2:hover {
+    border: solid #8ABAE4;
+    padding-top: 0px;
+    padding-left: 0px;
+    background-image: url('../Images/documents.png');
+    background-color: #EFEFEF;
+}
+
+a.yellow-box {
+    font-size: 28px;
+    height: 100px;
+    display: block;
+    border-style: solid;
+    border-width: 1px 1px 4px 1px;
+    border-color: #C0C0C0 #C0C0C0 #DECF6B #C0C0C0;
+    padding-top: 15px;
+    padding-left: 15px;
+}
+
+    a.yellow-box:hover {
+        border: 4px solid #DECF6B; 
+        padding-top: 12px;
+        padding-left: 12px;
+        background-color: #FFFFFF;
+}
+    
+    
+a.red-box {
+    font-size: 28px;
+    height: 100px;
+    display: block;
+    border-style: solid;
+    border-width: 1px 1px 4px 1px;
+    border-color: #C0C0C0 #C0C0C0 #F79E84 #C0C0C0;
+    padding-top: 15px;
+    padding-left: 15px;
+}
+
+    a.red-box:hover {
+    border: 4px solid #F79E84; 
+    padding-top: 12px;
+    padding-left: 12px;
+    background-color: #FFFFFF;
+}
+    
+/* main layout 
+----------------------------------------------------------*/
+.content-wrapper {
+    margin: 0 auto;
+    max-width: 960px;
+}
+
+#body {
+    background-color: #efeeef;
+    clear: both;
+    padding-bottom: 35px;
+}
+
+    .main-content {
+        background: url("../images/accent.png") no-repeat;
+        padding-left: 10px;
+        padding-top: 30px;
+    }
+
+    .featured + .main-content {
+        background: url("../images/heroaccent.png") no-repeat;
+    }
+
+footer {
+    clear: both;
+    background-color: #e2e2e2;
+    font-size: .8em;
+    height: 100px;
+}
+
+
+/* site title
+----------------------------------------------------------*/
+.site-title {
+    color: #0066CC; /* font-family: Rockwell, Consolas, "Courier New", Courier, monospace; */
+    font-size: 3.3em;
+    margin-top: 40px;
+    margin-bottom: 0;
+}
+
+.site-title a, .site-title a:hover, .site-title a:active  {
+    background: none;
+    color: #0066CC;
+    outline: none;
+    text-decoration: none;
+}
+
+
+/* login  
+----------------------------------------------------------*/
+#login {
+    display: block;
+    font-size: .85em;
+    margin-top: 20px;
+    text-align: right;
+}
+
+    #login a {
+        background-color: #d3dce0;
+        margin-left: 10px;
+        margin-right: 3px;
+        padding: 2px 3px;
+        text-decoration: none;
+    }
+    
+    #login a.username {
+        background: none;
+        margin-left: 0px;
+        text-decoration: underline;
+    }
+
+    #login li {
+        display: inline;
+        list-style: none;
+    }
+    
+    
+/* menu  
+----------------------------------------------------------*/
+ul#menu {
+    font-size: 1.3em;
+    font-weight: 600;
+    margin: 0;
+    text-align: right;
+            text-decoration: none;
+
+}
+
+    ul#menu li {
+        display: inline;
+        list-style: none;
+        padding-left: 15px;
+    }
+
+        ul#menu li a {
+            background: none;
+            color: #999;
+            text-decoration: none;
+        }
+
+        ul#menu li a:hover {
+            color: #333;
+            text-decoration: none;
+        }
+
+
+
+/* page elements  
+----------------------------------------------------------*/
+/* featured */
+.featured {
+    background-color: #fff;
+}
+
+    .featured .content-wrapper {
+        /*background-color: #7ac0da;
+        background-image: -ms-linear-gradient(left, #7AC0DA 0%, #A4D4E6 100%);
+        background-image: -o-linear-gradient(left, #7AC0DA 0%, #A4D4E6 100%);
+        background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #7AC0DA), color-stop(1, #A4D4E6));
+        background-image: -webkit-linear-gradient(left, #7AC0DA 0%, #A4D4E6 100%);
+        background-image: linear-gradient(left, #7AC0DA 0%, #A4D4E6 100%);
+        color: #3e5667;
+        */
+        padding:  0px 40px 30px 40px;
+    }
+
+        .featured hgroup.title h1, .featured hgroup.title h2 {
+            /* color: #fff;
+                */
+        }
+
+        .featured p {
+            font-size: 1.1em;
+        }
+
+/* page titles */ 
+hgroup.title {
+    margin-bottom: 10px;
+}
+
+hgroup.title h1, hgroup.title h2 {
+display: inline;
+}
+
+hgroup.title h2 {
+    font-weight: normal;
+}
+
+/* releases */
+.milestone {
+    color: #fff;
+    background-color: #8ABAE4;
+    font-weight:  normal;
+    padding:  10px 10px 10px 10px;
+    margin: 0 0 0 0;
+}
+    .milestone .primary {
+        font-size: 1.75em;
+    }
+
+    .milestone .secondary {
+    font-size: 1.2em;
+    font-weight: normal;
+    /* padding: 5px 5px 5px 10px;*/
+        }
+    
+/* features */
+section.feature {
+    width: 200px;
+    float: left;
+    padding: 10px;
+}
+
+/* ordered list */
+ol.round {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+    ol.round li {
+        margin: 25px 0;
+        padding-left: 45px;
+    }
+    
+        ol.round li.one {
+            background: url("../images/orderedlistOne.png") no-repeat;        
+        }
+    
+        ol.round li.two {
+            background: url("../images/orderedlistTwo.png") no-repeat;        
+        }
+    
+        ol.round li.three {
+            background: url("../images/orderedlistThree.png") no-repeat;        
+        }
+    
+/* content */  
+article {
+    float: left;
+    width: 70%;
+}
+
+aside {
+    float: right;
+    width: 25%;
+}
+
+    aside ul {
+        list-style: none;
+        padding: 0;
+    }
+    
+     aside ul li {
+        background: url("../images/bullet.png") no-repeat 0 50%;
+        padding: 2px 0 2px 20px;
+     }
+     
+.label {
+    font-weight: 700;
+}
+
+/* login page */ 
+#loginForm {
+    border-right: solid 2px #c8c8c8;
+    float: left;
+    width: 45%;
+}
+
+    #loginForm .validation-error {
+        display: block;
+        margin-left: 15px;
+    }
+
+#socialLoginForm {
+    margin-left: 40px;
+    float: left;
+    width: 50%;
+}
+
+/* contact */
+.contact h3 {
+    font-size: 1.2em;
+}
+
+.contact p {
+    margin: 5px 0 0 10px;
+}
+
+.contact iframe {
+    border: solid 1px #333;
+    margin: 5px 0 0 10px;
+}
+
+/* forms */
+fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+    fieldset legend {
+        display: none;
+    }
+    
+    fieldset ol {
+        padding: 0;
+        list-style: none;
+    }
+    
+        fieldset ol li {
+            padding-bottom: 5px;
+        }
+    
+    fieldset label {
+        display: block;
+        font-size: 1.2em;
+        font-weight: 600;
+    }
+    
+    fieldset label.checkbox {
+        display: inline;
+    }
+    
+    fieldset input[type="text"], 
+    fieldset input[type="password"] {
+        border: 1px solid #e2e2e2;
+        color: #333;
+        font-size: 1.2em;
+        margin: 5px 0 6px 0;
+        padding: 5px;
+        width: 300px;
+    }
+    
+        fieldset input[type="text"]:focus, 
+        fieldset input[type="password"]:focus {
+            border: 1px solid #7ac0da;
+        }
+    
+    fieldset input[type="submit"] {
+        background-color: #d3dce0;
+        border: solid 1px #787878;
+        cursor: pointer;
+        font-size: 1.2em;
+        font-weight: 600;
+        padding: 7px;
+    }
+
+/* ajax login/registration dialog */
+.modal-popup {
+    font-size: 0.7em;
+}
+
+/* info and errors */  
+.message-info {
+    border: solid 1px;
+    clear: both;
+    padding: 10px 20px;
+}
+
+.message-error {
+    clear: both;
+    color: #e80c4d;
+    font-size: 1.1em;
+    font-weight: bold;
+    margin: 20px 0 10px 0;
+}
+
+.message-success {
+    color: #7ac0da;
+    font-size: 1.3em;
+    font-weight: bold;
+    margin: 20px 0 10px 0;
+}
+
+.success {
+    color: #7ac0da;
+}
+
+.error {
+    color: #e80c4d;
+}
+
+/* styles for validation helpers */
+.field-validation-error {
+    color: #e80c4d;
+    font-weight: bold;
+}
+
+.field-validation-valid {
+    display: none;
+}
+
+input[type="text"].input-validation-error,
+input[type="password"].input-validation-error {
+    border: solid 1px #e80c4d;
+}
+
+.validation-summary-errors {
+    color: #e80c4d;
+    font-weight: bold;
+    font-size: 1.1em;
+}
+
+.validation-summary-valid {
+    display: none;
+}
+
+
+/* social */
+ul#social li {
+    display: inline;
+    list-style: none;
+}
+
+    ul#social li a {
+        color: #999;
+        text-decoration: none;
+    }
+        
+    a.facebook, a.twitter {
+        display: block;
+        float: left;
+        height: 24px;
+        padding-left: 17px;
+        text-indent: -9999px;
+        width: 16px;
+    }
+        
+    a.facebook {
+        background: url("../images/facebook.png") no-repeat;
+    }
+        
+    a.twitter {
+        background: url("../images/twitter.png") no-repeat;
+    }
+        
+        
+        
+/********************
+*   Mobile Styles   *
+********************/
+@media only screen and (max-width: 850px) {
+    
+    /* header  
+    ----------------------------------------------------------*/
+    header .float-left, 
+    header .float-right {
+        float: none;
+    }
+    
+    /* logo */
+    header .site-title {
+        /*margin: 0; */
+        /*margin: 10px;*/
+        text-align: left;
+        padding-left: 0;
+    }
+
+    /* login */
+    #login {
+        font-size: .85em;
+        margin-top: 0;
+        text-align: center;
+    }
+    
+        #login ul {
+            margin: 5px 0;
+            padding: 0;
+        }
+        
+        #login li {
+            display: inline;
+            list-style: none;
+            margin: 0;
+            padding:0;
+        }
+
+        #login a {
+            background: none;
+            color: #999;
+            font-weight: 600;
+            margin: 2px;
+            padding: 0;
+        }
+        
+        #login a:hover {
+            color: #333;
+        }
+
+    /* menu */
+    nav {
+        margin-bottom: 5px;
+    }
+    
+    ul#menu {
+        margin: 0;
+        padding:0;
+        text-align: center;
+    }
+
+        ul#menu li {
+            margin: 0;
+            padding: 0;
+        }
+
+        
+    /* main layout  
+    ----------------------------------------------------------*/
+    .main-content,
+    .featured + .main-content {
+        background-position: 10px 0;
+    }
+    
+    .content-wrapper {
+        padding-right: 10px;
+        padding-left: 10px;
+    }
+
+    .featured .content-wrapper {
+        padding: 10px;
+    }
+    
+    /* page content */  
+    article, aside {
+        float: none;
+        width: 100%;
+    }
+    
+    /* ordered list */
+    ol.round {
+        list-style-type: none;
+        padding-left: 0;
+    }
+
+        ol.round li {
+            padding-left: 10px;
+            margin: 25px 0;
+        }
+    
+            ol.round li.one,
+            ol.round li.two,
+            ol.round li.three {
+                background: none;        
+            }
+     
+     /* features */
+     section.feature {
+        float: none;
+        padding: 10px;
+        width: auto;
+     }
+     
+        section.feature img {
+            color: #999;
+            content: attr(alt);
+            font-size: 1.5em;
+            font-weight: 600;
+        }
+        
+    /* forms */    
+    fieldset input[type="text"], 
+    fieldset input[type="password"] {
+        width: 90%;
+    }
+    
+    /* login page */ 
+    #loginForm {
+        border-right: none;
+        float: none;
+        width: auto;
+    }
+
+        #loginForm .validation-error {
+            display: block;
+            margin-left: 15px;
+        }
+
+    #socialLoginForm {
+        margin-left: 0;
+        float: none;
+        width: auto;
+    }
+
+    /* footer  
+    ----------------------------------------------------------*/    
+    footer .float-left,
+    footer .float-right {
+        float: none;
+    }
+    
+    footer {
+        text-align: center;
+        height: auto;
+        padding: 10px 0;
+    }
+    
+        footer p {
+            margin: 0;
+        }
+    
+        ul#social {
+            padding:0;
+            margin: 0;
+        }
+    
+         a.facebook, a.twitter {
+            background: none;
+            display: inline;
+            float: none;
+            height: auto;
+            padding-left: 0;
+            text-indent: 0;
+            width: auto;
+        }    
+}
+
+.subsite {
+	color: #444;
+}
+
+h3 {
+	font-weight: normal;
+	font-size: 24px;
+	color: #444;
+	margin-bottom: 20px;
+}
+
+.tiles {
+	padding-bottom: 20px;
+	background-color: #e3e3e3;
+}
+
+#editor {
+	margin: 0 auto;
+	height: 500px;
+	border: 1px solid #ccc;
+}
+
+.monaco-editor.monaco, .monaco-editor.vs, .monaco-editor.eclipse {
+	background: #F9F9F9;
+}
+
+.monaco-editor.monaco .monaco-editor-background, .monaco-editor.vs .monaco-editor-background, .monaco-editor.eclipse .monaco-editor-background {
+	background: #F9F9F9;
+}

+ 32 - 0
website/index/samples/sample.dockerfile.txt

@@ -0,0 +1,32 @@
+FROM mono:3.12
+
+ENV KRE_FEED https://www.myget.org/F/aspnetvnext/api/v2
+ENV KRE_USER_HOME /opt/kre
+
+RUN apt-get -qq update && apt-get -qqy install unzip 
+
+ONBUILD RUN curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/kvminstall.sh | sh
+ONBUILD RUN bash -c "source $KRE_USER_HOME/kvm/kvm.sh \
+    && kvm install latest -a default \
+    && kvm alias default | xargs -i ln -s $KRE_USER_HOME/packages/{} $KRE_USER_HOME/packages/default"
+
+# Install libuv for Kestrel from source code (binary is not in wheezy and one in jessie is still too old)
+RUN apt-get -qqy install \
+    autoconf \
+    automake \
+    build-essential \
+    libtool 
+RUN LIBUV_VERSION=1.0.0-rc2 \
+    && curl -sSL https://github.com/joyent/libuv/archive/v${LIBUV_VERSION}.tar.gz | tar zxfv - -C /usr/local/src \
+    && cd /usr/local/src/libuv-$LIBUV_VERSION \
+    && sh autogen.sh && ./configure && make && make install \
+    && rm -rf /usr/local/src/libuv-$LIBUV_VERSION \
+    && ldconfig
+
+ENV PATH $PATH:$KRE_USER_HOME/packages/default/bin
+
+# Extra things to test
+RUN echo "string at end"
+RUN echo must work 'some str' and some more
+RUN echo hi this is # not a comment
+RUN echo 'String with ${VAR} and another $one here'

+ 8 - 0
website/index/samples/sample.fsharp.txt

@@ -0,0 +1,8 @@
+(* Sample F# application *)
+[<EntryPoint>]
+let main argv = 
+    printfn "%A" argv
+    System.Console.WriteLine("Hello from F#")
+    0 // return an integer exit code
+
+//-------------------------------------------------------- 

+ 111 - 0
website/index/samples/sample.go.txt

@@ -0,0 +1,111 @@
+// We often need our programs to perform operations on
+// collections of data, like selecting all items that
+// satisfy a given predicate or mapping all items to a new
+// collection with a custom function.
+
+// In some languages it's idiomatic to use [generic](http://en.wikipedia.org/wiki/Generic_programming)
+// data structures and algorithms. Go does not support
+// generics; in Go it's common to provide collection
+// functions if and when they are specifically needed for
+// your program and data types.
+
+// Here are some example collection functions for slices
+// of `strings`. You can use these examples to build your
+// own functions. Note that in some cases it may be
+// clearest to just inline the collection-manipulating
+// code directly, instead of creating and calling a
+// helper function.
+
+package main
+
+import "strings"
+import "fmt"
+
+// Returns the first index of the target string `t`, or
+// -1 if no match is found.
+func Index(vs []string, t string) int {
+    for i, v := range vs {
+        if v == t {
+            return i
+        }
+    }
+    return -1
+}
+
+// Returns `true` if the target string t is in the
+// slice.
+func Include(vs []string, t string) bool {
+    return Index(vs, t) >= 0
+}
+
+// Returns `true` if one of the strings in the slice
+// satisfies the predicate `f`.
+func Any(vs []string, f func(string) bool) bool {
+    for _, v := range vs {
+        if f(v) {
+            return true
+        }
+    }
+    return false
+}
+
+// Returns `true` if all of the strings in the slice
+// satisfy the predicate `f`.
+func All(vs []string, f func(string) bool) bool {
+    for _, v := range vs {
+        if !f(v) {
+            return false
+        }
+    }
+    return true
+}
+
+// Returns a new slice containing all strings in the
+// slice that satisfy the predicate `f`.
+func Filter(vs []string, f func(string) bool) []string {
+    vsf := make([]string, 0)
+    for _, v := range vs {
+        if f(v) {
+            vsf = append(vsf, v)
+        }
+    }
+    return vsf
+}
+
+// Returns a new slice containing the results of applying
+// the function `f` to each string in the original slice.
+func Map(vs []string, f func(string) string) []string {
+    vsm := make([]string, len(vs))
+    for i, v := range vs {
+        vsm[i] = f(v)
+    }
+    return vsm
+}
+
+func main() {
+
+    // Here we try out our various collection functions.
+    var strs = []string{"peach", "apple", "pear", "plum"}
+
+    fmt.Println(Index(strs, "pear"))
+
+    fmt.Println(Include(strs, "grape"))
+
+    fmt.Println(Any(strs, func(v string) bool {
+        return strings.HasPrefix(v, "p")
+    }))
+
+    fmt.Println(All(strs, func(v string) bool {
+        return strings.HasPrefix(v, "p")
+    }))
+
+    fmt.Println(Filter(strs, func(v string) bool {
+        return strings.Contains(v, "e")
+    }))
+
+    // The above examples all used anonymous functions,
+    // but you can also use named functions of the correct
+    // type.
+    fmt.Println(Map(strs, strings.ToUpper))
+
+}

+ 31 - 0
website/index/samples/sample.handlebars.txt

@@ -0,0 +1,31 @@
+
+<div class="entry">
+	<h1>{{title}}</h1>
+	{{#if author}}
+	<h2>{{author.firstName}} {{author.lastName}}</h2>
+	{{else}}
+	<h2>Unknown Author</h2>
+	{{/if}}
+	{{contentBody}}
+</div>
+
+{{#unless license}}
+  <h3 class="warning">WARNING: This entry does not have a license!</h3>
+{{/unless}}
+
+<div class="footnotes">
+	<ul>
+		{{#each footnotes}}
+		<li>{{this}}</li>
+		{{/each}}
+	</ul>
+</div>
+
+<h1>Comments</h1>
+
+<div id="comments">
+	{{#each comments}}
+	<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
+	<div>{{body}}</div>
+	{{/each}}
+</div>

+ 22 - 0
website/index/samples/sample.html.txt

@@ -0,0 +1,22 @@
+<!DOCTYPE HTML>
+<!-- 
+	Comments are overrated
+-->
+<html>
+<head>
+	<title>HTML Sample</title>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<style type="text/css">
+		h1 {
+			color: #CCA3A3;
+		}
+	</style>
+	<script type="text/javascript">
+		window.alert("I am a sample...");
+	</script>
+</head>
+<body>
+	<h1>Heading No.1</h1>
+	<input disabled type="button" value="Click me" />
+</body>
+</html>

+ 15 - 0
website/index/samples/sample.ini.txt

@@ -0,0 +1,15 @@
+# Example of a .gitconfig file
+
+[core]
+	repositoryformatversion = 0
+	filemode = false
+	bare = false
+	logallrefupdates = true
+	symlinks = false
+	ignorecase = true
+	hideDotFiles = dotGitOnly
+
+# Defines the master branch
+[branch "master"]
+	remote = origin
+	merge = refs/heads/master

+ 18 - 0
website/index/samples/sample.jade.txt

@@ -0,0 +1,18 @@
+doctype 5
+html(lang="en")
+    head
+        title= pageTitle
+        script(type='text/javascript')
+            if (foo) {
+                bar()
+            }
+    body
+        // Disclaimer: You will need to turn insertSpaces to true in order for the
+            syntax highlighting to kick in properly (especially for comments)
+            Enjoy :)
+        h1 Jade - node template engine
+        #container
+            if youAreUsingJade
+                p You are amazing
+            else
+                p Get on it!

+ 14 - 0
website/index/samples/sample.java.txt

@@ -0,0 +1,14 @@
+import java.util.ArrayList;
+import org.junit.Test;
+
+public class Example {
+    @Test 
+    public void method() {
+       org.junit.Assert.assertTrue( "isEmpty", new ArrayList<Integer>().isEmpty());
+    }
+	
+   @Test(timeout=100) public void infinity() {
+       while(true);
+    }
+ }
+ 

+ 214 - 0
website/index/samples/sample.javascript.txt

@@ -0,0 +1,214 @@
+/*
+  © Microsoft. All rights reserved.
+
+  This library is supported for use in Windows Tailored Apps only.
+
+  Build: 6.2.8100.0 
+  Version: 0.5 
+*/
+
+(function (global, undefined) {
+	"use strict";
+	undefinedVariable = {};
+	undefinedVariable.prop = 5;
+
+	function initializeProperties(target, members) {
+		var keys = Object.keys(members);
+		var properties;
+		var i, len;
+		for (i = 0, len = keys.length; i < len; i++) {
+			var key = keys[i];
+			var enumerable = key.charCodeAt(0) !== /*_*/95;
+			var member = members[key];
+			if (member && typeof member === 'object') {
+				if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') {
+					if (member.enumerable === undefined) {
+						member.enumerable = enumerable;
+					}
+					properties = properties || {};
+					properties[key] = member;
+					continue;
+				} 
+			}
+			if (!enumerable) {
+				properties = properties || {};
+				properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true }
+				continue;
+			}
+			target[key] = member;
+		}
+		if (properties) {
+			Object.defineProperties(target, properties);
+		}
+	}
+
+	(function (rootNamespace) {
+
+		// Create the rootNamespace in the global namespace
+		if (!global[rootNamespace]) {
+			global[rootNamespace] = Object.create(Object.prototype);
+		}
+
+		// Cache the rootNamespace we just created in a local variable
+		var _rootNamespace = global[rootNamespace];
+		if (!_rootNamespace.Namespace) {
+			_rootNamespace.Namespace = Object.create(Object.prototype);
+		}
+
+		function defineWithParent(parentNamespace, name, members) {
+			/// <summary locid="1">
+			/// Defines a new namespace with the specified name, under the specified parent namespace.
+			/// </summary>
+			/// <param name="parentNamespace" type="Object" locid="2">
+			/// The parent namespace which will contain the new namespace.
+			/// </param>
+			/// <param name="name" type="String" locid="3">
+			/// Name of the new namespace.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			var currentNamespace = parentNamespace,
+				namespaceFragments = name.split(".");
+
+			for (var i = 0, len = namespaceFragments.length; i < len; i++) {
+				var namespaceName = namespaceFragments[i];
+				if (!currentNamespace[namespaceName]) {
+					Object.defineProperty(currentNamespace, namespaceName, 
+						{ value: {}, writable: false, enumerable: true, configurable: true }
+					);
+				}
+				currentNamespace = currentNamespace[namespaceName];
+			}
+
+			if (members) {
+				initializeProperties(currentNamespace, members);
+			}
+
+			return currentNamespace;
+		}
+
+		function define(name, members) {
+			/// <summary locid="6">
+			/// Defines a new namespace with the specified name.
+			/// </summary>
+			/// <param name="name" type="String" locid="7">
+			/// Name of the namespace.  This could be a dot-separated nested name.
+			/// </param>
+			/// <param name="members" type="Object" locid="4">
+			/// Members in the new namespace.
+			/// </param>
+			/// <returns locid="5">
+			/// The newly defined namespace.
+			/// </returns>
+			return defineWithParent(global, name, members);
+		}
+
+		// Establish members of the "WinJS.Namespace" namespace
+		Object.defineProperties(_rootNamespace.Namespace, {
+
+			defineWithParent: { value: defineWithParent, writable: true, enumerable: true },
+
+			define: { value: define, writable: true, enumerable: true }
+
+		});
+
+	})("WinJS");
+
+	(function (WinJS) {
+
+		function define(constructor, instanceMembers, staticMembers) {
+			/// <summary locid="8">
+			/// Defines a class using the given constructor and with the specified instance members.
+			/// </summary>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			if (instanceMembers) {
+				initializeProperties(constructor.prototype, instanceMembers);
+			}
+			if (staticMembers) {
+				initializeProperties(constructor, staticMembers);
+			}
+			return constructor;
+		}
+
+		function derive(baseClass, constructor, instanceMembers, staticMembers) {
+			/// <summary locid="13">
+			/// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter.
+			/// </summary>
+			/// <param name="baseClass" type="Function" locid="14">
+			/// The class to inherit from.
+			/// </param>
+			/// <param name="constructor" type="Function" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <param name="instanceMembers" type="Object" locid="10">
+			/// The set of instance fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <param name="staticMembers" type="Object" locid="11">
+			/// The set of static fields, properties and methods to be made available on the class.
+			/// </param>
+			/// <returns type="Function" locid="12">
+			/// The newly defined class.
+			/// </returns>
+			if (baseClass) {
+				constructor = constructor || function () { };
+				var basePrototype = baseClass.prototype;
+				constructor.prototype = Object.create(basePrototype);
+				Object.defineProperty(constructor.prototype, "_super", { value: basePrototype });
+				Object.defineProperty(constructor.prototype, "constructor", { value: constructor });
+				if (instanceMembers) {
+					initializeProperties(constructor.prototype, instanceMembers);
+				}
+				if (staticMembers) {
+					initializeProperties(constructor, staticMembers);
+				}
+				return constructor;
+			} else {
+				return define(constructor, instanceMembers, staticMembers);
+			}
+		}
+
+		function mix(constructor) {
+			/// <summary locid="15">
+			/// Defines a class using the given constructor and the union of the set of instance members
+			/// specified by all the mixin objects.  The mixin parameter list can be of variable length.
+			/// </summary>
+			/// <param name="constructor" locid="9">
+			/// A constructor function that will be used to instantiate this class.
+			/// </param>
+			/// <returns locid="12">
+			/// The newly defined class.
+			/// </returns>
+			constructor = constructor || function () { };
+			var i, len;
+			for (i = 0, len = arguments.length; i < len; i++) {
+				initializeProperties(constructor.prototype, arguments[i]);
+			}
+			return constructor;
+		}
+
+		// Establish members of "WinJS.Class" namespace
+		WinJS.Namespace.define("WinJS.Class", {
+			define: define,
+			derive: derive,
+			mix: mix
+		});
+
+	})(WinJS);
+
+})(this);

+ 68 - 0
website/index/samples/sample.json.txt

@@ -0,0 +1,68 @@
+{
+	"type": "team",
+	"test": {
+		"testPage": "tools/testing/run-tests.htm",
+		"enabled": true
+	},
+    "search": {
+        "excludeFolders": [
+			".git",
+			"node_modules",
+			"tools/bin",
+			"tools/counts",
+			"tools/policheck",
+			"tools/tfs_build_extensions",
+			"tools/testing/jscoverage",
+			"tools/testing/qunit",
+			"tools/testing/chutzpah",
+			"server.net"
+        ]
+    },
+	"languages": {
+		"vs.languages.typescript": {
+			"validationSettings": [{
+				"scope":"/",
+				"noImplicitAny":true,
+				"noLib":false,
+				"extraLibs":[],
+				"semanticValidation":true,
+				"syntaxValidation":true,
+				"codeGenTarget":"ES5",
+				"moduleGenTarget":"",
+				"lint": {
+                    "emptyBlocksWithoutComment": "warning",
+                    "curlyBracketsMustNotBeOmitted": "warning",
+                    "comparisonOperatorsNotStrict": "warning",
+                    "missingSemicolon": "warning",
+                    "unknownTypeOfResults": "warning",
+                    "semicolonsInsteadOfBlocks": "warning",
+                    "functionsInsideLoops": "warning",
+                    "functionsWithoutReturnType": "warning",
+                    "tripleSlashReferenceAlike": "warning",
+                    "unusedImports": "warning",
+                    "unusedVariables": "warning",
+                    "unusedFunctions": "warning",
+                    "unusedMembers": "warning"
+                }
+			}, 
+			{
+				"scope":"/client",
+				"baseUrl":"/client",
+				"moduleGenTarget":"amd"
+			},
+			{
+				"scope":"/server",
+				"moduleGenTarget":"commonjs"
+			},
+			{
+				"scope":"/build",
+				"moduleGenTarget":"commonjs"
+			},
+			{
+				"scope":"/node_modules/nake",
+				"moduleGenTarget":"commonjs"
+			}],
+			"allowMultipleWorkers": true
+		}
+	}
+}

+ 46 - 0
website/index/samples/sample.less.txt

@@ -0,0 +1,46 @@
+@base: #f938ab;
+
+.box-shadow(@style, @c) when (iscolor(@c)) {
+	border-radius: @style @c;
+}
+
+.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
+	.box-shadow(@style, rgba(0, 0, 0, @alpha));
+}
+
+.box { 
+	color: saturate(@base, 5%);
+	border-color: lighten(@base, 30%);
+	
+	div {
+		.box-shadow((0 0 5px), 30%);
+	}
+}
+
+#header {
+	h1 {
+		font-size: 26px;
+		font-weight: bold;
+	}
+	
+	p { font-size: 12px;
+		a { text-decoration: none;
+			&:hover { border-width: 1px }
+		}
+	}
+}
+
+@the-border: 1px;
+@base-color: #111;
+@red:        #842210;
+
+#header {
+	color: (@base-color * 3);
+	border-left: @the-border;
+	border-right: (@the-border * 2);
+}
+
+#footer {
+	color: (@base-color + #003300);
+	border-color: desaturate(@red, 10%);
+}

+ 12 - 0
website/index/samples/sample.lua.txt

@@ -0,0 +1,12 @@
+    -- defines a factorial function
+    function fact (n)
+      if n == 0 then
+        return 1
+      else
+        return n * fact(n-1)
+      end
+    end
+    
+    print("enter a number:")
+    a = io.read("*number")        -- read a number
+    print(fact(a))

+ 97 - 0
website/index/samples/sample.markdown.txt

@@ -0,0 +1,97 @@
+# Header 1 #
+## Header 2 ##
+### Header 3 ###             (Hashes on right are optional)
+## Markdown plus h2 with a custom ID ##   {#id-goes-here}
+[Link back to H2](#id-goes-here)
+
+<!-- html madness -->
+<div class="custom-class" markdown="1">
+  <div>
+    nested div
+  </div>
+  <script type='text/x-koka'>
+    function( x: int ) { return x*x; }
+  </script>
+  This is a div _with_ underscores
+  and a & <b class="bold">bold</b> element.
+  <style>
+    body { font: "Consolas" }
+  </style>
+</div>
+
+* Bullet lists are easy too
+- Another one
++ Another one
+
+This is a paragraph, which is text surrounded by 
+whitespace. Paragraphs can be on one 
+line (or many), and can drone on for hours.  
+
+Now some inline markup like _italics_,  **bold**, 
+and `code()`. Note that underscores 
+in_words_are ignored.
+
+````application/json
+  { value: ["or with a mime type"] }
+````
+
+> Blockquotes are like quoted text in email replies
+>> And, they can be nested
+
+1. A numbered list
+2. Which is numbered
+3. With periods and a space
+
+And now some code:
+
+    // Code is just text indented a bit
+    which(is_easy) to_remember();
+
+And a block
+
+~~~
+// Markdown extra adds un-indented code blocks too
+
+if (this_is_more_code == true && !indented) {
+    // tild wrapped code blocks, also not indented
+}
+~~~
+
+Text with  
+two trailing spaces  
+(on the right)  
+can be used  
+for things like poems  
+
+### Horizontal rules
+
+* * * *
+****
+--------------------------
+
+![picture alt](/images/photo.jpeg "Title is optional")     
+
+## Markdown plus tables ##
+
+| Header | Header | Right  |
+| ------ | ------ | -----: |
+|  Cell  |  Cell  |   $10  |
+|  Cell  |  Cell  |   $20  |
+
+* Outer pipes on tables are optional
+* Colon used for alignment (right versus left)
+
+## Markdown plus definition lists ##
+
+Bottled water
+: $ 1.25
+: $ 1.55 (Large)
+
+Milk
+Pop
+: $ 1.75
+
+* Multiple definitions and terms are possible
+* Definitions can include multiple paragraphs too
+
+*[ABBR]: Markdown plus abbreviations (produces an <abbr> tag)

+ 52 - 0
website/index/samples/sample.objective-c.txt

@@ -0,0 +1,52 @@
+//
+//  Copyright (c) Microsoft Corporation. All rights reserved.
+//
+
+#import "UseQuotes.h"
+#import <Use/GTLT.h> 
+
+/*
+	Multi 
+	Line
+	Comments 
+*/
+@implementation Test
+
+- (void) applicationWillFinishLaunching:(NSNotification *)notification
+{
+}
+
+- (IBAction)onSelectInput:(id)sender
+{
+    NSString* defaultDir = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, true)[0];
+    
+    NSOpenPanel* panel = [NSOpenPanel openPanel];
+    [panel setAllowedFileTypes:[[NSArray alloc] initWithObjects:@"ipa", @"xcarchive", @"app", nil]];
+    
+    [panel beginWithCompletionHandler:^(NSInteger result)
+     {
+         if (result == NSFileHandlingPanelOKButton)
+             [self.inputTextField setStringValue:[panel.URL path]];
+     }];
+     return YES;
+
+     int hex = 0xFEF1F0F;
+	 float ing = 3.14;
+	 ing = 3.14e0;
+	 ing = 31.4e-2;
+}
+
+-(id) initWithParams:(id<anObject>) aHandler withDeviceStateManager:(id<anotherObject>) deviceStateManager
+{
+    // add a tap gesture recognizer
+    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
+    NSMutableArray *gestureRecognizers = [NSMutableArray array];
+    [gestureRecognizers addObject:tapGesture];
+    [gestureRecognizers addObjectsFromArray:scnView.gestureRecognizers];
+    scnView.gestureRecognizers = gestureRecognizers;
+
+	return tapGesture;
+	return nil;
+}
+
+@end

+ 82 - 0
website/index/samples/sample.php.txt

@@ -0,0 +1,82 @@
+<?php
+// The next line contains a syntax error:
+if () {
+	return "The parser recovers from this type of syntax error";
+}
+?>
+<html>
+<head>
+	<title>Example page</title>
+</head>
+
+<body>
+
+<script type="text/javascript">
+	// Some PHP embedded inside JS
+	// Generated <?=date('l, F jS, Y')?>
+	
+	var server_token = <?=rand(5, 10000)?>
+	if (typeof server_token === 'number') {
+		alert('token: ' + server_token);
+	}
+</script>
+
+<div>
+Hello
+<? if (isset($user)) { ?>
+	<b><?=$user?></b>
+<? } else { ?>
+	<i>guest</i>
+<? } ?>
+!
+</div>
+
+<?php
+
+	/* Example PHP file
+	multiline comment
+	*/
+
+	$cards = array("ah", "ac", "ad", "as",
+		"2h", "2c", "2d", "2s",
+		"3h", "3c", "3d", "3s",
+		"4h", "4c", "4d", "4s",
+		"5h", "5c", "5d", "5s",
+		"6h", "6c", "6d", "6s",
+		"7h", "7c", "7d", "7s",
+		"8h", "8c", "8d", "8s",
+		"9h", "9c", "9d", "9s",
+		"th", "tc", "td", "ts",
+		"jh", "jc", "jd", "js",
+		"qh", "qc", "qd", "qs",
+		"kh", "kc", "kd", "ks");
+
+	srand(time());
+
+	for($i = 0; $i < 52; $i++) {
+		$count = count($cards);
+		$random = (rand()%$count);
+
+		if($cards[$random] == "") {
+			$i--;
+		} else {
+			$deck[] = $cards[$random];
+			$cards[$random] = "";
+		}
+	}
+
+	srand(time());
+	$starting_point = (rand()%51);
+	print("Starting point for cut cards is: $starting_point<p>");
+
+	// display shuffled cards (EXAMPLE ONLY)
+	for ($index = 0; $index < 52; $index++) {
+		if ($starting_point == 52) { $starting_point = 0; }
+		print("Uncut Point: <strong>$deck[$index]</strong> ");
+		print("Starting Point: <strong>$deck[$starting_point]</strong><br>");
+		$starting_point++;
+	}
+?>
+
+</body>
+</html>

+ 9 - 0
website/index/samples/sample.plaintext.txt

@@ -0,0 +1,9 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus aliquet sapien, sed rhoncus leo ullamcorper ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus feugiat eleifend nisl, aliquet rhoncus quam scelerisque vel. Morbi eu pellentesque ex. Nam suscipit maximus leo blandit cursus. Aenean sollicitudin nisi luctus, ornare nibh viverra, laoreet ex. Donec eget nibh sit amet dolor ornare elementum. Morbi sollicitudin enim vitae risus pretium vestibulum. Ut pretium hendrerit libero, non vulputate ante volutpat et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam malesuada turpis vitae est porttitor, id tincidunt neque dignissim. Integer rhoncus vestibulum justo in iaculis. Praesent nec augue ut dui scelerisque gravida vel id velit. Donec vehicula feugiat mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
+
+Praesent diam lorem, luctus quis ullamcorper non, consequat quis orci. Ut vel massa vel nunc sagittis porttitor a vitae ante. Quisque euismod lobortis imperdiet. Vestibulum tincidunt vehicula posuere. Nulla facilisi. Donec sodales imperdiet risus id ullamcorper. Nulla luctus orci tortor, vitae tincidunt urna aliquet nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam consequat dapibus massa. Sed ac pharetra magna, in imperdiet neque. Nullam nunc nisi, consequat vel nunc et, sagittis aliquam arcu. Aliquam non orci magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed id sem ut sem pulvinar rhoncus. Aenean venenatis nunc eget mi ornare, vitae maximus lacus varius. Quisque quis vestibulum justo.
+
+Donec euismod luctus volutpat. Donec sed lacinia enim. Vivamus aliquam elit cursus, convallis diam at, volutpat turpis. Sed lacinia nisl in auctor dapibus. Nunc turpis mi, mattis ut rhoncus id, lacinia sed lectus. Donec sodales tellus quis libero gravida pretium et quis magna. Etiam ultricies mollis purus, eget consequat velit. Duis vitae nibh vitae arcu tincidunt congue. Maecenas ut velit in ipsum condimentum dictum quis eget urna. Sed mattis nulla arcu, vitae mattis ligula dictum at.
+
+Praesent at dignissim dolor. Donec quis placerat sem. Cras vitae placerat sapien, eu sagittis ex. Mauris nec luctus risus. Cras imperdiet semper neque suscipit auctor. Mauris nisl massa, commodo sit amet dignissim id, malesuada sed ante. Praesent varius sapien eget eros vehicula porttitor.
+
+Mauris auctor nunc in quam tempor, eget consectetur nisi rhoncus. Donec et nulla imperdiet, gravida dui at, accumsan velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sollicitudin condimentum auctor. Sed lacinia eleifend nisi, id scelerisque leo laoreet sit amet. Morbi congue augue a malesuada pulvinar. Curabitur nec ante finibus, commodo orci vel, aliquam libero. Morbi molestie purus non nunc placerat fermentum. Pellentesque commodo ligula sed pretium aliquam. Praesent ut nibh ex. Vivamus vestibulum velit in leo suscipit, vitae pellentesque urna vulputate. Suspendisse pretium placerat ligula eu ullamcorper. Nam eleifend mi tellus, ut tristique ante ultricies vitae. Quisque venenatis dapibus tellus sit amet mattis. Donec erat arcu, elementum vel nisl at, sagittis vulputate nisi.

+ 30 - 0
website/index/samples/sample.powershell.txt

@@ -0,0 +1,30 @@
+$SelectedObjectNames=@();
+$XenCenterNodeSelected = 0;
+#the object info array contains hashmaps, each of which represent a parameter set and describe a target in the XenCenter resource list
+foreach($parameterSet in $ObjInfoArray)
+{
+	if ($parameterSet["class"] -eq "blank")
+	{
+		#When the XenCenter node is selected a parameter set is created for each of your connected servers with the class and objUuid keys marked as blank
+		if ($XenCenterNodeSelected)
+		{
+			continue
+		}
+		$XenCenterNodeSelected = 1;
+		$SelectedObjectNames += "XenCenter"
+	}
+	elseif ($parameterSet["sessionRef"] -eq "null")
+	{
+		#When a disconnected server is selected there is no session information, we get null for everything except class
+	}
+		$SelectedObjectNames += "a disconnected server"
+	else
+	{
+		Connect-XenServer -url $parameterSet["url"] -opaqueref $parameterSet["sessionRef"]
+		#Use $class to determine which server objects to get
+		#-properties allows us to filter the results to just include the selected object
+		$exp = "Get-XenServer:{0} -properties @{{uuid='{1}'}}" -f $parameterSet["class"], $parameterSet["objUuid"]
+		$obj = Invoke-Expression $exp
+		$SelectedObjectNames += $obj.name_label;
+	} 
+}

+ 12 - 0
website/index/samples/sample.python.txt

@@ -0,0 +1,12 @@
+from banana import *
+
+class Monkey:
+	# Bananas the monkey can eat.
+	capacity = 10
+	def eat(self, N):
+		'''Make the monkey eat N bananas!'''
+		capacity = capacity - N*banana.size
+
+	def feeding_frenzy(self):
+		eat(9.25)
+		return "Yum yum"

+ 41 - 0
website/index/samples/sample.r.txt

@@ -0,0 +1,41 @@
+# © Microsoft. All rights reserved.
+
+#' Add together two numbers.
+#' 
+#' @param x A number.
+#' @param y A number.
+#' @return The sum of \code{x} and \code{y}.
+#' @examples
+#' add(1, 1)
+#' add(10, 1)
+add <- function(x, y) {
+  x + y
+}
+
+add(1, 2)
+add(1.0, 2.0)
+add(-1, -2)
+add(-1.0, -2.0)
+add(1.0e10, 2.0e10)
+
+
+#' Concatenate together two strings.
+#' 
+#' @param x A string.
+#' @param y A string.
+#' @return The concatenated string built of \code{x} and \code{y}.
+#' @examples
+#' strcat("one", "two")
+strcat <- function(x, y) {
+  paste(x, y)
+}
+
+paste("one", "two")
+paste('one', 'two')
+paste(NULL, NULL)
+paste(NA, NA)
+
+paste("multi-
+      line",
+      'multi-
+      line')

+ 46 - 0
website/index/samples/sample.razor.txt

@@ -0,0 +1,46 @@
+@{
+    var total = 0;
+    var totalMessage = "";
+    @* a multiline
+      razor comment embedded in csharp *@
+    if (IsPost) {
+
+        // Retrieve the numbers that the user entered.
+        var num1 = Request["text1"];
+        var num2 = Request["text2"];
+
+        // Convert the entered strings into integers numbers and add.
+        total = num1.AsInt() + num2.AsInt();
+		<italic><bold>totalMessage = "Total = " + total;</bold></italic>
+    }
+}
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Add Numbers</title>
+    <meta charset="utf-8" />
+  </head>
+<body>
+  <p>Enter two whole numbers and then click <strong>Add</strong>.</p>
+  <form action="" method="post">
+    <p><label for="text1">First Number:</label>
+      <input type="text" name="text1" />
+    </p>
+    <p><label for="text2">Second Number:</label>
+      <input type="text" name="text2" />
+    </p>
+    <p><input type="submit" value="Add" /></p>
+  </form>
+
+	@* now we call the totalMessage method 
+	   (a multi line razor comment outside code) *@
+
+  <p>@totalMessage</p>
+  
+  <p>@(totalMessage+"!")</p>
+  
+  An email address (with escaped at character): name@@domain.com
+ 
+</body>
+</html>

+ 21 - 0
website/index/samples/sample.ruby.txt

@@ -0,0 +1,21 @@
+#-------------------------------------------------------------------------
+# Copyright (c) Microsoft. All rights reserved.
+#--------------------------------------------------------------------------
+
+module Azure
+  module Blob
+    class Blob
+      
+      def initialize
+        @properties = {}
+        @metadata = {}
+        yield self if block_given?
+      end
+
+      attr_accessor :name
+      attr_accessor :snapshot
+      attr_accessor :properties
+      attr_accessor :metadata
+    end
+  end
+end

+ 37 - 0
website/index/samples/sample.sass.txt

@@ -0,0 +1,37 @@
+$baseFontSizeInPixels: 14;
+
+@function px2em ($font_size, $base_font_size: $baseFontSizeInPixels) {  
+  @return ($font_size / $base_font_size) + em; 
+}
+
+h1 {
+  font-size: px2em(36, $baseFontSizeInPixels);
+}
+h2  {
+  font-size: px2em(28, $baseFontSizeInPixels);
+}
+.class {
+  font-size: px2em(14, $baseFontSizeInPixels);
+}
+
+nav {
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li { display: inline-block; }
+
+  a {
+    display: block;
+    padding: 6px 12px;
+    text-decoration: none;
+  }
+  
+  @each $animal in puma, sea-slug, egret, salamander {
+    .#{$animal}-icon {
+      background-image: url('/images/#{$animal}.png');
+    }
+  }
+}

+ 52 - 0
website/index/samples/sample.sql.txt

@@ -0,0 +1,52 @@
+CREATE TABLE dbo.EmployeePhoto
+(
+    EmployeeId INT NOT NULL PRIMARY KEY,
+    Photo VARBINARY(MAX) FILESTREAM NULL,
+    MyRowGuidColumn UNIQUEIDENTIFIER NOT NULL ROWGUIDCOL
+                    UNIQUE DEFAULT NEWID()
+);
+
+GO
+
+/*
+text_of_comment
+/* nested comment */
+*/
+
+-- line comment
+
+CREATE NONCLUSTERED INDEX IX_WorkOrder_ProductID
+    ON Production.WorkOrder(ProductID)
+    WITH (FILLFACTOR = 80,
+        PAD_INDEX = ON,
+        DROP_EXISTING = ON);
+GO
+
+WHILE (SELECT AVG(ListPrice) FROM Production.Product) < $300
+BEGIN
+   UPDATE Production.Product
+      SET ListPrice = ListPrice * 2
+   SELECT MAX(ListPrice) FROM Production.Product
+   IF (SELECT MAX(ListPrice) FROM Production.Product) > $500
+      BREAK
+   ELSE
+      CONTINUE
+END
+PRINT 'Too much for the market to bear';
+
+MERGE INTO Sales.SalesReason AS [Target]
+USING (VALUES ('Recommendation','Other'), ('Review', 'Marketing'), ('Internet', 'Promotion'))
+       AS [Source] ([NewName], NewReasonType)
+ON [Target].[Name] = [Source].[NewName]
+WHEN MATCHED
+THEN UPDATE SET ReasonType = [Source].NewReasonType
+WHEN NOT MATCHED BY TARGET
+THEN INSERT ([Name], ReasonType) VALUES ([NewName], NewReasonType)
+OUTPUT $action INTO @SummaryOfChanges;
+
+SELECT ProductID, OrderQty, SUM(LineTotal) AS Total
+FROM Sales.SalesOrderDetail
+WHERE UnitPrice < $5.00
+GROUP BY ProductID, OrderQty
+ORDER BY ProductID, OrderQty
+OPTION (HASH GROUP, FAST 10);

+ 50 - 0
website/index/samples/sample.swift.txt

@@ -0,0 +1,50 @@
+import Foundation
+
+protocol APIControllerProtocol {
+    func didReceiveAPIResults(results: NSArray)
+}
+
+class APIController {
+    var delegate: APIControllerProtocol
+
+    init(delegate: APIControllerProtocol) {
+        self.delegate = delegate
+    }
+
+    func get(path: String) {
+        let url = NSURL(string: path)
+        let session = NSURLSession.sharedSession()
+        let task = session.dataTaskWithURL(url!, completionHandler: {data, response, error -> Void in
+            println("Task completed")
+            if(error != nil) {
+                // If there is an error in the web request, print it to the console
+                println(error.localizedDescription)
+            }
+            var err: NSError?
+            if let jsonResult = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.MutableContainers, error: &err) as? NSDictionary {
+                if(err != nil) {
+                    // If there is an error parsing JSON, print it to the console
+                    println("JSON Error \(err!.localizedDescription)")
+                }
+                if let results: NSArray = jsonResult["results"] as? NSArray {
+                    self.delegate.didReceiveAPIResults(results)
+                }
+            }
+        })
+
+        // The task is just an object with all these properties set
+        // In order to actually make the web request, we need to "resume"
+        task.resume()
+    }
+
+    func searchItunesFor(searchTerm: String) {
+        // The iTunes API wants multiple terms separated by + symbols, so replace spaces with + signs
+        let itunesSearchTerm = searchTerm.stringByReplacingOccurrencesOfString(" ", withString: "+", options: NSStringCompareOptions.CaseInsensitiveSearch, range: nil)
+
+        // Now escape anything else that isn't URL-friendly
+        if let escapedSearchTerm = itunesSearchTerm.stringByAddingPercentEscapesUsingEncoding(NSUTF8StringEncoding) {
+            let urlPath = "https://itunes.apple.com/search?term=\(escapedSearchTerm)&media=music&entity=album"
+        }
+    }
+
+}

+ 124 - 0
website/index/samples/sample.typescript.txt

@@ -0,0 +1,124 @@
+/* Game of Life
+ * Implemented in TypeScript
+ * To learn more about TypeScript, please visit http://www.typescriptlang.org/
+ */
+ 
+module Conway {
+
+	export class Cell {
+		public row: number;
+		public col: number;
+		public live: boolean;
+		
+		constructor(row: number, col: number, live: boolean) {
+			this.row = row;
+			this.col = col;
+			this.live = live
+		}
+	}
+	
+	export class GameOfLife {
+		private gridSize: number;
+		private canvasSize: number;
+		private lineColor: string;
+		private liveColor: string;
+		private deadColor: string;
+		private initialLifeProbability: number;
+		private animationRate: number;
+		private cellSize: number;
+		private context: CanvasRenderingContext2D;
+		private world;
+		
+		
+		constructor() {
+			this.gridSize = 50;
+			this.canvasSize = 600;
+			this.lineColor = '#cdcdcd';
+			this.liveColor = '#666';
+			this.deadColor = '#eee';
+			this.initialLifeProbability = 0.5;
+			this.animationRate = 60;
+			this.cellSize = 0;
+			this.world = this.createWorld();
+			this.circleOfLife();
+		}
+	
+		public createWorld() {
+			return this.travelWorld( (cell : Cell) =>  {
+				cell.live = Math.random() < this.initialLifeProbability;
+				return cell;
+			});
+		}
+		
+		public circleOfLife() : void {
+			this.world = this.travelWorld( (cell: Cell) => {
+				cell = this.world[cell.row][cell.col];
+				this.draw(cell);
+				return this.resolveNextGeneration(cell);
+			});
+			setTimeout( () => {this.circleOfLife()}, this.animationRate);
+		} 
+	
+		public resolveNextGeneration(cell : Cell) {
+			var count = this.countNeighbors(cell);
+			var newCell = new Cell(cell.row, cell.col, cell.live);
+			if(count < 2 || count > 3) newCell.live = false;
+			else if(count == 3) newCell.live = true;
+			return newCell;
+		}
+	
+		public countNeighbors(cell : Cell) {
+			var neighbors = 0;
+			for(var row = -1; row <=1; row++) {
+				for(var col = -1; col <= 1; col++) {
+					if(row == 0 && col == 0) continue;
+					if(this.isAlive(cell.row + row, cell.col + col)) {
+						neighbors++;
+					}
+				}
+			}
+			return neighbors;
+		}
+	
+		public isAlive(row : number, col : number) {
+			if(row < 0 || col < 0 || row >= this.gridSize || col >= this.gridSize) return false;
+			return this.world[row][col].live;
+		}
+	
+		public travelWorld(callback) {
+			var result = [];
+			for(var row = 0; row < this.gridSize; row++) {
+				var rowData = [];
+				for(var col = 0; col < this.gridSize; col++) {
+					rowData.push(callback(new Cell(row, col, false)));
+				}
+				result.push(rowData);
+			}  
+			return result;
+		}
+	
+		public draw(cell : Cell) {
+			if(this.context == null) this.context = this.createDrawingContext();
+			if(this.cellSize == 0) this.cellSize = this.canvasSize/this.gridSize;
+	
+			this.context.strokeStyle = this.lineColor;
+			this.context.strokeRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);
+			this.context.fillStyle = cell.live ? this.liveColor : this.deadColor;
+			this.context.fillRect(cell.row * this.cellSize, cell.col*this.cellSize, this.cellSize, this.cellSize);
+		}    
+		
+		public createDrawingContext() {
+			var canvas = <HTMLCanvasElement> document.getElementById('conway-canvas');
+			if(canvas == null) {
+					canvas = document.createElement('canvas');
+					canvas.id = 'conway-canvas';
+					canvas.width = this.canvasSize;
+					canvas.height = this.canvasSize;
+					document.body.appendChild(canvas);
+			}
+			return canvas.getContext('2d');
+		}
+	}
+}
+
+var game = new Conway.GameOfLife();

+ 59 - 0
website/index/samples/sample.vb.txt

@@ -0,0 +1,59 @@
+Imports System
+Imports System.Collections.Generic
+
+Module Module1
+
+    Sub Main()
+        Dim a As New M8Ball
+
+        Do While True
+
+            Dim q As String = ""
+            Console.Write("ask me about the future... ")
+            q = Console.ReadLine()
+
+            If q.Trim <> "" Then
+                Console.WriteLine("the answer is... {0}", a.getAnswer(q))
+            Else
+                Exit Do
+            End If
+        Loop
+
+    End Sub
+
+End Module
+
+Class M8Ball
+
+    Public Answers As System.Collections.Generic.Dictionary(Of Integer, String)
+
+    Public Sub New()
+        Answers = New System.Collections.Generic.Dictionary(Of Integer, String)
+        Answers.Add(0, "It is certain")
+        Answers.Add(1, "It is decidedly so")
+        Answers.Add(2, "Without a doubt")
+        Answers.Add(3, "Yes, definitely")
+        Answers.Add(4, "You may rely on ")
+        Answers.Add(5, "As I see it, yes")
+        Answers.Add(6, "Most likely")
+        Answers.Add(7, "Outlook good")
+        Answers.Add(8, "Signs point to yes")
+        Answers.Add(9, "Yes")
+        Answers.Add(10, "Reply hazy, try again")
+        Answers.Add(11, "Ask again later")
+        Answers.Add(12, "Better not tell you now")
+        Answers.Add(13, "Cannot predict now")
+        Answers.Add(14, "Concentrate and ask again")
+        Answers.Add(15, "Don't count on it")
+        Answers.Add(16, "My reply is no")
+        Answers.Add(17, "My sources say no")
+        Answers.Add(18, "Outlook not so")
+        Answers.Add(19, "Very doubtful")
+    End Sub
+
+    Public Function getAnswer(theQuestion As String) As String
+        Dim r As New Random
+        Return Answers(r.Next(0, 19))
+    End Function
+
+End Class

+ 14 - 0
website/index/samples/sample.xml.txt

@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
+  <connectionStrings>
+    <add name="MyDB" 
+      connectionString="value for the deployed Web.config file" 
+      xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
+  </connectionStrings>
+  <system.web>
+    <customErrors defaultRedirect="GenericError.htm"
+      mode="RemoteOnly" xdt:Transform="Replace">
+      <error statusCode="500" redirect="InternalError.htm"/>
+    </customErrors>
+  </system.web>
+</configuration>

+ 6808 - 0
website/lib/bootstrap-cosmo.css

@@ -0,0 +1,6808 @@
+@import url('//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,600,700');
+
+/*!
+ * Bootstrap v2.3.0
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.hide-text {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.input-block-level {
+  display: block;
+  width: 100%;
+  min-height: 30px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+  display: block;
+}
+
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+audio:not([controls]) {
+  display: none;
+}
+
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+}
+
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+a:hover,
+a:active {
+  outline: 0;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+img {
+  width: auto\9;
+  height: auto;
+  max-width: 100%;
+  vertical-align: middle;
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+}
+
+#map_canvas img,
+.google-maps img {
+  max-width: none;
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+
+button,
+input {
+  *overflow: visible;
+  line-height: normal;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  cursor: pointer;
+  -webkit-appearance: button;
+}
+
+label,
+select,
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer;
+}
+
+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-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+
+@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) ")";
+  }
+  .ir a:after,
+  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: 0.5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+
+body {
+  margin: 0;
+  line-height: 20px;
+  color: #555555;
+  background-color: #ffffff;
+}
+
+a {
+  color: #007fff;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: #0066cc;
+  text-decoration: underline;
+}
+
+.img-rounded {
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+.img-polaroid {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.img-circle {
+  -webkit-border-radius: 500px;
+     -moz-border-radius: 500px;
+          border-radius: 500px;
+}
+
+.row {
+  margin-left: -20px;
+  *zoom: 1;
+}
+
+.row:before,
+.row:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.row:after {
+  clear: both;
+}
+
+[class*="span"] {
+  float: left;
+  min-height: 1px;
+  margin-left: 20px;
+}
+
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+
+.span12 {
+  width: 940px;
+}
+
+.span11 {
+  width: 860px;
+}
+
+.span10 {
+  width: 780px;
+}
+
+.span9 {
+  width: 700px;
+}
+
+.span8 {
+  width: 620px;
+}
+
+.span7 {
+  width: 540px;
+}
+
+.span6 {
+  width: 460px;
+}
+
+.span5 {
+  width: 380px;
+}
+
+.span4 {
+  width: 300px;
+}
+
+.span3 {
+  width: 220px;
+}
+
+.span2 {
+  width: 140px;
+}
+
+.span1 {
+  width: 60px;
+}
+
+.offset12 {
+  margin-left: 980px;
+}
+
+.offset11 {
+  margin-left: 900px;
+}
+
+.offset10 {
+  margin-left: 820px;
+}
+
+.offset9 {
+  margin-left: 740px;
+}
+
+.offset8 {
+  margin-left: 660px;
+}
+
+.offset7 {
+  margin-left: 580px;
+}
+
+.offset6 {
+  margin-left: 500px;
+}
+
+.offset5 {
+  margin-left: 420px;
+}
+
+.offset4 {
+  margin-left: 340px;
+}
+
+.offset3 {
+  margin-left: 260px;
+}
+
+.offset2 {
+  margin-left: 180px;
+}
+
+.offset1 {
+  margin-left: 100px;
+}
+
+.row-fluid {
+  width: 100%;
+  *zoom: 1;
+}
+
+.row-fluid:before,
+.row-fluid:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.row-fluid:after {
+  clear: both;
+}
+
+.row-fluid [class*="span"] {
+  display: block;
+  float: left;
+  width: 100%;
+  min-height: 30px;
+  margin-left: 2.127659574468085%;
+  *margin-left: 2.074468085106383%;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.row-fluid [class*="span"]:first-child {
+  margin-left: 0;
+}
+
+.row-fluid .controls-row [class*="span"] + [class*="span"] {
+  margin-left: 2.127659574468085%;
+}
+
+.row-fluid .span12 {
+  width: 100%;
+  *width: 99.94680851063829%;
+}
+
+.row-fluid .span11 {
+  width: 91.48936170212765%;
+  *width: 91.43617021276594%;
+}
+
+.row-fluid .span10 {
+  width: 82.97872340425532%;
+  *width: 82.92553191489361%;
+}
+
+.row-fluid .span9 {
+  width: 74.46808510638297%;
+  *width: 74.41489361702126%;
+}
+
+.row-fluid .span8 {
+  width: 65.95744680851064%;
+  *width: 65.90425531914893%;
+}
+
+.row-fluid .span7 {
+  width: 57.44680851063829%;
+  *width: 57.39361702127659%;
+}
+
+.row-fluid .span6 {
+  width: 48.93617021276595%;
+  *width: 48.88297872340425%;
+}
+
+.row-fluid .span5 {
+  width: 40.42553191489362%;
+  *width: 40.37234042553192%;
+}
+
+.row-fluid .span4 {
+  width: 31.914893617021278%;
+  *width: 31.861702127659576%;
+}
+
+.row-fluid .span3 {
+  width: 23.404255319148934%;
+  *width: 23.351063829787233%;
+}
+
+.row-fluid .span2 {
+  width: 14.893617021276595%;
+  *width: 14.840425531914894%;
+}
+
+.row-fluid .span1 {
+  width: 6.382978723404255%;
+  *width: 6.329787234042553%;
+}
+
+.row-fluid .offset12 {
+  margin-left: 104.25531914893617%;
+  *margin-left: 104.14893617021275%;
+}
+
+.row-fluid .offset12:first-child {
+  margin-left: 102.12765957446808%;
+  *margin-left: 102.02127659574467%;
+}
+
+.row-fluid .offset11 {
+  margin-left: 95.74468085106382%;
+  *margin-left: 95.6382978723404%;
+}
+
+.row-fluid .offset11:first-child {
+  margin-left: 93.61702127659574%;
+  *margin-left: 93.51063829787232%;
+}
+
+.row-fluid .offset10 {
+  margin-left: 87.23404255319149%;
+  *margin-left: 87.12765957446807%;
+}
+
+.row-fluid .offset10:first-child {
+  margin-left: 85.1063829787234%;
+  *margin-left: 84.99999999999999%;
+}
+
+.row-fluid .offset9 {
+  margin-left: 78.72340425531914%;
+  *margin-left: 78.61702127659572%;
+}
+
+.row-fluid .offset9:first-child {
+  margin-left: 76.59574468085106%;
+  *margin-left: 76.48936170212764%;
+}
+
+.row-fluid .offset8 {
+  margin-left: 70.2127659574468%;
+  *margin-left: 70.10638297872339%;
+}
+
+.row-fluid .offset8:first-child {
+  margin-left: 68.08510638297872%;
+  *margin-left: 67.9787234042553%;
+}
+
+.row-fluid .offset7 {
+  margin-left: 61.70212765957446%;
+  *margin-left: 61.59574468085106%;
+}
+
+.row-fluid .offset7:first-child {
+  margin-left: 59.574468085106375%;
+  *margin-left: 59.46808510638297%;
+}
+
+.row-fluid .offset6 {
+  margin-left: 53.191489361702125%;
+  *margin-left: 53.085106382978715%;
+}
+
+.row-fluid .offset6:first-child {
+  margin-left: 51.063829787234035%;
+  *margin-left: 50.95744680851063%;
+}
+
+.row-fluid .offset5 {
+  margin-left: 44.68085106382979%;
+  *margin-left: 44.57446808510638%;
+}
+
+.row-fluid .offset5:first-child {
+  margin-left: 42.5531914893617%;
+  *margin-left: 42.4468085106383%;
+}
+
+.row-fluid .offset4 {
+  margin-left: 36.170212765957444%;
+  *margin-left: 36.06382978723405%;
+}
+
+.row-fluid .offset4:first-child {
+  margin-left: 34.04255319148936%;
+  *margin-left: 33.93617021276596%;
+}
+
+.row-fluid .offset3 {
+  margin-left: 27.659574468085104%;
+  *margin-left: 27.5531914893617%;
+}
+
+.row-fluid .offset3:first-child {
+  margin-left: 25.53191489361702%;
+  *margin-left: 25.425531914893618%;
+}
+
+.row-fluid .offset2 {
+  margin-left: 19.148936170212764%;
+  *margin-left: 19.04255319148936%;
+}
+
+.row-fluid .offset2:first-child {
+  margin-left: 17.02127659574468%;
+  *margin-left: 16.914893617021278%;
+}
+
+.row-fluid .offset1 {
+  margin-left: 10.638297872340425%;
+  *margin-left: 10.53191489361702%;
+}
+
+.row-fluid .offset1:first-child {
+  margin-left: 8.51063829787234%;
+  *margin-left: 8.404255319148938%;
+}
+
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
+  display: none;
+}
+
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
+
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  *zoom: 1;
+}
+
+.container:before,
+.container:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.container:after {
+  clear: both;
+}
+
+.container-fluid {
+  padding-right: 20px;
+  padding-left: 20px;
+  *zoom: 1;
+}
+
+.container-fluid:before,
+.container-fluid:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.container-fluid:after {
+  clear: both;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+.lead {
+  margin-bottom: 20px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+}
+
+small {
+  font-size: 85%;
+}
+
+strong {
+  font-weight: bold;
+}
+
+em {
+  font-style: italic;
+}
+
+cite {
+  font-style: normal;
+}
+
+.muted {
+  color: #dfdfdf;
+}
+
+a.muted:hover,
+a.muted:focus {
+  color: #c6c6c6;
+}
+
+.text-warning {
+  color: #ffffff;
+}
+
+a.text-warning:hover,
+a.text-warning:focus {
+  color: #e6e6e6;
+}
+
+.text-error {
+  color: #ffffff;
+}
+
+a.text-error:hover,
+a.text-error:focus {
+  color: #e6e6e6;
+}
+
+.text-info {
+  color: #ffffff;
+}
+
+a.text-info:hover,
+a.text-info:focus {
+  color: #e6e6e6;
+}
+
+.text-success {
+  color: #ffffff;
+}
+
+a.text-success:hover,
+a.text-success:focus {
+  color: #e6e6e6;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: 20px;
+  color: #080808;
+  text-rendering: optimizelegibility;
+}
+
+h1 small,
+h2 small,
+h3 small,
+h4 small,
+h5 small,
+h6 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #dfdfdf;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 40px;
+}
+
+h1 {
+  font-size: 38.5px;
+}
+
+h2 {
+  font-size: 31.5px;
+}
+
+h3 {
+  font-size: 24.5px;
+}
+
+h4 {
+  font-size: 17.5px;
+}
+
+h5 {
+  font-size: 14px;
+}
+
+h6 {
+  font-size: 11.9px;
+}
+
+h1 small {
+  font-size: 24.5px;
+}
+
+h2 small {
+  font-size: 17.5px;
+}
+
+h3 small {
+  font-size: 14px;
+}
+
+h4 small {
+  font-size: 14px;
+}
+
+.page-header {
+  padding-bottom: 9px;
+  margin: 20px 0 30px;
+  border-bottom: 1px solid #eeeeee;
+}
+
+ul,
+ol {
+  padding: 0;
+  margin: 0 0 10px 25px;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+
+li {
+  line-height: 20px;
+}
+
+ul.unstyled,
+ol.unstyled {
+  margin-left: 0;
+  list-style: none;
+}
+
+ul.inline,
+ol.inline {
+  margin-left: 0;
+  list-style: none;
+}
+
+ul.inline > li,
+ol.inline > li {
+  display: inline-block;
+  *display: inline;
+  padding-right: 5px;
+  padding-left: 5px;
+  *zoom: 1;
+}
+
+dl {
+  margin-bottom: 20px;
+}
+
+dt,
+dd {
+  line-height: 20px;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 10px;
+}
+
+.dl-horizontal {
+  *zoom: 1;
+}
+
+.dl-horizontal:before,
+.dl-horizontal:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.dl-horizontal:after {
+  clear: both;
+}
+
+.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;
+}
+
+hr {
+  margin: 20px 0;
+  border: 0;
+  border-top: 1px solid #eeeeee;
+  border-bottom: 1px solid #ffffff;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted #dfdfdf;
+}
+
+abbr.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+blockquote {
+  padding: 0 0 0 15px;
+  margin: 0 0 20px;
+  border-left: 5px solid #eeeeee;
+}
+
+blockquote p {
+  margin-bottom: 0;
+  font-size: 17.5px;
+  font-weight: 300;
+  line-height: 1.25;
+}
+
+blockquote small {
+  display: block;
+  line-height: 20px;
+  color: #dfdfdf;
+}
+
+blockquote small:before {
+  content: '\2014 \00A0';
+}
+
+blockquote.pull-right {
+  float: right;
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid #eeeeee;
+  border-left: 0;
+}
+
+blockquote.pull-right p,
+blockquote.pull-right small {
+  text-align: right;
+}
+
+blockquote.pull-right small:before {
+  content: '';
+}
+
+blockquote.pull-right small:after {
+  content: '\00A0 \2014';
+}
+
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
+  content: "";
+}
+
+address {
+  display: block;
+  margin-bottom: 20px;
+  font-style: normal;
+  line-height: 20px;
+}
+
+code,
+pre {
+  padding: 0 3px 2px;
+  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+  font-size: 12px;
+  color: #999999;
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+
+code {
+  padding: 2px 4px;
+  color: #d14;
+  white-space: nowrap;
+  background-color: #f7f7f9;
+  border: 1px solid #e1e1e8;
+}
+
+pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  line-height: 20px;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+pre.prettyprint {
+  margin-bottom: 20px;
+}
+
+pre code {
+  padding: 0;
+  color: inherit;
+  white-space: pre;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border: 0;
+}
+
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
+form {
+  margin: 0 0 20px;
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: 20px;
+  font-size: 21px;
+  line-height: 40px;
+  color: #999999;
+  border: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+legend small {
+  font-size: 15px;
+  color: #dfdfdf;
+}
+
+label,
+input,
+button,
+select,
+textarea {
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  display: inline-block;
+  height: 20px;
+  padding: 4px 6px;
+  margin-bottom: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #bbbbbb;
+  vertical-align: middle;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+input,
+textarea,
+.uneditable-input {
+  width: 206px;
+}
+
+textarea {
+  height: auto;
+}
+
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  background-color: #ffffff;
+  border: 1px solid #bbbbbb;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-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 linear 0.2s, box-shadow linear 0.2s;
+     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+          transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.uneditable-input:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  outline: thin dotted \9;
+  /* IE6-9 */
+
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9;
+  *margin-top: 0;
+  line-height: normal;
+}
+
+input[type="file"],
+input[type="image"],
+input[type="submit"],
+input[type="reset"],
+input[type="button"],
+input[type="radio"],
+input[type="checkbox"] {
+  width: auto;
+}
+
+select,
+input[type="file"] {
+  height: 30px;
+  /* In IE7, the height of the select element cannot be changed by height, only font-size */
+
+  *margin-top: 4px;
+  /* For IE7, add top margin to align select with labels */
+
+  line-height: 30px;
+}
+
+select {
+  width: 220px;
+  background-color: #ffffff;
+  border: 1px solid #bbbbbb;
+}
+
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+select:focus,
+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;
+}
+
+.uneditable-input,
+.uneditable-textarea {
+  color: #dfdfdf;
+  cursor: not-allowed;
+  background-color: #fcfcfc;
+  border-color: #bbbbbb;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
+}
+
+.uneditable-input {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.uneditable-textarea {
+  width: auto;
+  height: auto;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #bbbbbb;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+  color: #bbbbbb;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+  color: #bbbbbb;
+}
+
+.radio,
+.checkbox {
+  min-height: 20px;
+  padding-left: 20px;
+}
+
+.radio input[type="radio"],
+.checkbox input[type="checkbox"] {
+  float: left;
+  margin-left: -20px;
+}
+
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 5px;
+}
+
+.radio.inline,
+.checkbox.inline {
+  display: inline-block;
+  padding-top: 5px;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.radio.inline + .radio.inline,
+.checkbox.inline + .checkbox.inline {
+  margin-left: 10px;
+}
+
+.input-mini {
+  width: 60px;
+}
+
+.input-small {
+  width: 90px;
+}
+
+.input-medium {
+  width: 150px;
+}
+
+.input-large {
+  width: 210px;
+}
+
+.input-xlarge {
+  width: 270px;
+}
+
+.input-xxlarge {
+  width: 530px;
+}
+
+input[class*="span"],
+select[class*="span"],
+textarea[class*="span"],
+.uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"] {
+  float: none;
+  margin-left: 0;
+}
+
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"],
+.row-fluid input[class*="span"],
+.row-fluid select[class*="span"],
+.row-fluid textarea[class*="span"],
+.row-fluid .uneditable-input[class*="span"],
+.row-fluid .input-prepend [class*="span"],
+.row-fluid .input-append [class*="span"] {
+  display: inline-block;
+}
+
+input,
+textarea,
+.uneditable-input {
+  margin-left: 0;
+}
+
+.controls-row [class*="span"] + [class*="span"] {
+  margin-left: 20px;
+}
+
+input.span12,
+textarea.span12,
+.uneditable-input.span12 {
+  width: 926px;
+}
+
+input.span11,
+textarea.span11,
+.uneditable-input.span11 {
+  width: 846px;
+}
+
+input.span10,
+textarea.span10,
+.uneditable-input.span10 {
+  width: 766px;
+}
+
+input.span9,
+textarea.span9,
+.uneditable-input.span9 {
+  width: 686px;
+}
+
+input.span8,
+textarea.span8,
+.uneditable-input.span8 {
+  width: 606px;
+}
+
+input.span7,
+textarea.span7,
+.uneditable-input.span7 {
+  width: 526px;
+}
+
+input.span6,
+textarea.span6,
+.uneditable-input.span6 {
+  width: 446px;
+}
+
+input.span5,
+textarea.span5,
+.uneditable-input.span5 {
+  width: 366px;
+}
+
+input.span4,
+textarea.span4,
+.uneditable-input.span4 {
+  width: 286px;
+}
+
+input.span3,
+textarea.span3,
+.uneditable-input.span3 {
+  width: 206px;
+}
+
+input.span2,
+textarea.span2,
+.uneditable-input.span2 {
+  width: 126px;
+}
+
+input.span1,
+textarea.span1,
+.uneditable-input.span1 {
+  width: 46px;
+}
+
+.controls-row {
+  *zoom: 1;
+}
+
+.controls-row:before,
+.controls-row:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.controls-row:after {
+  clear: both;
+}
+
+.controls-row [class*="span"],
+.row-fluid .controls-row [class*="span"] {
+  float: left;
+}
+
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled],
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
+input[type="radio"][disabled],
+input[type="checkbox"][disabled],
+input[type="radio"][readonly],
+input[type="checkbox"][readonly] {
+  background-color: transparent;
+}
+
+.control-group.warning .control-label,
+.control-group.warning .help-block,
+.control-group.warning .help-inline {
+  color: #ffffff;
+}
+
+.control-group.warning .checkbox,
+.control-group.warning .radio,
+.control-group.warning input,
+.control-group.warning select,
+.control-group.warning textarea {
+  color: #ffffff;
+}
+
+.control-group.warning input,
+.control-group.warning select,
+.control-group.warning textarea {
+  border-color: #ffffff;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.control-group.warning input:focus,
+.control-group.warning select:focus,
+.control-group.warning textarea:focus {
+  border-color: #e6e6e6;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+}
+
+.control-group.warning .input-prepend .add-on,
+.control-group.warning .input-append .add-on {
+  color: #ffffff;
+  background-color: #ff7518;
+  border-color: #ffffff;
+}
+
+.control-group.error .control-label,
+.control-group.error .help-block,
+.control-group.error .help-inline {
+  color: #ffffff;
+}
+
+.control-group.error .checkbox,
+.control-group.error .radio,
+.control-group.error input,
+.control-group.error select,
+.control-group.error textarea {
+  color: #ffffff;
+}
+
+.control-group.error input,
+.control-group.error select,
+.control-group.error textarea {
+  border-color: #ffffff;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.control-group.error input:focus,
+.control-group.error select:focus,
+.control-group.error textarea:focus {
+  border-color: #e6e6e6;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+}
+
+.control-group.error .input-prepend .add-on,
+.control-group.error .input-append .add-on {
+  color: #ffffff;
+  background-color: #ff0039;
+  border-color: #ffffff;
+}
+
+.control-group.success .control-label,
+.control-group.success .help-block,
+.control-group.success .help-inline {
+  color: #ffffff;
+}
+
+.control-group.success .checkbox,
+.control-group.success .radio,
+.control-group.success input,
+.control-group.success select,
+.control-group.success textarea {
+  color: #ffffff;
+}
+
+.control-group.success input,
+.control-group.success select,
+.control-group.success textarea {
+  border-color: #ffffff;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.control-group.success input:focus,
+.control-group.success select:focus,
+.control-group.success textarea:focus {
+  border-color: #e6e6e6;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+}
+
+.control-group.success .input-prepend .add-on,
+.control-group.success .input-append .add-on {
+  color: #ffffff;
+  background-color: #3fb618;
+  border-color: #ffffff;
+}
+
+.control-group.info .control-label,
+.control-group.info .help-block,
+.control-group.info .help-inline {
+  color: #ffffff;
+}
+
+.control-group.info .checkbox,
+.control-group.info .radio,
+.control-group.info input,
+.control-group.info select,
+.control-group.info textarea {
+  color: #ffffff;
+}
+
+.control-group.info input,
+.control-group.info select,
+.control-group.info textarea {
+  border-color: #ffffff;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.control-group.info input:focus,
+.control-group.info select:focus,
+.control-group.info textarea:focus {
+  border-color: #e6e6e6;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
+}
+
+.control-group.info .input-prepend .add-on,
+.control-group.info .input-append .add-on {
+  color: #ffffff;
+  background-color: #9954bb;
+  border-color: #ffffff;
+}
+
+input:focus:invalid,
+textarea:focus:invalid,
+select:focus:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+}
+
+input:focus:invalid:focus,
+textarea:focus:invalid:focus,
+select:focus:invalid:focus {
+  border-color: #e9322d;
+  -webkit-box-shadow: 0 0 6px #f8b9b7;
+     -moz-box-shadow: 0 0 6px #f8b9b7;
+          box-shadow: 0 0 6px #f8b9b7;
+}
+
+.form-actions {
+  padding: 19px 20px 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  border-top: 1px solid #e5e5e5;
+  *zoom: 1;
+}
+
+.form-actions:before,
+.form-actions:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.form-actions:after {
+  clear: both;
+}
+
+.help-block,
+.help-inline {
+  color: #7b7b7b;
+}
+
+.help-block {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.help-inline {
+  display: inline-block;
+  *display: inline;
+  padding-left: 5px;
+  vertical-align: middle;
+  *zoom: 1;
+}
+
+.input-append,
+.input-prepend {
+  display: inline-block;
+  margin-bottom: 10px;
+  font-size: 0;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.input-append input,
+.input-prepend input,
+.input-append select,
+.input-prepend select,
+.input-append .uneditable-input,
+.input-prepend .uneditable-input,
+.input-append .dropdown-menu,
+.input-prepend .dropdown-menu,
+.input-append .popover,
+.input-prepend .popover {
+  font-size: 14px;
+}
+
+.input-append input,
+.input-prepend input,
+.input-append select,
+.input-prepend select,
+.input-append .uneditable-input,
+.input-prepend .uneditable-input {
+  position: relative;
+  margin-bottom: 0;
+  *margin-left: 0;
+  vertical-align: top;
+  -webkit-border-radius: 0 0 0px 0;
+     -moz-border-radius: 0 0 0px 0;
+          border-radius: 0 0 0px 0;
+}
+
+.input-append input:focus,
+.input-prepend input:focus,
+.input-append select:focus,
+.input-prepend select:focus,
+.input-append .uneditable-input:focus,
+.input-prepend .uneditable-input:focus {
+  z-index: 2;
+}
+
+.input-append .add-on,
+.input-prepend .add-on {
+  display: inline-block;
+  width: auto;
+  height: 20px;
+  min-width: 16px;
+  padding: 4px 5px;
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  text-align: center;
+  text-shadow: 0 1px 0 #ffffff;
+  background-color: #eeeeee;
+  border: 1px solid #ccc;
+}
+
+.input-append .add-on,
+.input-prepend .add-on,
+.input-append .btn,
+.input-prepend .btn,
+.input-append .btn-group > .dropdown-toggle,
+.input-prepend .btn-group > .dropdown-toggle {
+  vertical-align: top;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.input-append .active,
+.input-prepend .active {
+  background-color: #96ed7a;
+  border-color: #3fb618;
+}
+
+.input-prepend .add-on,
+.input-prepend .btn {
+  margin-right: -1px;
+}
+
+.input-prepend .add-on:first-child,
+.input-prepend .btn:first-child {
+  -webkit-border-radius: 0 0 0 0px;
+     -moz-border-radius: 0 0 0 0px;
+          border-radius: 0 0 0 0px;
+}
+
+.input-append input,
+.input-append select,
+.input-append .uneditable-input {
+  -webkit-border-radius: 0 0 0 0px;
+     -moz-border-radius: 0 0 0 0px;
+          border-radius: 0 0 0 0px;
+}
+
+.input-append input + .btn-group .btn:last-child,
+.input-append select + .btn-group .btn:last-child,
+.input-append .uneditable-input + .btn-group .btn:last-child {
+  -webkit-border-radius: 0 0 0px 0;
+     -moz-border-radius: 0 0 0px 0;
+          border-radius: 0 0 0px 0;
+}
+
+.input-append .add-on,
+.input-append .btn,
+.input-append .btn-group {
+  margin-left: -1px;
+}
+
+.input-append .add-on:last-child,
+.input-append .btn:last-child,
+.input-append .btn-group:last-child > .dropdown-toggle {
+  -webkit-border-radius: 0 0 0px 0;
+     -moz-border-radius: 0 0 0px 0;
+          border-radius: 0 0 0px 0;
+}
+
+.input-prepend.input-append input,
+.input-prepend.input-append select,
+.input-prepend.input-append .uneditable-input {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.input-prepend.input-append input + .btn-group .btn,
+.input-prepend.input-append select + .btn-group .btn,
+.input-prepend.input-append .uneditable-input + .btn-group .btn {
+  -webkit-border-radius: 0 0 0px 0;
+     -moz-border-radius: 0 0 0px 0;
+          border-radius: 0 0 0px 0;
+}
+
+.input-prepend.input-append .add-on:first-child,
+.input-prepend.input-append .btn:first-child {
+  margin-right: -1px;
+  -webkit-border-radius: 0 0 0 0px;
+     -moz-border-radius: 0 0 0 0px;
+          border-radius: 0 0 0 0px;
+}
+
+.input-prepend.input-append .add-on:last-child,
+.input-prepend.input-append .btn:last-child {
+  margin-left: -1px;
+  -webkit-border-radius: 0 0 0px 0;
+     -moz-border-radius: 0 0 0px 0;
+          border-radius: 0 0 0px 0;
+}
+
+.input-prepend.input-append .btn-group:first-child {
+  margin-left: 0;
+}
+
+input.search-query {
+  padding-right: 14px;
+  padding-right: 4px \9;
+  padding-left: 14px;
+  padding-left: 4px \9;
+  /* IE7-8 doesn't have border-radius, so don't indent the padding */
+
+  margin-bottom: 0;
+  -webkit-border-radius: 15px;
+     -moz-border-radius: 15px;
+          border-radius: 15px;
+}
+
+/* Allow for input prepend/append in search forms */
+
+.form-search .input-append .search-query,
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.form-search .input-append .search-query {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
+.form-search .input-append .btn {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .search-query {
+  -webkit-border-radius: 0 14px 14px 0;
+     -moz-border-radius: 0 14px 14px 0;
+          border-radius: 0 14px 14px 0;
+}
+
+.form-search .input-prepend .btn {
+  -webkit-border-radius: 14px 0 0 14px;
+     -moz-border-radius: 14px 0 0 14px;
+          border-radius: 14px 0 0 14px;
+}
+
+.form-search input,
+.form-inline input,
+.form-horizontal input,
+.form-search textarea,
+.form-inline textarea,
+.form-horizontal textarea,
+.form-search select,
+.form-inline select,
+.form-horizontal select,
+.form-search .help-inline,
+.form-inline .help-inline,
+.form-horizontal .help-inline,
+.form-search .uneditable-input,
+.form-inline .uneditable-input,
+.form-horizontal .uneditable-input,
+.form-search .input-prepend,
+.form-inline .input-prepend,
+.form-horizontal .input-prepend,
+.form-search .input-append,
+.form-inline .input-append,
+.form-horizontal .input-append {
+  display: inline-block;
+  *display: inline;
+  margin-bottom: 0;
+  vertical-align: middle;
+  *zoom: 1;
+}
+
+.form-search .hide,
+.form-inline .hide,
+.form-horizontal .hide {
+  display: none;
+}
+
+.form-search label,
+.form-inline label,
+.form-search .btn-group,
+.form-inline .btn-group {
+  display: inline-block;
+}
+
+.form-search .input-append,
+.form-inline .input-append,
+.form-search .input-prepend,
+.form-inline .input-prepend {
+  margin-bottom: 0;
+}
+
+.form-search .radio,
+.form-search .checkbox,
+.form-inline .radio,
+.form-inline .checkbox {
+  padding-left: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+}
+
+.form-search .radio input[type="radio"],
+.form-search .checkbox input[type="checkbox"],
+.form-inline .radio input[type="radio"],
+.form-inline .checkbox input[type="checkbox"] {
+  float: left;
+  margin-right: 3px;
+  margin-left: 0;
+}
+
+.control-group {
+  margin-bottom: 10px;
+}
+
+legend + .control-group {
+  margin-top: 20px;
+  -webkit-margin-top-collapse: separate;
+}
+
+.form-horizontal .control-group {
+  margin-bottom: 20px;
+  *zoom: 1;
+}
+
+.form-horizontal .control-group:before,
+.form-horizontal .control-group:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.form-horizontal .control-group:after {
+  clear: both;
+}
+
+.form-horizontal .control-label {
+  float: left;
+  width: 160px;
+  padding-top: 5px;
+  text-align: right;
+}
+
+.form-horizontal .controls {
+  *display: inline-block;
+  *padding-left: 20px;
+  margin-left: 180px;
+  *margin-left: 0;
+}
+
+.form-horizontal .controls:first-child {
+  *padding-left: 180px;
+}
+
+.form-horizontal .help-block {
+  margin-bottom: 0;
+}
+
+.form-horizontal input + .help-block,
+.form-horizontal select + .help-block,
+.form-horizontal textarea + .help-block,
+.form-horizontal .uneditable-input + .help-block,
+.form-horizontal .input-prepend + .help-block,
+.form-horizontal .input-append + .help-block {
+  margin-top: 10px;
+}
+
+.form-horizontal .form-actions {
+  padding-left: 180px;
+}
+
+table {
+  max-width: 100%;
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.table th,
+.table td {
+  padding: 8px;
+  line-height: 20px;
+  text-align: left;
+  vertical-align: top;
+  border-top: 1px solid #dddddd;
+}
+
+.table th {
+  font-weight: bold;
+}
+
+.table thead th {
+  vertical-align: bottom;
+}
+
+.table caption + thead tr:first-child th,
+.table caption + thead tr:first-child td,
+.table colgroup + thead tr:first-child th,
+.table colgroup + thead tr:first-child td,
+.table thead:first-child tr:first-child th,
+.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 th,
+.table-condensed td {
+  padding: 4px 5px;
+}
+
+.table-bordered {
+  border: 1px solid #dddddd;
+  border-collapse: separate;
+  *border-collapse: collapse;
+  border-left: 0;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.table-bordered th,
+.table-bordered td {
+  border-left: 1px solid #dddddd;
+}
+
+.table-bordered caption + thead tr:first-child th,
+.table-bordered caption + tbody tr:first-child th,
+.table-bordered caption + tbody tr:first-child td,
+.table-bordered colgroup + thead tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child th,
+.table-bordered colgroup + tbody tr:first-child td,
+.table-bordered thead:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child th,
+.table-bordered tbody:first-child tr:first-child td {
+  border-top: 0;
+}
+
+.table-bordered thead:first-child tr:first-child > th:first-child,
+.table-bordered tbody:first-child tr:first-child > td:first-child,
+.table-bordered tbody:first-child tr:first-child > th:first-child {
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.table-bordered thead:first-child tr:first-child > th:last-child,
+.table-bordered tbody:first-child tr:first-child > td:last-child,
+.table-bordered tbody:first-child tr:first-child > th:last-child {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -moz-border-radius-topright: 0;
+}
+
+.table-bordered thead:last-child tr:last-child > th:first-child,
+.table-bordered tbody:last-child tr:last-child > td:first-child,
+.table-bordered tbody:last-child tr:last-child > th:first-child,
+.table-bordered tfoot:last-child tr:last-child > td:first-child,
+.table-bordered tfoot:last-child tr:last-child > th:first-child {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+}
+
+.table-bordered thead:last-child tr:last-child > th:last-child,
+.table-bordered tbody:last-child tr:last-child > td:last-child,
+.table-bordered tbody:last-child tr:last-child > th:last-child,
+.table-bordered tfoot:last-child tr:last-child > td:last-child,
+.table-bordered tfoot:last-child tr:last-child > th:last-child {
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:first-child {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+}
+
+.table-bordered tfoot + tbody:last-child tr:last-child td:last-child {
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.table-bordered caption + thead tr:first-child th:first-child,
+.table-bordered caption + tbody tr:first-child td:first-child,
+.table-bordered colgroup + thead tr:first-child th:first-child,
+.table-bordered colgroup + tbody tr:first-child td:first-child {
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.table-bordered caption + thead tr:first-child th:last-child,
+.table-bordered caption + tbody tr:first-child td:last-child,
+.table-bordered colgroup + thead tr:first-child th:last-child,
+.table-bordered colgroup + tbody tr:first-child td:last-child {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -moz-border-radius-topright: 0;
+}
+
+.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: #e8f8fd;
+}
+
+table td[class*="span"],
+table th[class*="span"],
+.row-fluid table td[class*="span"],
+.row-fluid table th[class*="span"] {
+  display: table-cell;
+  float: none;
+  margin-left: 0;
+}
+
+.table td.span1,
+.table th.span1 {
+  float: none;
+  width: 44px;
+  margin-left: 0;
+}
+
+.table td.span2,
+.table th.span2 {
+  float: none;
+  width: 124px;
+  margin-left: 0;
+}
+
+.table td.span3,
+.table th.span3 {
+  float: none;
+  width: 204px;
+  margin-left: 0;
+}
+
+.table td.span4,
+.table th.span4 {
+  float: none;
+  width: 284px;
+  margin-left: 0;
+}
+
+.table td.span5,
+.table th.span5 {
+  float: none;
+  width: 364px;
+  margin-left: 0;
+}
+
+.table td.span6,
+.table th.span6 {
+  float: none;
+  width: 444px;
+  margin-left: 0;
+}
+
+.table td.span7,
+.table th.span7 {
+  float: none;
+  width: 524px;
+  margin-left: 0;
+}
+
+.table td.span8,
+.table th.span8 {
+  float: none;
+  width: 604px;
+  margin-left: 0;
+}
+
+.table td.span9,
+.table th.span9 {
+  float: none;
+  width: 684px;
+  margin-left: 0;
+}
+
+.table td.span10,
+.table th.span10 {
+  float: none;
+  width: 764px;
+  margin-left: 0;
+}
+
+.table td.span11,
+.table th.span11 {
+  float: none;
+  width: 844px;
+  margin-left: 0;
+}
+
+.table td.span12,
+.table th.span12 {
+  float: none;
+  width: 924px;
+  margin-left: 0;
+}
+
+.table tbody tr.success > td {
+  background-color: #3fb618;
+}
+
+.table tbody tr.error > td {
+  background-color: #ff0039;
+}
+
+.table tbody tr.warning > td {
+  background-color: #ff7518;
+}
+
+.table tbody tr.info > td {
+  background-color: #9954bb;
+}
+
+.table-hover tbody tr.success:hover > td {
+  background-color: #379f15;
+}
+
+.table-hover tbody tr.error:hover > td {
+  background-color: #e60033;
+}
+
+.table-hover tbody tr.warning:hover > td {
+  background-color: #fe6600;
+}
+
+.table-hover tbody tr.info:hover > td {
+  background-color: #8d46b0;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-top: 1px;
+  *margin-right: .3em;
+  line-height: 14px;
+  vertical-align: text-top;
+  background-image: url("../img/glyphicons-halflings.png");
+  background-position: 14px 14px;
+  background-repeat: no-repeat;
+}
+
+/* White icons with optional class, or on hover/focus/active states of certain elements */
+
+.icon-white,
+.nav-pills > .active > a > [class^="icon-"],
+.nav-pills > .active > a > [class*=" icon-"],
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.navbar-inverse .nav > .active > a > [class^="icon-"],
+.navbar-inverse .nav > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:focus > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > li > a:focus > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"],
+.dropdown-submenu:hover > a > [class^="icon-"],
+.dropdown-submenu:focus > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"],
+.dropdown-submenu:focus > a > [class*=" icon-"] {
+  background-image: url("../img/glyphicons-halflings-white.png");
+}
+
+.icon-glass {
+  background-position: 0      0;
+}
+
+.icon-music {
+  background-position: -24px 0;
+}
+
+.icon-search {
+  background-position: -48px 0;
+}
+
+.icon-envelope {
+  background-position: -72px 0;
+}
+
+.icon-heart {
+  background-position: -96px 0;
+}
+
+.icon-star {
+  background-position: -120px 0;
+}
+
+.icon-star-empty {
+  background-position: -144px 0;
+}
+
+.icon-user {
+  background-position: -168px 0;
+}
+
+.icon-film {
+  background-position: -192px 0;
+}
+
+.icon-th-large {
+  background-position: -216px 0;
+}
+
+.icon-th {
+  background-position: -240px 0;
+}
+
+.icon-th-list {
+  background-position: -264px 0;
+}
+
+.icon-ok {
+  background-position: -288px 0;
+}
+
+.icon-remove {
+  background-position: -312px 0;
+}
+
+.icon-zoom-in {
+  background-position: -336px 0;
+}
+
+.icon-zoom-out {
+  background-position: -360px 0;
+}
+
+.icon-off {
+  background-position: -384px 0;
+}
+
+.icon-signal {
+  background-position: -408px 0;
+}
+
+.icon-cog {
+  background-position: -432px 0;
+}
+
+.icon-trash {
+  background-position: -456px 0;
+}
+
+.icon-home {
+  background-position: 0 -24px;
+}
+
+.icon-file {
+  background-position: -24px -24px;
+}
+
+.icon-time {
+  background-position: -48px -24px;
+}
+
+.icon-road {
+  background-position: -72px -24px;
+}
+
+.icon-download-alt {
+  background-position: -96px -24px;
+}
+
+.icon-download {
+  background-position: -120px -24px;
+}
+
+.icon-upload {
+  background-position: -144px -24px;
+}
+
+.icon-inbox {
+  background-position: -168px -24px;
+}
+
+.icon-play-circle {
+  background-position: -192px -24px;
+}
+
+.icon-repeat {
+  background-position: -216px -24px;
+}
+
+.icon-refresh {
+  background-position: -240px -24px;
+}
+
+.icon-list-alt {
+  background-position: -264px -24px;
+}
+
+.icon-lock {
+  background-position: -287px -24px;
+}
+
+.icon-flag {
+  background-position: -312px -24px;
+}
+
+.icon-headphones {
+  background-position: -336px -24px;
+}
+
+.icon-volume-off {
+  background-position: -360px -24px;
+}
+
+.icon-volume-down {
+  background-position: -384px -24px;
+}
+
+.icon-volume-up {
+  background-position: -408px -24px;
+}
+
+.icon-qrcode {
+  background-position: -432px -24px;
+}
+
+.icon-barcode {
+  background-position: -456px -24px;
+}
+
+.icon-tag {
+  background-position: 0 -48px;
+}
+
+.icon-tags {
+  background-position: -25px -48px;
+}
+
+.icon-book {
+  background-position: -48px -48px;
+}
+
+.icon-bookmark {
+  background-position: -72px -48px;
+}
+
+.icon-print {
+  background-position: -96px -48px;
+}
+
+.icon-camera {
+  background-position: -120px -48px;
+}
+
+.icon-font {
+  background-position: -144px -48px;
+}
+
+.icon-bold {
+  background-position: -167px -48px;
+}
+
+.icon-italic {
+  background-position: -192px -48px;
+}
+
+.icon-text-height {
+  background-position: -216px -48px;
+}
+
+.icon-text-width {
+  background-position: -240px -48px;
+}
+
+.icon-align-left {
+  background-position: -264px -48px;
+}
+
+.icon-align-center {
+  background-position: -288px -48px;
+}
+
+.icon-align-right {
+  background-position: -312px -48px;
+}
+
+.icon-align-justify {
+  background-position: -336px -48px;
+}
+
+.icon-list {
+  background-position: -360px -48px;
+}
+
+.icon-indent-left {
+  background-position: -384px -48px;
+}
+
+.icon-indent-right {
+  background-position: -408px -48px;
+}
+
+.icon-facetime-video {
+  background-position: -432px -48px;
+}
+
+.icon-picture {
+  background-position: -456px -48px;
+}
+
+.icon-pencil {
+  background-position: 0 -72px;
+}
+
+.icon-map-marker {
+  background-position: -24px -72px;
+}
+
+.icon-adjust {
+  background-position: -48px -72px;
+}
+
+.icon-tint {
+  background-position: -72px -72px;
+}
+
+.icon-edit {
+  background-position: -96px -72px;
+}
+
+.icon-share {
+  background-position: -120px -72px;
+}
+
+.icon-check {
+  background-position: -144px -72px;
+}
+
+.icon-move {
+  background-position: -168px -72px;
+}
+
+.icon-step-backward {
+  background-position: -192px -72px;
+}
+
+.icon-fast-backward {
+  background-position: -216px -72px;
+}
+
+.icon-backward {
+  background-position: -240px -72px;
+}
+
+.icon-play {
+  background-position: -264px -72px;
+}
+
+.icon-pause {
+  background-position: -288px -72px;
+}
+
+.icon-stop {
+  background-position: -312px -72px;
+}
+
+.icon-forward {
+  background-position: -336px -72px;
+}
+
+.icon-fast-forward {
+  background-position: -360px -72px;
+}
+
+.icon-step-forward {
+  background-position: -384px -72px;
+}
+
+.icon-eject {
+  background-position: -408px -72px;
+}
+
+.icon-chevron-left {
+  background-position: -432px -72px;
+}
+
+.icon-chevron-right {
+  background-position: -456px -72px;
+}
+
+.icon-plus-sign {
+  background-position: 0 -96px;
+}
+
+.icon-minus-sign {
+  background-position: -24px -96px;
+}
+
+.icon-remove-sign {
+  background-position: -48px -96px;
+}
+
+.icon-ok-sign {
+  background-position: -72px -96px;
+}
+
+.icon-question-sign {
+  background-position: -96px -96px;
+}
+
+.icon-info-sign {
+  background-position: -120px -96px;
+}
+
+.icon-screenshot {
+  background-position: -144px -96px;
+}
+
+.icon-remove-circle {
+  background-position: -168px -96px;
+}
+
+.icon-ok-circle {
+  background-position: -192px -96px;
+}
+
+.icon-ban-circle {
+  background-position: -216px -96px;
+}
+
+.icon-arrow-left {
+  background-position: -240px -96px;
+}
+
+.icon-arrow-right {
+  background-position: -264px -96px;
+}
+
+.icon-arrow-up {
+  background-position: -289px -96px;
+}
+
+.icon-arrow-down {
+  background-position: -312px -96px;
+}
+
+.icon-share-alt {
+  background-position: -336px -96px;
+}
+
+.icon-resize-full {
+  background-position: -360px -96px;
+}
+
+.icon-resize-small {
+  background-position: -384px -96px;
+}
+
+.icon-plus {
+  background-position: -408px -96px;
+}
+
+.icon-minus {
+  background-position: -433px -96px;
+}
+
+.icon-asterisk {
+  background-position: -456px -96px;
+}
+
+.icon-exclamation-sign {
+  background-position: 0 -120px;
+}
+
+.icon-gift {
+  background-position: -24px -120px;
+}
+
+.icon-leaf {
+  background-position: -48px -120px;
+}
+
+.icon-fire {
+  background-position: -72px -120px;
+}
+
+.icon-eye-open {
+  background-position: -96px -120px;
+}
+
+.icon-eye-close {
+  background-position: -120px -120px;
+}
+
+.icon-warning-sign {
+  background-position: -144px -120px;
+}
+
+.icon-plane {
+  background-position: -168px -120px;
+}
+
+.icon-calendar {
+  background-position: -192px -120px;
+}
+
+.icon-random {
+  width: 16px;
+  background-position: -216px -120px;
+}
+
+.icon-comment {
+  background-position: -240px -120px;
+}
+
+.icon-magnet {
+  background-position: -264px -120px;
+}
+
+.icon-chevron-up {
+  background-position: -288px -120px;
+}
+
+.icon-chevron-down {
+  background-position: -313px -119px;
+}
+
+.icon-retweet {
+  background-position: -336px -120px;
+}
+
+.icon-shopping-cart {
+  background-position: -360px -120px;
+}
+
+.icon-folder-close {
+  width: 16px;
+  background-position: -384px -120px;
+}
+
+.icon-folder-open {
+  width: 16px;
+  background-position: -408px -120px;
+}
+
+.icon-resize-vertical {
+  background-position: -432px -119px;
+}
+
+.icon-resize-horizontal {
+  background-position: -456px -118px;
+}
+
+.icon-hdd {
+  background-position: 0 -144px;
+}
+
+.icon-bullhorn {
+  background-position: -24px -144px;
+}
+
+.icon-bell {
+  background-position: -48px -144px;
+}
+
+.icon-certificate {
+  background-position: -72px -144px;
+}
+
+.icon-thumbs-up {
+  background-position: -96px -144px;
+}
+
+.icon-thumbs-down {
+  background-position: -120px -144px;
+}
+
+.icon-hand-right {
+  background-position: -144px -144px;
+}
+
+.icon-hand-left {
+  background-position: -168px -144px;
+}
+
+.icon-hand-up {
+  background-position: -192px -144px;
+}
+
+.icon-hand-down {
+  background-position: -216px -144px;
+}
+
+.icon-circle-arrow-right {
+  background-position: -240px -144px;
+}
+
+.icon-circle-arrow-left {
+  background-position: -264px -144px;
+}
+
+.icon-circle-arrow-up {
+  background-position: -288px -144px;
+}
+
+.icon-circle-arrow-down {
+  background-position: -312px -144px;
+}
+
+.icon-globe {
+  background-position: -336px -144px;
+}
+
+.icon-wrench {
+  background-position: -360px -144px;
+}
+
+.icon-tasks {
+  background-position: -384px -144px;
+}
+
+.icon-filter {
+  background-position: -408px -144px;
+}
+
+.icon-briefcase {
+  background-position: -432px -144px;
+}
+
+.icon-fullscreen {
+  background-position: -456px -144px;
+}
+
+.dropup,
+.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle {
+  *margin-bottom: -3px;
+}
+
+.dropdown-toggle:active,
+.open .dropdown-toggle {
+  outline: 0;
+}
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  vertical-align: top;
+  border-top: 4px solid #000000;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  content: "";
+}
+
+.dropdown .caret {
+  margin-top: 8px;
+  margin-left: 2px;
+}
+
+.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;
+  list-style: none;
+  background-color: #ffffff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.dropdown-menu .divider {
+  *width: 100%;
+  height: 1px;
+  margin: 9px 1px;
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+}
+
+.dropdown-menu > li > a {
+  display: block;
+  padding: 3px 20px;
+  clear: both;
+  font-weight: normal;
+  line-height: 20px;
+  color: #999999;
+  white-space: nowrap;
+}
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus,
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #007af5;
+  background-image: -moz-linear-gradient(top, #007fff, #0072e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#007fff), to(#0072e6));
+  background-image: -webkit-linear-gradient(top, #007fff, #0072e6);
+  background-image: -o-linear-gradient(top, #007fff, #0072e6);
+  background-image: linear-gradient(to bottom, #007fff, #0072e6);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff007fff', endColorstr='#ff0072e6', GradientType=0);
+}
+
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: #007af5;
+  background-image: -moz-linear-gradient(top, #007fff, #0072e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#007fff), to(#0072e6));
+  background-image: -webkit-linear-gradient(top, #007fff, #0072e6);
+  background-image: -o-linear-gradient(top, #007fff, #0072e6);
+  background-image: linear-gradient(to bottom, #007fff, #0072e6);
+  background-repeat: repeat-x;
+  outline: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff007fff', endColorstr='#ff0072e6', GradientType=0);
+}
+
+.dropdown-menu > .disabled > a,
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  color: #dfdfdf;
+}
+
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+  background-image: none;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.open {
+  *z-index: 1000;
+}
+
+.open > .dropdown-menu {
+  display: block;
+}
+
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+.dropup .caret,
+.navbar-fixed-bottom .dropdown .caret {
+  border-top: 0;
+  border-bottom: 4px solid #000000;
+  content: "";
+}
+
+.dropup .dropdown-menu,
+.navbar-fixed-bottom .dropdown .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-bottom: 1px;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+     -moz-border-radius: 0 6px 6px 6px;
+          border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  float: right;
+  width: 0;
+  height: 0;
+  margin-top: 5px;
+  margin-right: -10px;
+  border-color: transparent;
+  border-left-color: #cccccc;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  content: " ";
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+          border-radius: 6px 0 6px 6px;
+}
+
+.dropdown .dropdown-menu .nav-header {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+.typeahead {
+  z-index: 1051;
+  margin-top: 2px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: #eeeeee;
+  border: 1px solid #dcdcdc;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+     -moz-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-large {
+  padding: 24px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.well-small {
+  padding: 9px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.fade {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s linear;
+     -moz-transition: opacity 0.15s linear;
+       -o-transition: opacity 0.15s linear;
+          transition: opacity 0.15s linear;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.collapse {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition: height 0.35s ease;
+     -moz-transition: height 0.35s ease;
+       -o-transition: height 0.35s ease;
+          transition: height 0.35s ease;
+}
+
+.collapse.in {
+  height: auto;
+}
+
+.close {
+  float: right;
+  font-size: 20px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #000000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+
+.close:hover,
+.close:focus {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.4;
+  filter: alpha(opacity=40);
+}
+
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+
+.btn {
+  display: inline-block;
+  *display: inline;
+  padding: 4px 12px;
+  margin-bottom: 0;
+  *margin-left: .3em;
+  font-size: 14px;
+  line-height: 20px;
+  color: #999999;
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  vertical-align: middle;
+  cursor: pointer;
+  background-color: #dfdfdf;
+  *background-color: #c8c8c8;
+  background-image: -moz-linear-gradient(top, #eeeeee, #c8c8c8);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#c8c8c8));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #c8c8c8);
+  background-image: -o-linear-gradient(top, #eeeeee, #c8c8c8);
+  background-image: linear-gradient(to bottom, #eeeeee, #c8c8c8);
+  background-repeat: repeat-x;
+  border: 1px solid #bbbbbb;
+  *border: 0;
+  border-color: #c8c8c8 #c8c8c8 #a2a2a2;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  border-bottom-color: #a2a2a2;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffc8c8c8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn:hover,
+.btn:focus,
+.btn:active,
+.btn.active,
+.btn.disabled,
+.btn[disabled] {
+  color: #999999;
+  background-color: #c8c8c8;
+  *background-color: #bbbbbb;
+}
+
+.btn:active,
+.btn.active {
+  background-color: #aeaeae \9;
+}
+
+.btn:first-child {
+  *margin-left: 0;
+}
+
+.btn:hover,
+.btn:focus {
+  color: #999999;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+     -moz-transition: background-position 0.1s linear;
+       -o-transition: background-position 0.1s linear;
+          transition: background-position 0.1s linear;
+}
+
+.btn:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.btn.active,
+.btn:active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn.disabled,
+.btn[disabled] {
+  cursor: default;
+  background-image: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-large {
+  padding: 22px 30px;
+  font-size: 17.5px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-large [class^="icon-"],
+.btn-large [class*=" icon-"] {
+  margin-top: 4px;
+}
+
+.btn-small {
+  padding: 2px 10px;
+  font-size: 11.9px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-small [class^="icon-"],
+.btn-small [class*=" icon-"] {
+  margin-top: 0;
+}
+
+.btn-mini [class^="icon-"],
+.btn-mini [class*=" icon-"] {
+  margin-top: -1px;
+}
+
+.btn-mini {
+  padding: 2px 6px;
+  font-size: 10.5px;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
+.btn-primary.active,
+.btn-warning.active,
+.btn-danger.active,
+.btn-success.active,
+.btn-info.active,
+.btn-inverse.active {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.btn-primary {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #0f82f5;
+  *background-color: #0072e6;
+  background-image: -moz-linear-gradient(top, #1a8cff, #0072e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1a8cff), to(#0072e6));
+  background-image: -webkit-linear-gradient(top, #1a8cff, #0072e6);
+  background-image: -o-linear-gradient(top, #1a8cff, #0072e6);
+  background-image: linear-gradient(to bottom, #1a8cff, #0072e6);
+  background-repeat: repeat-x;
+  border-color: #0072e6 #0072e6 #004c99;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1a8cff', endColorstr='#ff0072e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+  color: #ffffff;
+  background-color: #0072e6;
+  *background-color: #0066cc;
+}
+
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #0059b3 \9;
+}
+
+.btn-warning {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #fe781e;
+  *background-color: #fe6600;
+  background-image: -moz-linear-gradient(top, #ff8432, #fe6600);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff8432), to(#fe6600));
+  background-image: -webkit-linear-gradient(top, #ff8432, #fe6600);
+  background-image: -o-linear-gradient(top, #ff8432, #fe6600);
+  background-image: linear-gradient(to bottom, #ff8432, #fe6600);
+  background-repeat: repeat-x;
+  border-color: #fe6600 #fe6600 #b14700;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff8432', endColorstr='#fffe6600', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active,
+.btn-warning.active,
+.btn-warning.disabled,
+.btn-warning[disabled] {
+  color: #ffffff;
+  background-color: #fe6600;
+  *background-color: #e45c00;
+}
+
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #cb5200 \9;
+}
+
+.btn-danger {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #f50f43;
+  *background-color: #e60033;
+  background-image: -moz-linear-gradient(top, #ff1a4d, #e60033);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff1a4d), to(#e60033));
+  background-image: -webkit-linear-gradient(top, #ff1a4d, #e60033);
+  background-image: -o-linear-gradient(top, #ff1a4d, #e60033);
+  background-image: linear-gradient(to bottom, #ff1a4d, #e60033);
+  background-repeat: repeat-x;
+  border-color: #e60033 #e60033 #990022;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff1a4d', endColorstr='#ffe60033', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-danger:active,
+.btn-danger.active,
+.btn-danger.disabled,
+.btn-danger[disabled] {
+  color: #ffffff;
+  background-color: #e60033;
+  *background-color: #cc002e;
+}
+
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #b30028 \9;
+}
+
+.btn-success {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #41bb19;
+  *background-color: #379f15;
+  background-image: -moz-linear-gradient(top, #47cd1b, #379f15);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#47cd1b), to(#379f15));
+  background-image: -webkit-linear-gradient(top, #47cd1b, #379f15);
+  background-image: -o-linear-gradient(top, #47cd1b, #379f15);
+  background-image: linear-gradient(to bottom, #47cd1b, #379f15);
+  background-repeat: repeat-x;
+  border-color: #379f15 #379f15 #205c0c;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff47cd1b', endColorstr='#ff379f15', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active,
+.btn-success.active,
+.btn-success.disabled,
+.btn-success[disabled] {
+  color: #ffffff;
+  background-color: #379f15;
+  *background-color: #2f8912;
+}
+
+.btn-success:active,
+.btn-success.active {
+  background-color: #28720f \9;
+}
+
+.btn-info {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #9b59bb;
+  *background-color: #8d46b0;
+  background-image: -moz-linear-gradient(top, #a466c2, #8d46b0);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#a466c2), to(#8d46b0));
+  background-image: -webkit-linear-gradient(top, #a466c2, #8d46b0);
+  background-image: -o-linear-gradient(top, #a466c2, #8d46b0);
+  background-image: linear-gradient(to bottom, #a466c2, #8d46b0);
+  background-repeat: repeat-x;
+  border-color: #8d46b0 #8d46b0 #613079;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa466c2', endColorstr='#ff8d46b0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active,
+.btn-info.active,
+.btn-info.disabled,
+.btn-info[disabled] {
+  color: #ffffff;
+  background-color: #8d46b0;
+  *background-color: #7e3f9d;
+}
+
+.btn-info:active,
+.btn-info.active {
+  background-color: #6f378b \9;
+}
+
+.btn-inverse {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #080808;
+  *background-color: #000000;
+  background-image: -moz-linear-gradient(top, #0d0d0d, #000000);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0d0d0d), to(#000000));
+  background-image: -webkit-linear-gradient(top, #0d0d0d, #000000);
+  background-image: -o-linear-gradient(top, #0d0d0d, #000000);
+  background-image: linear-gradient(to bottom, #0d0d0d, #000000);
+  background-repeat: repeat-x;
+  border-color: #000000 #000000 #000000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0d0d0d', endColorstr='#ff000000', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.btn-inverse:hover,
+.btn-inverse:focus,
+.btn-inverse:active,
+.btn-inverse.active,
+.btn-inverse.disabled,
+.btn-inverse[disabled] {
+  color: #ffffff;
+  background-color: #000000;
+  *background-color: #000000;
+}
+
+.btn-inverse:active,
+.btn-inverse.active {
+  background-color: #000000 \9;
+}
+
+button.btn,
+input[type="submit"].btn {
+  *padding-top: 3px;
+  *padding-bottom: 3px;
+}
+
+button.btn::-moz-focus-inner,
+input[type="submit"].btn::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+
+button.btn.btn-large,
+input[type="submit"].btn.btn-large {
+  *padding-top: 7px;
+  *padding-bottom: 7px;
+}
+
+button.btn.btn-small,
+input[type="submit"].btn.btn-small {
+  *padding-top: 3px;
+  *padding-bottom: 3px;
+}
+
+button.btn.btn-mini,
+input[type="submit"].btn.btn-mini {
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+
+.btn-link,
+.btn-link:active,
+.btn-link[disabled] {
+  background-color: transparent;
+  background-image: none;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn-link {
+  color: #007fff;
+  cursor: pointer;
+  border-color: transparent;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-link:hover,
+.btn-link:focus {
+  color: #0066cc;
+  text-decoration: underline;
+  background-color: transparent;
+}
+
+.btn-link[disabled]:hover,
+.btn-link[disabled]:focus {
+  color: #999999;
+  text-decoration: none;
+}
+
+.btn-group {
+  position: relative;
+  display: inline-block;
+  *display: inline;
+  *margin-left: .3em;
+  font-size: 0;
+  white-space: nowrap;
+  vertical-align: middle;
+  *zoom: 1;
+}
+
+.btn-group:first-child {
+  *margin-left: 0;
+}
+
+.btn-group + .btn-group {
+  margin-left: 5px;
+}
+
+.btn-toolbar {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 0;
+}
+
+.btn-toolbar > .btn + .btn,
+.btn-toolbar > .btn-group + .btn,
+.btn-toolbar > .btn + .btn-group {
+  margin-left: 5px;
+}
+
+.btn-group > .btn {
+  position: relative;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-group > .btn + .btn {
+  margin-left: -1px;
+}
+
+.btn-group > .btn,
+.btn-group > .dropdown-menu,
+.btn-group > .popover {
+  font-size: 14px;
+}
+
+.btn-group > .btn-mini {
+  font-size: 10.5px;
+}
+
+.btn-group > .btn-small {
+  font-size: 11.9px;
+}
+
+.btn-group > .btn-large {
+  font-size: 17.5px;
+}
+
+.btn-group > .btn:first-child {
+  margin-left: 0;
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.btn-group > .btn.large:first-child {
+  margin-left: 0;
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.btn-group > .btn:hover,
+.btn-group > .btn:focus,
+.btn-group > .btn:active,
+.btn-group > .btn.active {
+  z-index: 2;
+}
+
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+.btn-group > .btn + .dropdown-toggle {
+  *padding-top: 5px;
+  padding-right: 8px;
+  *padding-bottom: 5px;
+  padding-left: 8px;
+  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-group > .btn-mini + .dropdown-toggle {
+  *padding-top: 2px;
+  padding-right: 5px;
+  *padding-bottom: 2px;
+  padding-left: 5px;
+}
+
+.btn-group > .btn-small + .dropdown-toggle {
+  *padding-top: 5px;
+  *padding-bottom: 4px;
+}
+
+.btn-group > .btn-large + .dropdown-toggle {
+  *padding-top: 7px;
+  padding-right: 12px;
+  *padding-bottom: 7px;
+  padding-left: 12px;
+}
+
+.btn-group.open .dropdown-toggle {
+  background-image: none;
+  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-group.open .btn.dropdown-toggle {
+  background-color: #c8c8c8;
+}
+
+.btn-group.open .btn-primary.dropdown-toggle {
+  background-color: #0072e6;
+}
+
+.btn-group.open .btn-warning.dropdown-toggle {
+  background-color: #fe6600;
+}
+
+.btn-group.open .btn-danger.dropdown-toggle {
+  background-color: #e60033;
+}
+
+.btn-group.open .btn-success.dropdown-toggle {
+  background-color: #379f15;
+}
+
+.btn-group.open .btn-info.dropdown-toggle {
+  background-color: #8d46b0;
+}
+
+.btn-group.open .btn-inverse.dropdown-toggle {
+  background-color: #000000;
+}
+
+.btn .caret {
+  margin-top: 8px;
+  margin-left: 0;
+}
+
+.btn-large .caret {
+  margin-top: 6px;
+}
+
+.btn-large .caret {
+  border-top-width: 5px;
+  border-right-width: 5px;
+  border-left-width: 5px;
+}
+
+.btn-mini .caret,
+.btn-small .caret {
+  margin-top: 8px;
+}
+
+.dropup .btn-large .caret {
+  border-bottom-width: 5px;
+}
+
+.btn-primary .caret,
+.btn-warning .caret,
+.btn-danger .caret,
+.btn-info .caret,
+.btn-success .caret,
+.btn-inverse .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.btn-group-vertical {
+  display: inline-block;
+  *display: inline;
+  /* IE7 inline-block hack */
+
+  *zoom: 1;
+}
+
+.btn-group-vertical > .btn {
+  display: block;
+  float: none;
+  max-width: 100%;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-group-vertical > .btn + .btn {
+  margin-top: -1px;
+  margin-left: 0;
+}
+
+.btn-group-vertical > .btn:first-child {
+  -webkit-border-radius: 0 0px 0 0;
+     -moz-border-radius: 0 0px 0 0;
+          border-radius: 0 0px 0 0;
+}
+
+.btn-group-vertical > .btn:last-child {
+  -webkit-border-radius: 0 0 0 0px;
+     -moz-border-radius: 0 0 0 0px;
+          border-radius: 0 0 0 0px;
+}
+
+.btn-group-vertical > .btn-large:first-child {
+  -webkit-border-radius: 0 0px 0 0;
+     -moz-border-radius: 0 0px 0 0;
+          border-radius: 0 0px 0 0;
+}
+
+.btn-group-vertical > .btn-large:last-child {
+  -webkit-border-radius: 0 0 0 0px;
+     -moz-border-radius: 0 0 0 0px;
+          border-radius: 0 0 0 0px;
+}
+
+.alert {
+  padding: 8px 35px 8px 14px;
+  margin-bottom: 20px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  background-color: #ff7518;
+  border: 1px solid transparent;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.alert,
+.alert h4 {
+  color: #ffffff;
+}
+
+.alert h4 {
+  margin: 0;
+}
+
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: 20px;
+}
+
+.alert-success {
+  color: #ffffff;
+  background-color: #3fb618;
+  border-color: transparent;
+}
+
+.alert-success h4 {
+  color: #ffffff;
+}
+
+.alert-danger,
+.alert-error {
+  color: #ffffff;
+  background-color: #ff0039;
+  border-color: transparent;
+}
+
+.alert-danger h4,
+.alert-error h4 {
+  color: #ffffff;
+}
+
+.alert-info {
+  color: #ffffff;
+  background-color: #9954bb;
+  border-color: transparent;
+}
+
+.alert-info h4 {
+  color: #ffffff;
+}
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0;
+}
+
+.alert-block p + p {
+  margin-top: 5px;
+}
+
+.nav {
+  margin-bottom: 20px;
+  margin-left: 0;
+  list-style: none;
+}
+
+.nav > li > a {
+  display: block;
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+
+.nav > li > a > img {
+  max-width: none;
+}
+
+.nav > .pull-right {
+  float: right;
+}
+
+.nav-header {
+  display: block;
+  padding: 3px 15px;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 20px;
+  color: #dfdfdf;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+
+.nav li + .nav-header {
+  margin-top: 9px;
+}
+
+.nav-list {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 0;
+}
+
+.nav-list > li > a,
+.nav-list .nav-header {
+  margin-right: -15px;
+  margin-left: -15px;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+}
+
+.nav-list > li > a {
+  padding: 3px 15px;
+}
+
+.nav-list > .active > a,
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  background-color: #007fff;
+}
+
+.nav-list [class^="icon-"],
+.nav-list [class*=" icon-"] {
+  margin-right: 2px;
+}
+
+.nav-list .divider {
+  *width: 100%;
+  height: 1px;
+  margin: 9px 1px;
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+}
+
+.nav-tabs,
+.nav-pills {
+  *zoom: 1;
+}
+
+.nav-tabs:before,
+.nav-pills:before,
+.nav-tabs:after,
+.nav-pills:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.nav-tabs:after,
+.nav-pills:after {
+  clear: both;
+}
+
+.nav-tabs > li,
+.nav-pills > li {
+  float: left;
+}
+
+.nav-tabs > li > a,
+.nav-pills > li > a {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-right: 2px;
+  line-height: 14px;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #ddd;
+}
+
+.nav-tabs > li {
+  margin-bottom: -1px;
+}
+
+.nav-tabs > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  line-height: 20px;
+  border: 1px solid transparent;
+  -webkit-border-radius: 4px 4px 0 0;
+     -moz-border-radius: 4px 4px 0 0;
+          border-radius: 4px 4px 0 0;
+}
+
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+  border-color: #eeeeee #eeeeee #dddddd;
+}
+
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
+  color: #bbbbbb;
+  cursor: default;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-bottom-color: transparent;
+}
+
+.nav-pills > li > a {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  -webkit-border-radius: 5px;
+     -moz-border-radius: 5px;
+          border-radius: 5px;
+}
+
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
+  color: #ffffff;
+  background-color: #007fff;
+}
+
+.nav-stacked > li {
+  float: none;
+}
+
+.nav-stacked > li > a {
+  margin-right: 0;
+}
+
+.nav-tabs.nav-stacked {
+  border-bottom: 0;
+}
+
+.nav-tabs.nav-stacked > li > a {
+  border: 1px solid #ddd;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.nav-tabs.nav-stacked > li:first-child > a {
+  -webkit-border-top-right-radius: 4px;
+          border-top-right-radius: 4px;
+  -webkit-border-top-left-radius: 4px;
+          border-top-left-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -moz-border-radius-topleft: 4px;
+}
+
+.nav-tabs.nav-stacked > li:last-child > a {
+  -webkit-border-bottom-right-radius: 4px;
+          border-bottom-right-radius: 4px;
+  -webkit-border-bottom-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+  -moz-border-radius-bottomright: 4px;
+  -moz-border-radius-bottomleft: 4px;
+}
+
+.nav-tabs.nav-stacked > li > a:hover,
+.nav-tabs.nav-stacked > li > a:focus {
+  z-index: 2;
+  border-color: #ddd;
+}
+
+.nav-pills.nav-stacked > li > a {
+  margin-bottom: 3px;
+}
+
+.nav-pills.nav-stacked > li:last-child > a {
+  margin-bottom: 1px;
+}
+
+.nav-tabs .dropdown-menu {
+  -webkit-border-radius: 0 0 6px 6px;
+     -moz-border-radius: 0 0 6px 6px;
+          border-radius: 0 0 6px 6px;
+}
+
+.nav-pills .dropdown-menu {
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+.nav .dropdown-toggle .caret {
+  margin-top: 6px;
+  border-top-color: #007fff;
+  border-bottom-color: #007fff;
+}
+
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
+  border-top-color: #0066cc;
+  border-bottom-color: #0066cc;
+}
+
+/* move down carets for tabs */
+
+.nav-tabs .dropdown-toggle .caret {
+  margin-top: 8px;
+}
+
+.nav .active .dropdown-toggle .caret {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+}
+
+.nav-tabs .active .dropdown-toggle .caret {
+  border-top-color: #bbbbbb;
+  border-bottom-color: #bbbbbb;
+}
+
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
+  cursor: pointer;
+}
+
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
+  color: #ffffff;
+  background-color: #dfdfdf;
+  border-color: #dfdfdf;
+}
+
+.nav li.dropdown.open .caret,
+.nav li.dropdown.open.active .caret,
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
+  border-color: #dfdfdf;
+}
+
+.tabbable {
+  *zoom: 1;
+}
+
+.tabbable:before,
+.tabbable:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.tabbable:after {
+  clear: both;
+}
+
+.tab-content {
+  overflow: auto;
+}
+
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+  border-bottom: 0;
+}
+
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
+
+.tab-content > .active,
+.pill-content > .active {
+  display: block;
+}
+
+.tabs-below > .nav-tabs {
+  border-top: 1px solid #ddd;
+}
+
+.tabs-below > .nav-tabs > li {
+  margin-top: -1px;
+  margin-bottom: 0;
+}
+
+.tabs-below > .nav-tabs > li > a {
+  -webkit-border-radius: 0 0 4px 4px;
+     -moz-border-radius: 0 0 4px 4px;
+          border-radius: 0 0 4px 4px;
+}
+
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-top-color: #ddd;
+  border-bottom-color: transparent;
+}
+
+.tabs-below > .nav-tabs > .active > a,
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
+  border-color: transparent #ddd #ddd #ddd;
+}
+
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+  float: none;
+}
+
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  min-width: 74px;
+  margin-right: 0;
+  margin-bottom: 3px;
+}
+
+.tabs-left > .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  border-right: 1px solid #ddd;
+}
+
+.tabs-left > .nav-tabs > li > a {
+  margin-right: -1px;
+  -webkit-border-radius: 4px 0 0 4px;
+     -moz-border-radius: 4px 0 0 4px;
+          border-radius: 4px 0 0 4px;
+}
+
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
+  border-color: #eeeeee #dddddd #eeeeee #eeeeee;
+}
+
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
+  border-color: #ddd transparent #ddd #ddd;
+  *border-right-color: #ffffff;
+}
+
+.tabs-right > .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  border-left: 1px solid #ddd;
+}
+
+.tabs-right > .nav-tabs > li > a {
+  margin-left: -1px;
+  -webkit-border-radius: 0 4px 4px 0;
+     -moz-border-radius: 0 4px 4px 0;
+          border-radius: 0 4px 4px 0;
+}
+
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
+  border-color: #eeeeee #eeeeee #eeeeee #dddddd;
+}
+
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
+  border-color: #ddd #ddd #ddd transparent;
+  *border-left-color: #ffffff;
+}
+
+.nav > .disabled > a {
+  color: #dfdfdf;
+}
+
+.nav > .disabled > a:hover,
+.nav > .disabled > a:focus {
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+
+.navbar {
+  *position: relative;
+  *z-index: 2;
+  margin-bottom: 20px;
+  overflow: visible;
+}
+
+.navbar-inner {
+  min-height: 50px;
+  padding-right: 20px;
+  padding-left: 20px;
+  background-color: #080808;
+  background-image: -moz-linear-gradient(top, #080808, #080808);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#080808), to(#080808));
+  background-image: -webkit-linear-gradient(top, #080808, #080808);
+  background-image: -o-linear-gradient(top, #080808, #080808);
+  background-image: linear-gradient(to bottom, #080808, #080808);
+  background-repeat: repeat-x;
+  border: 1px solid transparent;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff080808', GradientType=0);
+  *zoom: 1;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
+}
+
+.navbar-inner:before,
+.navbar-inner:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.navbar-inner:after {
+  clear: both;
+}
+
+.navbar .container {
+  width: auto;
+}
+
+.nav-collapse.collapse {
+  height: auto;
+  overflow: visible;
+}
+
+.navbar .brand {
+  display: block;
+  float: left;
+  padding: 15px 20px 15px;
+  margin-left: -20px;
+  font-size: 20px;
+  font-weight: 200;
+  color: #ffffff;
+  text-shadow: 0 1px 0 #080808;
+}
+
+.navbar .brand:hover,
+.navbar .brand:focus {
+  text-decoration: none;
+}
+
+.navbar-text {
+  margin-bottom: 0;
+  line-height: 50px;
+  color: #ffffff;
+}
+
+.navbar-link {
+  color: #ffffff;
+}
+
+.navbar-link:hover,
+.navbar-link:focus {
+  color: #bbbbbb;
+}
+
+.navbar .divider-vertical {
+  height: 50px;
+  margin: 0 9px;
+  border-right: 1px solid #080808;
+  border-left: 1px solid #080808;
+}
+
+.navbar .btn,
+.navbar .btn-group {
+  margin-top: 10px;
+}
+
+.navbar .btn-group .btn,
+.navbar .input-prepend .btn,
+.navbar .input-append .btn,
+.navbar .input-prepend .btn-group,
+.navbar .input-append .btn-group {
+  margin-top: 0;
+}
+
+.navbar-form {
+  margin-bottom: 0;
+  *zoom: 1;
+}
+
+.navbar-form:before,
+.navbar-form:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.navbar-form:after {
+  clear: both;
+}
+
+.navbar-form input,
+.navbar-form select,
+.navbar-form .radio,
+.navbar-form .checkbox {
+  margin-top: 10px;
+}
+
+.navbar-form input,
+.navbar-form select,
+.navbar-form .btn {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.navbar-form input[type="image"],
+.navbar-form input[type="checkbox"],
+.navbar-form input[type="radio"] {
+  margin-top: 3px;
+}
+
+.navbar-form .input-append,
+.navbar-form .input-prepend {
+  margin-top: 5px;
+  white-space: nowrap;
+}
+
+.navbar-form .input-append input,
+.navbar-form .input-prepend input {
+  margin-top: 0;
+}
+
+.navbar-search {
+  position: relative;
+  float: left;
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
+.navbar-search .search-query {
+  padding: 4px 14px;
+  margin-bottom: 0;
+  font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-border-radius: 15px;
+     -moz-border-radius: 15px;
+          border-radius: 15px;
+}
+
+.navbar-static-top {
+  position: static;
+  margin-bottom: 0;
+}
+
+.navbar-static-top .navbar-inner {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+  margin-bottom: 0;
+}
+
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
+  border-width: 0 0 1px;
+}
+
+.navbar-fixed-bottom .navbar-inner {
+  border-width: 1px 0 0;
+}
+
+.navbar-fixed-top .navbar-inner,
+.navbar-fixed-bottom .navbar-inner {
+  padding-right: 0;
+  padding-left: 0;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+
+.navbar-fixed-top {
+  top: 0;
+}
+
+.navbar-fixed-top .navbar-inner,
+.navbar-static-top .navbar-inner {
+  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-fixed-bottom {
+  bottom: 0;
+}
+
+.navbar-fixed-bottom .navbar-inner {
+  -webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
+     -moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
+}
+
+.navbar .nav {
+  position: relative;
+  left: 0;
+  display: block;
+  float: left;
+  margin: 0 10px 0 0;
+}
+
+.navbar .nav.pull-right {
+  float: right;
+  margin-right: 0;
+}
+
+.navbar .nav > li {
+  float: left;
+}
+
+.navbar .nav > li > a {
+  float: none;
+  padding: 15px 15px 15px;
+  color: #ffffff;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #080808;
+}
+
+.navbar .nav .dropdown-toggle .caret {
+  margin-top: 8px;
+}
+
+.navbar .nav > li > a:focus,
+.navbar .nav > li > a:hover {
+  color: #bbbbbb;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  color: #ffffff;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+}
+
+.navbar .btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-right: 5px;
+  margin-left: 5px;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #000000;
+  *background-color: #000000;
+  background-image: -moz-linear-gradient(top, #000000, #000000);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
+  background-image: -webkit-linear-gradient(top, #000000, #000000);
+  background-image: -o-linear-gradient(top, #000000, #000000);
+  background-image: linear-gradient(to bottom, #000000, #000000);
+  background-repeat: repeat-x;
+  border-color: #000000 #000000 #000000;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff000000', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
+}
+
+.navbar .btn-navbar:hover,
+.navbar .btn-navbar:focus,
+.navbar .btn-navbar:active,
+.navbar .btn-navbar.active,
+.navbar .btn-navbar.disabled,
+.navbar .btn-navbar[disabled] {
+  color: #ffffff;
+  background-color: #000000;
+  *background-color: #000000;
+}
+
+.navbar .btn-navbar:active,
+.navbar .btn-navbar.active {
+  background-color: #000000 \9;
+}
+
+.navbar .btn-navbar .icon-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  -webkit-border-radius: 1px;
+     -moz-border-radius: 1px;
+          border-radius: 1px;
+  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+     -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.btn-navbar .icon-bar + .icon-bar {
+  margin-top: 3px;
+}
+
+.navbar .nav > li > .dropdown-menu:before {
+  position: absolute;
+  top: -7px;
+  left: 9px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.navbar .nav > li > .dropdown-menu:after {
+  position: absolute;
+  top: -6px;
+  left: 10px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.navbar-fixed-bottom .nav > li > .dropdown-menu:before {
+  top: auto;
+  bottom: -7px;
+  border-top: 7px solid #ccc;
+  border-bottom: 0;
+  border-top-color: rgba(0, 0, 0, 0.2);
+}
+
+.navbar-fixed-bottom .nav > li > .dropdown-menu:after {
+  top: auto;
+  bottom: -6px;
+  border-top: 6px solid #ffffff;
+  border-bottom: 0;
+}
+
+.navbar .nav li.dropdown > a:hover .caret,
+.navbar .nav li.dropdown > a:focus .caret {
+  border-top-color: #bbbbbb;
+  border-bottom-color: #bbbbbb;
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+  color: #ffffff;
+  background-color: transparent;
+}
+
+.navbar .nav li.dropdown > .dropdown-toggle .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar .pull-right > li > .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right {
+  right: 0;
+  left: auto;
+}
+
+.navbar .pull-right > li > .dropdown-menu:before,
+.navbar .nav > li > .dropdown-menu.pull-right:before {
+  right: 12px;
+  left: auto;
+}
+
+.navbar .pull-right > li > .dropdown-menu:after,
+.navbar .nav > li > .dropdown-menu.pull-right:after {
+  right: 13px;
+  left: auto;
+}
+
+.navbar .pull-right > li > .dropdown-menu .dropdown-menu,
+.navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
+  right: 100%;
+  left: auto;
+  margin-right: -1px;
+  margin-left: 0;
+  -webkit-border-radius: 6px 0 6px 6px;
+     -moz-border-radius: 6px 0 6px 6px;
+          border-radius: 6px 0 6px 6px;
+}
+
+.navbar-inverse .navbar-inner {
+  background-color: #007fff;
+  background-image: -moz-linear-gradient(top, #007fff, #007fff);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#007fff), to(#007fff));
+  background-image: -webkit-linear-gradient(top, #007fff, #007fff);
+  background-image: -o-linear-gradient(top, #007fff, #007fff);
+  background-image: linear-gradient(to bottom, #007fff, #007fff);
+  background-repeat: repeat-x;
+  border-color: transparent;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff007fff', endColorstr='#ff007fff', GradientType=0);
+}
+
+.navbar-inverse .brand,
+.navbar-inverse .nav > li > a {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+.navbar-inverse .brand:hover,
+.navbar-inverse .nav > li > a:hover,
+.navbar-inverse .brand:focus,
+.navbar-inverse .nav > li > a:focus {
+  color: #ffffff;
+}
+
+.navbar-inverse .brand {
+  color: #ffffff;
+}
+
+.navbar-inverse .navbar-text {
+  color: #ffffff;
+}
+
+.navbar-inverse .nav > li > a:focus,
+.navbar-inverse .nav > li > a:hover {
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.navbar-inverse .nav .active > a,
+.navbar-inverse .nav .active > a:hover,
+.navbar-inverse .nav .active > a:focus {
+  color: #ffffff;
+  background-color: #007fff;
+}
+
+.navbar-inverse .navbar-link {
+  color: #ffffff;
+}
+
+.navbar-inverse .navbar-link:hover,
+.navbar-inverse .navbar-link:focus {
+  color: #ffffff;
+}
+
+.navbar-inverse .divider-vertical {
+  border-right-color: #007fff;
+  border-left-color: #007fff;
+}
+
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
+.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
+.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
+  color: #ffffff;
+  background-color: #007fff;
+}
+
+.navbar-inverse .nav li.dropdown > a:hover .caret,
+.navbar-inverse .nav li.dropdown > a:focus .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
+.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
+.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
+  border-top-color: #ffffff;
+  border-bottom-color: #ffffff;
+}
+
+.navbar-inverse .navbar-search .search-query {
+  color: #ffffff;
+  background-color: #80bfff;
+  border-color: #007fff;
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+     -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
+  -webkit-transition: none;
+     -moz-transition: none;
+       -o-transition: none;
+          transition: none;
+}
+
+.navbar-inverse .navbar-search .search-query:-moz-placeholder {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
+  color: #999999;
+}
+
+.navbar-inverse .navbar-search .search-query:focus,
+.navbar-inverse .navbar-search .search-query.focused {
+  padding: 5px 15px;
+  color: #999999;
+  text-shadow: 0 1px 0 #ffffff;
+  background-color: #ffffff;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.navbar-inverse .btn-navbar {
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #0072e6;
+  *background-color: #0072e6;
+  background-image: -moz-linear-gradient(top, #0072e6, #0072e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0072e6), to(#0072e6));
+  background-image: -webkit-linear-gradient(top, #0072e6, #0072e6);
+  background-image: -o-linear-gradient(top, #0072e6, #0072e6);
+  background-image: linear-gradient(to bottom, #0072e6, #0072e6);
+  background-repeat: repeat-x;
+  border-color: #0072e6 #0072e6 #004c99;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0072e6', endColorstr='#ff0072e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
+}
+
+.navbar-inverse .btn-navbar:hover,
+.navbar-inverse .btn-navbar:focus,
+.navbar-inverse .btn-navbar:active,
+.navbar-inverse .btn-navbar.active,
+.navbar-inverse .btn-navbar.disabled,
+.navbar-inverse .btn-navbar[disabled] {
+  color: #ffffff;
+  background-color: #0072e6;
+  *background-color: #0066cc;
+}
+
+.navbar-inverse .btn-navbar:active,
+.navbar-inverse .btn-navbar.active {
+  background-color: #0059b3 \9;
+}
+
+.breadcrumb {
+  padding: 8px 15px;
+  margin: 0 0 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.breadcrumb > li {
+  display: inline-block;
+  *display: inline;
+  text-shadow: 0 1px 0 #ffffff;
+  *zoom: 1;
+}
+
+.breadcrumb > li > .divider {
+  padding: 0 5px;
+  color: #ccc;
+}
+
+.breadcrumb > .active {
+  color: #dfdfdf;
+}
+
+.pagination {
+  margin: 20px 0;
+}
+
+.pagination ul {
+  display: inline-block;
+  *display: inline;
+  margin-bottom: 0;
+  margin-left: 0;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  *zoom: 1;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.pagination ul > li {
+  display: inline;
+}
+
+.pagination ul > li > a,
+.pagination ul > li > span {
+  float: left;
+  padding: 4px 12px;
+  line-height: 20px;
+  text-decoration: none;
+  background-color: #dfdfdf;
+  border: 1px solid transparent;
+  border-left-width: 0;
+}
+
+.pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  background-color: #007fff;
+}
+
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: #dfdfdf;
+  cursor: default;
+}
+
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
+  color: #dfdfdf;
+  cursor: default;
+  background-color: transparent;
+}
+
+.pagination ul > li:first-child > a,
+.pagination ul > li:first-child > span {
+  border-left-width: 1px;
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.pagination-centered {
+  text-align: center;
+}
+
+.pagination-right {
+  text-align: right;
+}
+
+.pagination-large ul > li > a,
+.pagination-large ul > li > span {
+  padding: 22px 30px;
+  font-size: 17.5px;
+}
+
+.pagination-large ul > li:first-child > a,
+.pagination-large ul > li:first-child > span {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.pagination-large ul > li:last-child > a,
+.pagination-large ul > li:last-child > span {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.pagination-mini ul > li:first-child > a,
+.pagination-small ul > li:first-child > a,
+.pagination-mini ul > li:first-child > span,
+.pagination-small ul > li:first-child > span {
+  -webkit-border-bottom-left-radius: 0;
+          border-bottom-left-radius: 0;
+  -webkit-border-top-left-radius: 0;
+          border-top-left-radius: 0;
+  -moz-border-radius-bottomleft: 0;
+  -moz-border-radius-topleft: 0;
+}
+
+.pagination-mini ul > li:last-child > a,
+.pagination-small ul > li:last-child > a,
+.pagination-mini ul > li:last-child > span,
+.pagination-small ul > li:last-child > span {
+  -webkit-border-top-right-radius: 0;
+          border-top-right-radius: 0;
+  -webkit-border-bottom-right-radius: 0;
+          border-bottom-right-radius: 0;
+  -moz-border-radius-topright: 0;
+  -moz-border-radius-bottomright: 0;
+}
+
+.pagination-small ul > li > a,
+.pagination-small ul > li > span {
+  padding: 2px 10px;
+  font-size: 11.9px;
+}
+
+.pagination-mini ul > li > a,
+.pagination-mini ul > li > span {
+  padding: 2px 6px;
+  font-size: 10.5px;
+}
+
+.pager {
+  margin: 20px 0;
+  text-align: center;
+  list-style: none;
+  *zoom: 1;
+}
+
+.pager:before,
+.pager:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.pager:after {
+  clear: both;
+}
+
+.pager li {
+  display: inline;
+}
+
+.pager li > a,
+.pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 15px;
+     -moz-border-radius: 15px;
+          border-radius: 15px;
+}
+
+.pager li > a:hover,
+.pager li > a:focus {
+  text-decoration: none;
+  background-color: #f5f5f5;
+}
+
+.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: #dfdfdf;
+  cursor: default;
+  background-color: #fff;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+  background-color: #000000;
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+}
+
+.modal-backdrop,
+.modal-backdrop.fade.in {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.modal {
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  z-index: 1050;
+  width: 560px;
+  margin-left: -280px;
+  background-color: #ffffff;
+  border: 1px solid #999;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  *border: 1px solid #999;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  outline: none;
+  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding-box;
+          background-clip: padding-box;
+}
+
+.modal.fade {
+  top: -25%;
+  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
+     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
+       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
+          transition: opacity 0.3s linear, top 0.3s ease-out;
+}
+
+.modal.fade.in {
+  top: 10%;
+}
+
+.modal-header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.modal-header .close {
+  margin-top: 2px;
+}
+
+.modal-header h3 {
+  margin: 0;
+  line-height: 30px;
+}
+
+.modal-body {
+  position: relative;
+  max-height: 400px;
+  padding: 15px;
+  overflow-y: auto;
+}
+
+.modal-form {
+  margin-bottom: 0;
+}
+
+.modal-footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ddd;
+  -webkit-border-radius: 0 0 6px 6px;
+     -moz-border-radius: 0 0 6px 6px;
+          border-radius: 0 0 6px 6px;
+  *zoom: 1;
+  -webkit-box-shadow: inset 0 1px 0 #ffffff;
+     -moz-box-shadow: inset 0 1px 0 #ffffff;
+          box-shadow: inset 0 1px 0 #ffffff;
+}
+
+.modal-footer:before,
+.modal-footer:after {
+  display: table;
+  line-height: 0;
+  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;
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 1030;
+  display: block;
+  font-size: 11px;
+  line-height: 1.4;
+  opacity: 0;
+  filter: alpha(opacity=0);
+  visibility: visible;
+}
+
+.tooltip.in {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+}
+
+.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: 8px;
+  color: #ffffff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #000000;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.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.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;
+}
+
+.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: #ff7518;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          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: #ff7518;
+  border-bottom: 1px solid #fe6600;
+  -webkit-border-radius: 5px 5px 0 0;
+     -moz-border-radius: 5px 5px 0 0;
+          border-radius: 5px 5px 0 0;
+}
+
+.popover-title:empty {
+  display: none;
+}
+
+.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: 16px;
+}
+
+.popover .arrow:after {
+  border-width: 15px;
+  content: "";
+}
+
+.popover.top .arrow {
+  bottom: -16px;
+  left: 50%;
+  margin-left: -16px;
+  border-top-color: #999;
+  border-top-color: transparent;
+  border-bottom-width: 0;
+}
+
+.popover.top .arrow:after {
+  bottom: 1px;
+  margin-left: -15px;
+  border-top-color: #ff7518;
+  border-bottom-width: 0;
+}
+
+.popover.right .arrow {
+  top: 50%;
+  left: -16px;
+  margin-top: -16px;
+  border-right-color: #999;
+  border-right-color: transparent;
+  border-left-width: 0;
+}
+
+.popover.right .arrow:after {
+  bottom: -15px;
+  left: 1px;
+  border-right-color: #ff7518;
+  border-left-width: 0;
+}
+
+.popover.bottom .arrow {
+  top: -16px;
+  left: 50%;
+  margin-left: -16px;
+  border-bottom-color: #999;
+  border-bottom-color: transparent;
+  border-top-width: 0;
+}
+
+.popover.bottom .arrow:after {
+  top: 1px;
+  margin-left: -15px;
+  border-bottom-color: #ff7518;
+  border-top-width: 0;
+}
+
+.popover.left .arrow {
+  top: 50%;
+  right: -16px;
+  margin-top: -16px;
+  border-left-color: #999;
+  border-left-color: transparent;
+  border-right-width: 0;
+}
+
+.popover.left .arrow:after {
+  right: 1px;
+  bottom: -15px;
+  border-left-color: #ff7518;
+  border-right-width: 0;
+}
+
+.thumbnails {
+  margin-left: -20px;
+  list-style: none;
+  *zoom: 1;
+}
+
+.thumbnails:before,
+.thumbnails:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+
+.thumbnails:after {
+  clear: both;
+}
+
+.row-fluid .thumbnails {
+  margin-left: 0;
+}
+
+.thumbnails > li {
+  float: left;
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+
+.thumbnail {
+  display: block;
+  padding: 4px;
+  line-height: 20px;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
+  -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+       -o-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
+}
+
+a.thumbnail:hover,
+a.thumbnail:focus {
+  border-color: #007fff;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+     -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+          box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+}
+
+.thumbnail > img {
+  display: block;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.thumbnail .caption {
+  padding: 9px;
+  color: #bbbbbb;
+}
+
+.media,
+.media-body {
+  overflow: hidden;
+  *overflow: visible;
+  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 {
+  margin-left: 0;
+  list-style: none;
+}
+
+.label,
+.badge {
+  display: inline-block;
+  padding: 2px 4px;
+  font-size: 11.844px;
+  font-weight: bold;
+  line-height: 14px;
+  color: #ffffff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  white-space: nowrap;
+  vertical-align: baseline;
+  background-color: #dfdfdf;
+}
+
+.label {
+  -webkit-border-radius: 3px;
+     -moz-border-radius: 3px;
+          border-radius: 3px;
+}
+
+.badge {
+  padding-right: 9px;
+  padding-left: 9px;
+  -webkit-border-radius: 9px;
+     -moz-border-radius: 9px;
+          border-radius: 9px;
+}
+
+.label:empty,
+.badge:empty {
+  display: none;
+}
+
+a.label:hover,
+a.label:focus,
+a.badge:hover,
+a.badge:focus {
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label-important,
+.badge-important {
+  background-color: #ffffff;
+}
+
+.label-important[href],
+.badge-important[href] {
+  background-color: #e6e6e6;
+}
+
+.label-warning,
+.badge-warning {
+  background-color: #ff7518;
+}
+
+.label-warning[href],
+.badge-warning[href] {
+  background-color: #e45c00;
+}
+
+.label-success,
+.badge-success {
+  background-color: #ffffff;
+}
+
+.label-success[href],
+.badge-success[href] {
+  background-color: #e6e6e6;
+}
+
+.label-info,
+.badge-info {
+  background-color: #ffffff;
+}
+
+.label-info[href],
+.badge-info[href] {
+  background-color: #e6e6e6;
+}
+
+.label-inverse,
+.badge-inverse {
+  background-color: #999999;
+}
+
+.label-inverse[href],
+.badge-inverse[href] {
+  background-color: #808080;
+}
+
+.btn .label,
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.btn-mini .label,
+.btn-mini .badge {
+  top: 0;
+}
+
+@-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;
+  }
+}
+
+@-ms-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: #f7f7f7;
+  background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
+  background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
+  background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
+  background-repeat: repeat-x;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+     -moz-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;
+  color: #ffffff;
+  text-align: center;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  background-color: #0e90d2;
+  background-image: -moz-linear-gradient(top, #149bdf, #0480be);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
+  background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
+  background-image: -o-linear-gradient(top, #149bdf, #0480be);
+  background-image: linear-gradient(to bottom, #149bdf, #0480be);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+     -moz-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-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-transition: width 0.6s ease;
+     -moz-transition: width 0.6s ease;
+       -o-transition: width 0.6s ease;
+          transition: width 0.6s ease;
+}
+
+.progress .bar + .bar {
+  -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+     -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+          box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+}
+
+.progress-striped .bar {
+  background-color: #149bdf;
+  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: -o-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);
+  -webkit-background-size: 40px 40px;
+     -moz-background-size: 40px 40px;
+       -o-background-size: 40px 40px;
+          background-size: 40px 40px;
+}
+
+.progress.active .bar {
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+     -moz-animation: progress-bar-stripes 2s linear infinite;
+      -ms-animation: progress-bar-stripes 2s linear infinite;
+       -o-animation: progress-bar-stripes 2s linear infinite;
+          animation: progress-bar-stripes 2s linear infinite;
+}
+
+.progress-danger .bar,
+.progress .bar-danger {
+  background-color: #dd514c;
+  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
+  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
+}
+
+.progress-danger.progress-striped .bar,
+.progress-striped .bar-danger {
+  background-color: #ee5f5b;
+  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: -o-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-success .bar,
+.progress .bar-success {
+  background-color: #5eb95e;
+  background-image: -moz-linear-gradient(top, #62c462, #57a957);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
+  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
+  background-image: -o-linear-gradient(top, #62c462, #57a957);
+  background-image: linear-gradient(to bottom, #62c462, #57a957);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
+}
+
+.progress-success.progress-striped .bar,
+.progress-striped .bar-success {
+  background-color: #62c462;
+  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: -o-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-info .bar,
+.progress .bar-info {
+  background-color: #4bb1cf;
+  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
+  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
+  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
+  background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
+}
+
+.progress-info.progress-striped .bar,
+.progress-striped .bar-info {
+  background-color: #5bc0de;
+  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: -o-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-warning .bar,
+.progress .bar-warning {
+  background-color: #ff9046;
+  background-image: -moz-linear-gradient(top, #ffa365, #ff7518);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffa365), to(#ff7518));
+  background-image: -webkit-linear-gradient(top, #ffa365, #ff7518);
+  background-image: -o-linear-gradient(top, #ffa365, #ff7518);
+  background-image: linear-gradient(to bottom, #ffa365, #ff7518);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffa365', endColorstr='#ffff7518', GradientType=0);
+}
+
+.progress-warning.progress-striped .bar,
+.progress-striped .bar-warning {
+  background-color: #ffa365;
+  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: -o-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);
+}
+
+.accordion {
+  margin-bottom: 20px;
+}
+
+.accordion-group {
+  margin-bottom: 2px;
+  border: 1px solid #e5e5e5;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.accordion-heading {
+  border-bottom: 0;
+}
+
+.accordion-heading .accordion-toggle {
+  display: block;
+  padding: 8px 15px;
+}
+
+.accordion-toggle {
+  cursor: pointer;
+}
+
+.accordion-inner {
+  padding: 9px 15px;
+  border-top: 1px solid #e5e5e5;
+}
+
+.carousel {
+  position: relative;
+  margin-bottom: 20px;
+  line-height: 1;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-inner > .item {
+  position: relative;
+  display: none;
+  -webkit-transition: 0.6s ease-in-out left;
+     -moz-transition: 0.6s ease-in-out left;
+       -o-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;
+  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: 40%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  font-size: 60px;
+  font-weight: 100;
+  line-height: 30px;
+  color: #ffffff;
+  text-align: center;
+  background: #080808;
+  border: 3px solid #ffffff;
+  -webkit-border-radius: 23px;
+     -moz-border-radius: 23px;
+          border-radius: 23px;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+.carousel-control.right {
+  right: 15px;
+  left: auto;
+}
+
+.carousel-control:hover,
+.carousel-control:focus {
+  color: #ffffff;
+  text-decoration: none;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+
+.carousel-indicators {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  z-index: 5;
+  margin: 0;
+  list-style: none;
+}
+
+.carousel-indicators li {
+  display: block;
+  float: left;
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+  text-indent: -999px;
+  background-color: #ccc;
+  background-color: rgba(255, 255, 255, 0.25);
+  border-radius: 5px;
+}
+
+.carousel-indicators .active {
+  background-color: #fff;
+}
+
+.carousel-caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 15px;
+  background: #999999;
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.carousel-caption h4,
+.carousel-caption p {
+  line-height: 20px;
+  color: #ffffff;
+}
+
+.carousel-caption h4 {
+  margin: 0 0 5px;
+}
+
+.carousel-caption p {
+  margin-bottom: 0;
+}
+
+.hero-unit {
+  padding: 60px;
+  margin-bottom: 30px;
+  font-size: 18px;
+  font-weight: 200;
+  line-height: 30px;
+  color: inherit;
+  background-color: #eeeeee;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+}
+
+.hero-unit h1 {
+  margin-bottom: 0;
+  font-size: 60px;
+  line-height: 1;
+  letter-spacing: -1px;
+  color: inherit;
+}
+
+.hero-unit li {
+  line-height: 30px;
+}
+
+.pull-right {
+  float: right;
+}
+
+.pull-left {
+  float: left;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.affix {
+  position: fixed;
+}
+
+body {
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 50px;
+}
+
+h2,
+h3 {
+  font-size: 26px;
+}
+
+h4 {
+  font-size: 14px;
+}
+
+h5,
+h6 {
+  font-size: 11px;
+}
+
+blockquote {
+  padding: 10px 15px;
+  background-color: #eeeeee;
+  border-left-color: #bbbbbb;
+}
+
+blockquote.pull-right {
+  padding: 10px 15px;
+  border-right-color: #bbbbbb;
+}
+
+blockquote small {
+  color: #bbbbbb;
+}
+
+.muted {
+  color: #bbbbbb;
+}
+
+.text-warning {
+  color: #ff7518;
+}
+
+a.text-warning:hover {
+  color: #e45c00;
+}
+
+.text-error {
+  color: #ff0039;
+}
+
+a.text-error:hover {
+  color: #cc002e;
+}
+
+.text-info {
+  color: #9954bb;
+}
+
+a.text-info:hover {
+  color: #7e3f9d;
+}
+
+.text-success {
+  color: #3fb618;
+}
+
+a.text-success:hover {
+  color: #2f8912;
+}
+
+.navbar .navbar-inner {
+  background-image: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar .brand:hover {
+  color: #bbbbbb;
+}
+
+.navbar .nav > .active > a,
+.navbar .nav > .active > a:hover,
+.navbar .nav > .active > a:focus {
+  background-color: rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle,
+.navbar .nav li.dropdown.active > .dropdown-toggle,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle {
+  color: #ffffff;
+}
+
+.navbar .nav li.dropdown.open > .dropdown-toggle:hover,
+.navbar .nav li.dropdown.active > .dropdown-toggle:hover,
+.navbar .nav li.dropdown.open.active > .dropdown-toggle:hover {
+  color: #eeeeee;
+}
+
+.navbar .navbar-search .search-query {
+  line-height: normal;
+}
+
+.navbar-inverse .brand,
+.navbar-inverse .nav > li > a {
+  text-shadow: none;
+}
+
+.navbar-inverse .brand:hover,
+.navbar-inverse .nav > .active > a,
+.navbar-inverse .nav > .active > a:hover,
+.navbar-inverse .nav > .active > a:focus {
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.navbar-inverse .navbar-search .search-query {
+  color: #080808;
+}
+
+div.subnav {
+  margin: 0 1px;
+  background: #dfdfdf none;
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+div.subnav .nav {
+  background-color: transparent;
+}
+
+div.subnav .nav > li > a {
+  border-color: transparent;
+}
+
+div.subnav .nav > .active > a,
+div.subnav .nav > .active > a:hover {
+  color: #ffffff;
+  background-color: #000000;
+  border-color: transparent;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+div.subnav-fixed {
+  top: 51px;
+  margin: 0;
+}
+
+.nav .open .dropdown-toggle,
+.nav > li.dropdown.open.active > a:hover {
+  color: #007fff;
+}
+
+.nav-tabs > li > a {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.nav-tabs.nav-stacked > li > a:hover {
+  color: #ffffff;
+  background-color: #007fff;
+}
+
+.nav-tabs.nav-stacked > .active > a,
+.nav-tabs.nav-stacked > .active > a:hover {
+  color: #bbbbbb;
+  background-color: #ffffff;
+}
+
+.nav-tabs.nav-stacked > li:first-child > a,
+.nav-tabs.nav-stacked > li:last-child > a {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.tabs-below > .nav-tabs > li > a,
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.nav-pills > li > a {
+  color: #000000;
+  background-color: #dfdfdf;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.nav-pills > li > a:hover {
+  color: #ffffff;
+  background-color: #000000;
+}
+
+.nav-pills > .disabled > a,
+.nav-pills > .disabled > a:hover {
+  color: #999999;
+  background-color: #eeeeee;
+}
+
+.nav-list > li > a {
+  color: #080808;
+}
+
+.nav-list > li > a:hover {
+  color: #ffffff;
+  text-shadow: none;
+  background-color: #007fff;
+}
+
+.nav-list .nav-header {
+  color: #080808;
+}
+
+.nav-list .divider {
+  background-color: #bbbbbb;
+  border-bottom: none;
+}
+
+.pagination ul {
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.pagination ul > li > a,
+.pagination ul > li > span {
+  margin-right: 6px;
+  color: #080808;
+}
+
+.pagination ul > li > a:hover,
+.pagination ul > li > span:hover {
+  color: #ffffff;
+  background-color: #080808;
+}
+
+.pagination ul > li:last-child > a,
+.pagination ul > li:last-child > span {
+  margin-right: 0;
+}
+
+.pagination ul > .active > a,
+.pagination ul > .active > span {
+  color: #ffffff;
+}
+
+.pagination ul > .disabled > span,
+.pagination ul > .disabled > a,
+.pagination ul > .disabled > a:hover {
+  color: #999999;
+  background-color: #eeeeee;
+}
+
+.pager li > a,
+.pager li > span {
+  color: #080808;
+  background-color: #dfdfdf;
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.pager li > a:hover,
+.pager li > span:hover {
+  color: #ffffff;
+  background-color: #080808;
+}
+
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > span {
+  color: #999999;
+  background-color: #eeeeee;
+}
+
+.breadcrumb {
+  background-color: #dfdfdf;
+}
+
+.breadcrumb li {
+  text-shadow: none;
+}
+
+.breadcrumb .divider,
+.breadcrumb .active {
+  color: #080808;
+  text-shadow: none;
+}
+
+.btn {
+  padding: 5px 12px;
+  text-shadow: none;
+  background-image: none;
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.btn.disabled {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.btn-large {
+  padding: 22px 30px;
+}
+
+.btn-small {
+  padding: 2px 10px;
+}
+
+.btn-mini {
+  padding: 2px 6px;
+}
+
+.btn-group > .btn:first-child,
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.btn-group > .btn + .dropdown-toggle {
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.table tbody tr.success td {
+  color: #ffffff;
+}
+
+.table tbody tr.error td {
+  color: #ffffff;
+}
+
+.table tbody tr.info td {
+  color: #ffffff;
+}
+
+.table-bordered {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.table-bordered thead:first-child tr:first-child th:first-child,
+.table-bordered tbody:first-child tr:first-child td:first-child {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.table-bordered thead:last-child tr:last-child th:first-child,
+.table-bordered tbody:last-child tr:last-child td:first-child,
+.table-bordered tfoot:last-child tr:last-child td:first-child {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"] {
+  color: #080808;
+}
+
+.control-group.warning .control-label,
+.control-group.warning .help-block,
+.control-group.warning .help-inline {
+  color: #ff7518;
+}
+
+.control-group.warning input,
+.control-group.warning select,
+.control-group.warning textarea {
+  color: #080808;
+  border-color: #ff7518;
+}
+
+.control-group.error .control-label,
+.control-group.error .help-block,
+.control-group.error .help-inline {
+  color: #ff0039;
+}
+
+.control-group.error input,
+.control-group.error select,
+.control-group.error textarea {
+  color: #080808;
+  border-color: #ff0039;
+}
+
+.control-group.success .control-label,
+.control-group.success .help-block,
+.control-group.success .help-inline {
+  color: #3fb618;
+}
+
+.control-group.success input,
+.control-group.success select,
+.control-group.success textarea {
+  color: #080808;
+  border-color: #3fb618;
+}
+
+legend {
+  color: #080808;
+  border-bottom: none;
+}
+
+.form-actions {
+  background-color: #eeeeee;
+  border-top: none;
+}
+
+.dropdown-menu {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.alert {
+  text-shadow: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.alert-heading,
+.alert h1,
+.alert h2,
+.alert h3,
+.alert h4,
+.alert h5,
+.alert h6 {
+  color: #ffffff;
+}
+
+.label {
+  min-width: 80px;
+  min-height: 80px;
+  font-weight: 300;
+  text-shadow: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.label-success {
+  background-color: #3fb618;
+}
+
+.label-important {
+  background-color: #ff0039;
+}
+
+.label-info {
+  background-color: #9954bb;
+}
+
+.label-inverse {
+  background-color: #000000;
+}
+
+.badge {
+  font-weight: 300;
+  text-shadow: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.badge-success {
+  background-color: #3fb618;
+}
+
+.badge-important {
+  background-color: #ff0039;
+}
+
+.badge-info {
+  background-color: #9954bb;
+}
+
+.badge-inverse {
+  background-color: #000000;
+}
+
+.hero-unit {
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.well {
+  border: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  margin: 0 2px;
+  vertical-align: -2px;
+}
+
+a.thumbnail {
+  background-color: #dfdfdf;
+}
+
+a.thumbnail:hover {
+  background-color: #bbbbbb;
+  border-color: transparent;
+}
+
+.progress {
+  height: 6px;
+  background-color: #eeeeee;
+  background-image: none;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+}
+
+.progress .bar {
+  background-color: #007fff;
+/*  background-image: none;*/
+}
+
+.progress-info {
+  background-color: #9954bb;
+}
+
+.progress-success {
+  background-color: #3fb618;
+}
+
+.progress-warning {
+  background-color: #ff7518;
+}
+
+.progress-danger {
+  background-color: #ff0039;
+}
+
+.modal {
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.modal-header {
+  border-bottom: none;
+}
+
+.modal-footer {
+  background-color: transparent;
+  border-top: none;
+}
+
+.popover {
+  color: #ffffff;
+  -webkit-border-radius: 0;
+     -moz-border-radius: 0;
+          border-radius: 0;
+}
+
+.popover-title {
+  color: #ffffff;
+  border-bottom: none;
+}
+
+.pull-right {
+  float: right;
+}
+
+.pull-left {
+  float: left;
+}
+
+.hide {
+  display: none;
+}
+
+.show {
+  display: block;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.affix {
+  position: fixed;
+}

File diff suppressed because it is too large
+ 8 - 0
website/lib/bootstrap-responsive.min.css


+ 1 - 0
website/lib/bootstrap-select.min.css

@@ -0,0 +1 @@
+.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.bootstrap-select.btn-group,.bootstrap-select.btn-group[class*="span"]{float:none;display:inline-block;margin-bottom:10px;margin-left:0}.bootstrap-select{width:220px}.bootstrap-select .btn{width:220px}.bootstrap-select .btn:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.btn-group .btn .filter-option{overflow:hidden;position:absolute;left:12px;right:25px;text-align:left}.bootstrap-select.btn-group .btn .caret{position:absolute;right:12px}.bootstrap-select.btn-group>.disabled,.bootstrap-select.btn-group .dropdown-menu li.disabled>a{cursor:not-allowed}.bootstrap-select.btn-group[class*="span"] .btn{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu dt{display:block;padding:3px 20px;cursor:default}.bootstrap-select.btn-group .div-contain{overflow:hidden}.bootstrap-select.btn-group .dropdown-menu li>a.opt{padding-left:35px}.bootstrap-select.btn-group .dropdown-menu li>a{min-height:20px}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu li:not(.disabled)>a:hover small{color:#64b1d8;color:rgba(255,255,255,0.4)}.bootstrap-select.btn-group .dropdown-menu li>dt small{font-weight:normal}

File diff suppressed because it is too large
+ 0 - 0
website/lib/bootstrap-select.min.js


File diff suppressed because it is too large
+ 5 - 0
website/lib/bootstrap.min.js


File diff suppressed because it is too large
+ 2 - 0
website/lib/jquery-1.9.1.min.js


+ 84 - 0
website/playground.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width">
+
+	<title>Monaco Editor Playground</title>
+
+	<link href="./lib/bootstrap-cosmo.css" rel="stylesheet">
+	<link href="./lib/bootstrap-responsive.min.css" rel="stylesheet">
+	<link href="./all.css" rel="stylesheet" type="text/css">
+
+	<link rel="stylesheet" href="./playground/spinner.css" />
+	<link rel="stylesheet" href="./playground/playground.css" />
+</head>
+<body>
+	<nav class="navbar navbar-inverse navbar-fixed-top">
+		<div class="navbar-inner">
+			<div class="container">
+				<div class="logo">
+					<a href="#">Monaco Editor</a>
+				</div>
+				<!-- collapse button for smaller screens -->
+				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				</button>
+
+				<!-- navbar title -->
+				<div class="nav-collapse collapse">
+					<ul class="nav">
+						<li><a class="nav-item" href="index.html">Home</a></li>
+						<li><a class="nav-item" href="playground.html">Playground</a></li>
+						<li><a class="nav-item" href="monarch.html">Monarch</a></li>
+						<li><a class="nav-item" href="https://www.npmjs.com/package/monaco-editor">Download</a></li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</nav>
+	<div id="loading">
+		<div class="spinner">
+			<div class="rect1"></div>
+			<div class="rect2"></div>
+			<div class="rect3"></div>
+			<div class="rect4"></div>
+			<div class="rect5"></div>
+		</div>
+	</div>
+
+	<section id="playground">
+	</section>
+
+	<footer class="container">
+		<hr>
+		<p class="text-center">
+			<small>&copy; 2016 Microsoft</small>
+		</p>
+	</footer>
+
+	<script src="./lib/jquery-1.9.1.min.js" type="text/javascript"></script>
+	<script src="./lib/bootstrap.min.js"></script>
+
+	<script type="text/javascript" src="../release/min/vs/loader.js"></script>
+	<script type="text/javascript">
+		window.MonacoEnvironment = {
+			getWorkerUrl: function(workerId, label) {
+				return 'worker-loader-proxy.js';
+			}
+		};
+		require.config({
+			paths: {
+				vs: "../release/min/vs"
+			}
+		});
+	</script>
+	<script type="text/javascript" src="./playground/samples/all.js"></script>
+	<script type="text/javascript" src="./playground/playground.js"></script>
+</body>
+</html>

+ 86 - 0
website/playground/playground-runner.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html style="height:100%">
+<head>
+
+	<link rel="stylesheet" href="./spinner.css" />
+
+	<style type="text/css">
+		body { margin: 0; padding: 0; border: 0; }
+		.monaco-editor { overflow: hidden; }
+	</style>
+
+	<script type="text/javascript" src="../../release/min/vs/loader.js"></script>
+	<script type="text/javascript">
+		var geval = eval;
+
+		var receivedCall = null;
+		window.load = function (js, html, css) {
+			receivedCall = {
+				js: js,
+				html: html,
+				css: css
+			};
+		};
+
+		window.MonacoEnvironment = {
+			getWorkerUrl: function(workerId, label) {
+				return '../worker-loader-proxy.js';
+			}
+		};
+
+		require.config({
+			paths: {
+				vs: "../../release/min/vs"
+			}
+		});
+
+		require(['require', 'vs/editor/editor.main'], function (require) {
+			"use strict";
+
+			var loading = document.getElementById('loading');
+			loading.parentNode.removeChild(loading);
+			document.body.style.height = '100%';
+
+			// Switch `automaticLayout` property to true by default
+			//TODO: var config = require('vs/editor/common/config/config');
+			//config.getActiveEditor().automaticLayout = true;
+
+			window.load = function (js, html, css) {
+				if (css) {
+					var style = document.createElement("style");
+					style.type = "text/css";
+					style.innerHTML = css;
+					document.body.appendChild(style);
+				}
+				if (html) {
+					document.body.innerHTML += html;
+				}
+				if (js) {
+					try {
+						geval(js);
+					} catch (err) {
+						var pre = document.createElement("pre");
+						pre.appendChild(document.createTextNode(err));
+						document.body.insertBefore(pre, document.body.firstChild);
+					}
+				}
+			};
+
+			if (receivedCall) {
+				window.load(receivedCall.js, receivedCall.html, receivedCall.css);
+			}
+		});
+	</script>
+</head>
+<body>
+	<div id="loading">
+		<div class="spinner">
+			<div class="rect1"></div>
+			<div class="rect2"></div>
+			<div class="rect3"></div>
+			<div class="rect4"></div>
+			<div class="rect5"></div>
+		</div>
+	</div>
+</body>
+</html>

+ 59 - 0
website/playground/playground.css

@@ -0,0 +1,59 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "Segoe UI",Arial,"HelveticaNeue-Light", sans-serif;
+	font-size: 13px;
+	overflow: hidden;
+}
+
+select {
+	width: initial;
+}
+
+.title {
+	font-family: "Segoe UI Light","HelveticaNeue-UltraLight", sans-serif;
+	font-weight: 100;
+	font-size: 1.8em;
+}
+
+.tabArea {
+	height: 20px;
+	box-sizing: border-box;
+	border-bottom: 1px solid #999;
+}
+.tab {
+	height: 20px;
+	line-height: 20px;
+	box-sizing: border-box;
+	color: #999;
+	padding: 0 8px;
+	border: 1px solid #999;
+	border-bottom: 0;
+	cursor: pointer;
+	float: left;
+}
+.tab.active {
+	color: black;
+	border-bottom: 1px solid white;
+}
+.action {
+	height: 20px;
+	line-height: 20px;
+	box-sizing: border-box;
+	color: black;
+	padding: 0 5px;
+	border: 1px solid #999;
+	border-bottom: 0;
+	cursor: pointer;
+	float: right;
+	padding-left: 16px;
+}
+.action.run {
+	background: url('run.png') no-repeat left center;
+}
+.editor-container {
+	border: 1px solid #999;
+	border-top: 0;
+}
+
+

+ 314 - 0
website/playground/playground.js

@@ -0,0 +1,314 @@
+(function() {
+
+'use strict';
+
+window.onload = function() {
+	require(['require', 'vs/editor/editor.main'], function(require) {
+
+		// require(['vs/languages/typescript/common/typescript'], function() {
+		// 	var mode = require('vs/languages/typescript/common/typescript');
+		// 	var winjs = require('vs/base/common/winjs.base');
+		// 	winjs.xhr({ url: 'playground/samples/editor.d.ts.txt' }).then(function(response) {
+		// 		mode.javaScriptDefaults.addExtraLib(response.responseText, 'editor.d.ts');
+		// 		mode.javaScriptDefaults.addExtraLib([
+		// 			'declare var require: {',
+		// 			'	toUrl(path: string): string;',
+		// 			'	(moduleName: string): any;',
+		// 			'	(dependencies: string[], callback: (...args: any[]) => any, errorback?: (err: any) => void): any;',
+		// 			'	config(data: any): any;',
+		// 			'	onError: Function;',
+		// 			'};',
+		// 		].join('\n'), 'require.d.ts');
+
+				var loading = document.getElementById('loading');
+				loading.parentNode.removeChild(loading);
+				load();
+		// 	});
+		// });
+	});
+};
+
+var editor = null;
+var data = {
+	js: {
+		model: null,
+		state: null
+	},
+	css: {
+		model: null,
+		state: null
+	},
+	html: {
+		model: null,
+		state: null
+	}
+};
+
+function load() {
+
+	function layout() {
+		var GLOBAL_PADDING = 20;
+
+		var WIDTH = window.innerWidth - 2 * GLOBAL_PADDING;
+		var HEIGHT = window.innerHeight;
+
+		var TITLE_HEIGHT = 110;
+		var FOOTER_HEIGHT = 80;
+		var TABS_HEIGHT = 20;
+		var INNER_PADDING = 20;
+		var SWITCHER_HEIGHT = 30;
+
+		var HALF_WIDTH = Math.floor((WIDTH - INNER_PADDING) / 2);
+		var REMAINING_HEIGHT = HEIGHT - TITLE_HEIGHT - FOOTER_HEIGHT - SWITCHER_HEIGHT;
+
+		playgroundContainer.style.width = WIDTH + 'px';
+		playgroundContainer.style.height = (HEIGHT - FOOTER_HEIGHT) + 'px';
+
+		sampleSwitcher.style.position = 'absolute';
+		sampleSwitcher.style.top = TITLE_HEIGHT + 'px';
+		sampleSwitcher.style.left = GLOBAL_PADDING + 'px';
+
+		typingContainer.style.position = 'absolute';
+		typingContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + 'px';
+		typingContainer.style.left = GLOBAL_PADDING + 'px';
+		typingContainer.style.width = HALF_WIDTH + 'px';
+		typingContainer.style.height = REMAINING_HEIGHT + 'px';
+
+		tabArea.style.position = 'absolute';
+		tabArea.style.boxSizing = 'border-box';
+		tabArea.style.top = 0;
+		tabArea.style.left = 0;
+		tabArea.style.width = HALF_WIDTH + 'px';
+		tabArea.style.height = TABS_HEIGHT + 'px';
+
+		editorContainer.style.position = 'absolute';
+		editorContainer.style.boxSizing = 'border-box';
+		editorContainer.style.top = TABS_HEIGHT + 'px';
+		editorContainer.style.left = 0;
+		editorContainer.style.width = HALF_WIDTH + 'px';
+		editorContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
+
+		if (editor) {
+			editor.layout({
+				width: HALF_WIDTH - 2,
+				height: (REMAINING_HEIGHT - TABS_HEIGHT) - 1
+			});
+		}
+
+		runContainer.style.position = 'absolute';
+		runContainer.style.top = GLOBAL_PADDING + TITLE_HEIGHT + SWITCHER_HEIGHT + TABS_HEIGHT + 'px';
+		runContainer.style.left = GLOBAL_PADDING + INNER_PADDING + HALF_WIDTH + 'px';
+		runContainer.style.width = HALF_WIDTH + 'px';
+		runContainer.style.height = (REMAINING_HEIGHT - TABS_HEIGHT) + 'px';
+
+		runIframeHeight = (REMAINING_HEIGHT - TABS_HEIGHT);
+		if (runIframe) {
+			runIframe.style.height = runIframeHeight + 'px';
+		}
+	}
+
+	function changeTab(selectedTabNode, desiredModelId) {
+		for (var i = 0; i < tabArea.childNodes.length; i++) {
+			var child = tabArea.childNodes[i];
+			if (/tab/.test(child.className)) {
+				child.className = 'tab';
+			}
+		}
+		selectedTabNode.className = 'tab active';
+
+		var currentState = editor.saveViewState();
+
+		var currentModel = editor.getModel();
+		if (currentModel === data.js.model) {
+			data.js.state = currentState;
+		} else if (currentModel === data.css.model) {
+			data.css.state = currentState;
+		} else if (currentModel === data.html.model) {
+			data.html.state = currentState;
+		}
+
+		editor.setModel(data[desiredModelId].model);
+		editor.restoreViewState(data[desiredModelId].state);
+		editor.focus();
+	}
+
+
+	// create the typing side
+	var typingContainer = document.createElement('div');
+	typingContainer.className = 'typingContainer';
+
+	var tabArea = (function() {
+		var tabArea = document.createElement('div');
+		tabArea.className = 'tabArea';
+
+		var jsTab = document.createElement('span');
+		jsTab.className = 'tab active';
+		jsTab.appendChild(document.createTextNode('JavaScript'));
+		jsTab.onclick = function() { changeTab(jsTab, 'js'); };
+		tabArea.appendChild(jsTab);
+
+		var cssTab = document.createElement('span');
+		cssTab.className = 'tab';
+		cssTab.appendChild(document.createTextNode('CSS'));
+		cssTab.onclick = function() { changeTab(cssTab, 'css'); };
+		tabArea.appendChild(cssTab);
+
+		var htmlTab = document.createElement('span');
+		htmlTab.className = 'tab';
+		htmlTab.appendChild(document.createTextNode('HTML'));
+		htmlTab.onclick = function() { changeTab(htmlTab, 'html'); };
+		tabArea.appendChild(htmlTab);
+
+		var runBtn = document.createElement('span');
+		runBtn.className = 'action run';
+		runBtn.appendChild(document.createTextNode('Run'));
+		runBtn.onclick = function() { run(); };
+		tabArea.appendChild(runBtn);
+
+		return tabArea;
+	})();
+
+	var editorContainer = document.createElement('div');
+	editorContainer.className = 'editor-container';
+
+	typingContainer.appendChild(tabArea);
+	typingContainer.appendChild(editorContainer);
+
+	var runContainer = document.createElement('div');
+	runContainer.className = 'run-container';
+
+	var sampleSwitcher = document.createElement('select');
+	var sampleChapter;
+	ALL_SAMPLES.forEach(function (sample) {
+		if (!sampleChapter || sampleChapter.label !== sample.chapter) {
+			sampleChapter = document.createElement('optgroup');
+			sampleChapter.label = sample.chapter;
+			sampleSwitcher.appendChild(sampleChapter);
+		}
+		var sampleOption = document.createElement('option');
+		sampleOption.value = sample.sampleId;
+		sampleOption.appendChild(document.createTextNode(sample.name));
+		sampleChapter.appendChild(sampleOption);
+	});
+	sampleSwitcher.className = 'sample-switcher';
+
+	function findSample(sampleId) {
+		for (var i = 0; i < SAMPLES.length; i++) {
+			var sample = SAMPLES[i];
+			if (sample.id === sampleId) {
+				return sample;
+			}
+		}
+		return null;
+	}
+
+	function loadSample(sampleId, callback) {
+		var sample = findSample(sampleId);
+		if (sample) {
+			return callback(null, sample);
+		}
+
+		var script = document.createElement('script');
+		script.src = 'playground/samples/' + sampleId + '.js';
+		script.onload = function() {
+			var sample = findSample(sampleId);
+			return callback(sample ? null : new Error('sample not found'), sample);
+		};
+		script.onerror = function(err) {
+			return callback(err, null);
+		};
+		document.head.appendChild(script);
+	}
+
+	sampleSwitcher.onchange = function() {
+		var sampleId = sampleSwitcher.options[sampleSwitcher.selectedIndex].value;
+		window.location.hash = sampleId;
+	};
+
+	var playgroundContainer = document.getElementById('playground');
+
+	layout();
+	window.onresize = layout;
+
+	playgroundContainer.appendChild(sampleSwitcher);
+	playgroundContainer.appendChild(typingContainer);
+	playgroundContainer.appendChild(runContainer);
+
+	data.js.model = monaco.editor.createModel('console.log("hi")', 'javascript');
+	data.css.model = monaco.editor.createModel('css', 'css');
+	data.html.model = monaco.editor.createModel('html', 'html');
+
+	editor = monaco.editor.create(editorContainer, {
+		model: data.js.model
+	});
+
+	var currentToken = 0;
+	function parseHash(firstTime) {
+		var sampleId = window.location.hash.replace(/^#/, '');
+		if (!sampleId) {
+			sampleId = ALL_SAMPLES[0].sampleId;
+		}
+
+		if (firstTime) {
+			for (var i = 0; i < sampleSwitcher.options.length; i++) {
+				var opt = sampleSwitcher.options[i];
+				if (opt.value === sampleId) {
+					sampleSwitcher.selectedIndex = i;
+					break;
+				}
+			}
+		}
+
+		var myToken = (++currentToken);
+		loadSample(sampleId, function(err, sample) {
+			if (err) {
+				alert('Sample not found! ' + err.message);
+				return;
+			}
+			if (myToken !== currentToken) {
+				return;
+			}
+			data.js.model.setValue(sample.js);
+			data.html.model.setValue(sample.html);
+			data.css.model.setValue(sample.css);
+			editor.setScrollTop(0);
+			run();
+		});
+	}
+	window.onhashchange = parseHash;
+	parseHash(true);
+
+	function run() {
+		doRun(runContainer);
+	}
+}
+
+var runIframe = null, runIframeHeight = 0;
+function doRun(runContainer) {
+	if (runIframe) {
+		// Unload old iframe
+		runContainer.removeChild(runIframe);
+	}
+
+	// Load new iframe
+	runIframe = document.createElement('iframe');
+	runIframe.id = 'runner';
+	runIframe.src = 'playground/playground-runner.html';
+	runIframe.className = 'run-iframe';
+	runIframe.style.boxSizing = 'border-box';
+	runIframe.style.height = runIframeHeight + 'px';
+	runIframe.style.width = '100%';
+	runIframe.style.border = '1px solid lightgrey';
+	runIframe.frameborder = '0';
+	runContainer.appendChild(runIframe);
+
+	var getLang = function(lang) {
+		return data[lang].model.getValue();
+	};
+
+	runIframe.addEventListener('load', function(e) {
+		runIframe.contentWindow.load(getLang('js'), getLang('html'), getLang('css'));
+	});
+}
+
+})();

+ 1577 - 0
website/playground/playground.mdoc

@@ -0,0 +1,1577 @@
+= Creating the editor
+
+== Hello world!
+=======================JS
+// The Monaco Editor can be easily created, given an
+// empty container and an options literal.
+// Two members of the literal are "value" and "mode".
+// The editor takes the full size of its container.
+
+var container = document.getElementById("container");
+var jsCode = "function hello() {\n\talert('Hello world!');\n}";
+
+Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Editor basic options
+=======================JS
+// Through the options literal, the behaviour of the editor can be easily customized.
+
+var container = document.getElementById("container");
+var jsCode = "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line";
+
+// Here are the available config options that can be passed
+// to the editor and their default values. Try changing them!
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+
+	mode: "text/javascript",
+
+	// Show line numbers in the gutter ?
+	lineNumbers: true,
+
+	// Tab size in characters
+	tabSize: "auto",
+
+	// Insert spaces instead of tabs ?
+	insertSpaces: "auto",
+
+	// Rounded corners for rendering selection ?
+	roundedSelection: true,
+
+	// Scrolling one page after the last line ?
+	scrollBeyondLastLine: true,
+
+	// Scrollbars rendering
+	scrollbar: {
+		// other values are "visible" or "hidden"
+		vertical: "auto",
+		horizontal: "auto"
+	},
+
+	// Automatic Layout: Should a timer be installed
+	// which fires every 100ms to scan the editor's
+	// container for size changes ?
+	// Setting to true has a severe performance penalty.
+	// One can call .layout() on the editor manually.
+	automaticLayout: false,
+
+	// Is the editor in read only mode ?
+	readOnly: false,
+
+	// What theme should be used ?
+	// Values supported: vs, vs-dark
+	theme: "vs",
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Hard wrapping
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = "// jqeuery-min excerpt:\n//       1         2         3         4\n//34567890123456789012345678901234567890\n(function(e,t){var n,r,i=typeof t,o=e.document,a=e.location,s=e.jQuery,u=e.$,l={},c=[],p=\"1.9.1\",f=c.concat,d=c.push,h=c.slice,g=c.indexOf,m=l.toString,y=l.hasOwnProperty,v=p.trim,b=function(e,t){return new b.fn.init(e,t,r)},x=/[+-]?(?:\\d*\\.|)\\d+(?:[eE][+-]?\\d+|)/.source,w=/\\S+/g,T=/^[\\s\\uFEFF\\xA0]+|[\\s\\uFEFF\\xA0]+$/g,N=/^(?:(<[\\w\\W]+>)[^>]*|#([\\w-]*))$/,C=/^<(\\w+)\\s*\\/?>(?:<\\/\\1>|)$/,k=/^[\\],:{}\\s]*$/,E=/(?:^|:|,)(?:\\s*\\[)+/g,S=/\\\\(?:[\"\\\\\\/bfnrt]|u[\\da-fA-F]{4})/g,A=/\"[^\"\\\\\\r\\n]*\"|true|false|null|-?(?:\\d+\\.|)\\d+(?:[eE][+-]?\\d+|)/g,j=/^-ms-/,D=/-([\\da-z])/gi,L=function(e,t){return t.toUpperCase()},H=function(e){(o.addEventListener||\"load\"===e.type||\"complete\"===o.readyState)&&(q(),b.ready())},q=function(){o.addEventListener?(o.removeEventListener(\"DOMContentLoaded\",H,!1),e.removeEventListener(\"load\",H,!1)):(o.detachEvent(\"onreadystatechange\",H),e.detachEvent(\"onload\",H))};b.fn=b.prototype={jquery:p,constructor:b,init:function(e,n,r){var i,a;if(!e)return this;if(\"string\"==typeof e){if(i=\"<\"===e.charAt(0)&&\">\"===e.charAt(e.length-1)&&e.length>=3?[null,e,null]:N.exec(e),!i||!i[1]&&n)return!n||n.jquery?(n||r).find(e):this.constructor(n).find(e);if(i[1]){if(n=n instanceof b?n[0]:n,b.merge(this,b.parseHTML(i[1],n&&n.nodeType?n.ownerDocument||n:o,!0)),C.test(i[1])&&b.isPlainObject(n))for(i in n)b.isFunction(this[i])?this[i](n[i]):this.attr(i,n[i]);return this}if(a=o.getElemen";
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript",
+
+	// If `wrappingColumn` is -1, then no wrapping occurs and
+	// long lines are rendered on one line. However, this might
+	// mean that not all code is rendered (... may be used).
+	// If `wrappingColumn` is 0, then viewport width wrapping is set
+	// If `wrappingColumn` is > 0, then the lines will wrap at its value
+	// Defaults to 300
+	wrappingColumn: 40,
+
+	// If more than half of the lines are on lines longer than
+	// `longLineBoundary`, the editor forces viewport width wrapping
+	// By default the value is 300, but here we're using a larger
+	// value to circumvent this default behavior
+	longLineBoundary: 1e4
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Syntax highlighting for HTML elements
+=======================JS
+// The syntax highlighting functionality can be used independently of the editor.
+require(["vs/editor/editor.main"], function ($) {
+
+	// The colorizeElement-function will read the data-lang-attribute
+	// from the element to select the correct language mode. In this
+	// sample it is text/css.
+	Monaco.Editor.colorizeElement(document.getElementById('code'));
+});
+
+=======================HTML
+<pre id="code" data-lang="text/css" style="width:500px;">
+/* Some example CSS */
+
+@import url("something.css");
+
+body {
+  margin: 0;
+  padding: 3em 6em;
+  font-family: tahoma, arial, sans-serif;
+  color: #000;
+}
+
+#navigation a {
+  font-weight: bold;
+  text-decoration: none !important;
+}
+
+h1 {
+  font-size: 2.5em;
+}
+
+h2 {
+  font-size: 1.7em;
+}
+
+h1:before, h2:before {
+  content: "some contents";
+}
+
+code {
+  font-family: courier, monospace;
+  font-size: 80%;
+  color: #418A8A;
+}
+</pre>
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+
+
+
+
+= Interacting with the editor
+
+== Adding a command
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = [
+    '"use strict";',
+    'function Person(age) {',
+    '	if (age) {',
+    '		this.age = age;',
+    '	}',
+    '}',
+    'Person.prototype.getAge = function () {',
+    '	return this.age;',
+    '};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+    value: jsCode,
+    mode: "text/javascript"
+});
+
+var myCondition1 = editor.createContextKey(/*key name*/'myCondition1', /*default value*/false);
+var myCondition2 = editor.createContextKey(/*key name*/'myCondition2', /*default value*/false);
+
+editor.addCommand(KeyCode.Tab, function(ctx, args) {
+    // services available in `ctx`
+    alert('my command is executing with context: ' + JSON.stringify(args.context));
+
+}, 'myCondition1 && myCondition2')
+
+myCondition1.set(true);
+
+setTimeout(function() {
+    alert('now enabling also myCondition2, try pressing Tab!');
+    myCondition2.set(true);
+    // you can use myCondition2.reset() to go back to the default
+}, 2000);
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+== Adding an action
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = "var array = [3, 4, 5];\n";
+
+var editor = Monaco.Editor.create(container, {
+	value: [
+		'',
+		'class Example {',
+		'\tprivate m:number;',
+		'',
+		'\tpublic met(): string {',
+		'\t\treturn "Hello world!";',
+		'\t}',
+		'}'
+	].join('\n'),
+	mode: "text/typescript"
+});
+
+// Explanation:
+// Try right clicking on an identifier or keyword => the action will be enabled (due to `tokensAtPosition`)
+// Try right clicking on a string => the action will be disabled (due to `tokensAtPosition`)
+// Try right clicking on whitespace => the action will be disabled (due to `wordAtPosition`)
+// Press F1 (Alt-F1 in IE) => the action will appear and run if it is enabled
+// Press Ctrl-F10 => the action will run if it is enabled
+
+editor.addAction({
+	// An unique identifier of the contributed action.
+	id: 'my-unique-id',
+
+	// A label of the action that will be presented to the user.
+	label: 'My Label!!!',
+
+	// An optional array of keybindings for the action.
+	keybindings: [KeyMod.CtrlCmd | KeyCode.F10],
+
+	keybindingContext: null,
+
+	// Control if the action should show up in the context menu and where.
+	// Built-in groups:
+	//   1_goto/* => e.g. 1_goto/1_peekDefinition
+	//   2_change/* => e.g. 2_change/2_format
+	//   3_edit/* => e.g. 3_edit/1_copy
+	//   4_tools/* => e.g. 4_tools/1_commands
+	// You can also create your own group.
+	// Defaults to null (don't show in context menu).
+	contextMenuGroupId: '2_change/2_bla',
+
+	// Method that will be executed when the action is triggered.
+	// @param editor The editor instance is passed in as a convinience
+	run: function(ed) {
+		alert("i'm running => " + ed.getPosition());
+		return null;
+	},
+
+	// Optional enablement conditions. All members are optional
+	enablement: {
+		// The action is enabled only if text in the editor is focused (e.g. blinking cursor).
+		// Warning: This condition will be disabled if the action is marked to be displayed in the context menu
+		// Defaults to false.
+		textFocus: true,
+
+		// The action is enabled only if the editor or its widgets have focus (e.g. focus is in find widget).
+		// Defaults to false.
+		//widgetFocus: true,
+
+		// The action is enabled only if the editor is not in read only mode.
+		// Defaults to false.
+		//writeableEditor: true,
+
+		// The action is enabled only if the cursor position is over a word (i.e. not whitespace).
+		// Defaults to false.
+		wordAtPosition: true,
+
+		// The action is enabled only if the cursor position is over tokens of a certain kind.
+		// Defaults to no tokens required.
+		tokensAtPosition: ['identifier', '', 'keyword'],
+	}
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Inserting a code snippet
+=======================JS
+// There is a way to insert a snippet. The snippet syntax is very easy, use {{ and }} to indicate a placeholder.
+// Use the same value inside {{ and }} to have linked editing! That value will be the default entered text.
+// Use an empty placeholder {{}} to indicate the end position of the cursor if the user hits Enter.
+var container = document.getElementById("container");
+var jsCode = "var array = [3, 4, 5];\n";
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+var snippet = require("vs/editor/contrib/snippet/common/snippet");
+
+var template =
+	'for (var {{index}} = 0; {{index}} < {{array}}.length; {{index}}++) {\n' +
+	'\tvar {{element}} = {{array}}[{{index}}];\n' +
+	'\t{{}}\n' +
+	'}';
+
+editor.setPosition({ lineNumber: 2, column :1 });
+
+snippet.getSnippetController(editor).run(new snippet.CodeSnippet(template), 0, 0);
+
+editor.focus();
+
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Revealing a position
+
+=======================JS
+var container = document.getElementById("container");
+var jsCodeArr = [
+	'// ------------------------------',
+	'// ------------------------------',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};',
+	'',
+	''
+];
+
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+jsCodeArr = jsCodeArr.concat(jsCodeArr.slice(0));
+
+jsCodeArr[49] += 'And this is some long line. And this is some long line. And this is some long line. And this is some long line. And this is some long line. ';
+
+var jsCode = jsCodeArr.join('\n');
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+var shouldRevealLineInCenterOfViewport = true;
+var shouldRevealColumn = true;
+
+editor.revealPosition({
+	lineNumber: 50,
+	column: 120
+}, shouldRevealLineInCenterOfViewport, shouldRevealColumn);
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Rendering glyphs in the margin
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+	'"use strict";',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript",
+	glyphMargin: true
+});
+
+var decorationId = editor.changeDecorations(function(changeAccessor) {
+	return changeAccessor.addDecoration({
+		startLineNumber: 3,
+		startColumn: 1,
+		endLineNumber: 3,
+		endColumn: 1
+	}, {
+		isWholeLine: true,
+		className: 'myContentClass',
+		glyphMarginClassName: 'myGlyphMarginClass'
+	});
+});
+
+
+// You can now use `decorationId` to change or remove the decoration
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+.myGlyphMarginClass {
+	background: red;
+}
+.myContentClass {
+	background: lightblue;
+}
+
+=======================END
+
+
+
+
+== Line and Inline decorations
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+	'"use strict";',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+var lineDecorationId = editor.changeDecorations(function(changeAccessor) {
+	return changeAccessor.addDecoration({
+		startLineNumber: 3,
+		startColumn: 1,
+		endLineNumber: 5,
+		endColumn: 1
+	}, {
+		isWholeLine: true,
+		linesDecorationsClassName: 'myLineDecoration'
+	});
+});
+
+var inlineDecorationId = editor.changeDecorations(function(changeAccessor) {
+	return changeAccessor.addDecoration({
+		startLineNumber: 7,
+		startColumn: 1,
+		endLineNumber: 7,
+		endColumn: 24
+	}, {
+		inlineClassName: 'myInlineDecoration'
+	});
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+.myInlineDecoration {
+	color: red !important;
+	cursor: pointer;
+	text-decoration: underline;
+	font-weight: bold;
+	font-style: oblique;
+}
+.myLineDecoration {
+	background: lightblue;
+	width: 5px !important;
+	left: 3px;
+}
+
+=======================END
+
+
+
+
+== Customizing the line numbers
+
+=======================JS
+function lineNumbersFunc(originalLineNumber) {
+	var map = [ 'O', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
+	if (originalLineNumber < map.length) {
+		return map[originalLineNumber];
+	}
+	return originalLineNumber;
+}
+
+var container = document.getElementById("container");
+var jsCode = [
+	'"use strict";',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript",
+	lineNumbers: lineNumbersFunc
+});
+
+=======================HTML
+<div id="container" style="height:100%"></div>
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+== Customizing the hover
+
+=======================JS
+require([
+	'require',
+	'vs/base/common/winjs.base',
+	'vs/editor/common/core/range',
+	'vs/editor/contrib/hover/browser/hoverOperation',
+	'vs/editor/contrib/hover/browser/hoverWidgets'
+], function(require, WinJS) {
+
+	var Range = require('vs/editor/common/core/range').Range;
+	var HoverOperation = require('vs/editor/contrib/hover/browser/hoverOperation').HoverOperation;
+	var ContentHoverWidget = require('vs/editor/contrib/hover/browser/hoverWidgets').ContentHoverWidget;
+
+	var ContentComputer = WinJS.Class.define(function ContentComputer(range, text, tokenType) {
+	}, {
+
+		setContext: function (range, text, tokenType) {
+			this.a = range.startLineNumber;
+			this.b = range.startColumn;
+			this.result = [
+				'Text: ' + text,
+				'Token type: ' + tokenType
+			];
+		},
+
+		computeAsync: function () {
+			return WinJS.Promise.timeout(500).then(function() {
+				return this.a + ' x ' + this.b + ' = ' + (this.a * this.b);
+			}.bind(this));
+		},
+
+		computeSync: function () {
+			return this.a + ' + ' + this.b + ' = ' + (this.a + this.b);
+		},
+
+		onResult: function(r) {
+			this.result.push(r);
+		},
+
+		getResult: function() {
+			return this.result;
+		}
+	});
+
+	var ContentWidget = WinJS.Class.derive(ContentHoverWidget, function ContentWidget(editor) {
+		ContentHoverWidget.call(this, 'my.hover.widget.id', editor);
+		this.lastRange = null;
+		this.computer = new ContentComputer();
+		this.hoverOperation = new HoverOperation(
+			this.computer,
+			this.withResult.bind(this),
+			null,
+			this.withResult.bind(this)
+		);
+	}, {
+
+		startShowingAt: function (range, text, tokenType) {
+			if (this.lastRange && this.lastRange.equalsRange(range)) {
+				// We have to show the widget at the exact same range as before, so no work is needed
+				return;
+			}
+
+			this.hoverOperation.cancel();
+			this.hide();
+
+			this.lastRange = range;
+			this.computer.setContext(range, text, tokenType);
+			this.hoverOperation.start();
+		},
+
+		hide: function () {
+			this.lastRange = null;
+			if (this.hoverOperation) {
+				this.hoverOperation.cancel();
+			}
+			ContentHoverWidget.prototype.hide.call(this);
+		},
+
+		withResult: function (someResult) {
+			this._domNode.innerHTML = someResult.join('<br/>');
+			this.showAt({
+				lineNumber: this.lastRange.startLineNumber,
+				column: this.lastRange.startColumn
+			});
+		}
+	});
+
+	var addCustomHoverTo = (function() {
+
+		var editor = null;
+		var contentWidget = null;
+
+		function hide() {
+			contentWidget.hide();
+		}
+
+		function onMouseMove(e) {
+			var targetType = e.target.type;
+
+			if (targetType === Monaco.Editor.MouseTargetType.CONTENT_WIDGET && e.target.detail === 'my.hover.widget.id') {
+				// mouse moved on top of content hover widget
+				return;
+			}
+
+			if (targetType === Monaco.Editor.MouseTargetType.CONTENT_TEXT) {
+				// Extract current token under cursor
+				var currentTokenInfo = null;
+				editor.getModel().tokenIterator(e.target.position, function (it) {
+					currentTokenInfo = it.next();
+				});
+
+				if(currentTokenInfo) {
+					var showRange = new Range(currentTokenInfo.lineNumber, currentTokenInfo.startColumn, currentTokenInfo.lineNumber, currentTokenInfo.endColumn);
+
+					contentWidget.startShowingAt(showRange, editor.getModel().getValueInRange(showRange), currentTokenInfo.token.type);
+				}
+			} else {
+				hide();
+			}
+		}
+
+		function setup(ed) {
+			editor = ed;
+			contentWidget = new ContentWidget(editor);
+
+			editor.addListener(Monaco.Editor.EventType.MouseMove, onMouseMove);
+			editor.addListener(Monaco.Editor.EventType.MouseLeave, hide);
+			editor.addListener(Monaco.Editor.EventType.KeyDown, hide);
+			editor.addListener(Monaco.Editor.EventType.ModelChanged, hide);
+			editor.addListener('scroll', hide);
+		}
+
+		return setup;
+	})();
+
+
+	var editor = createEditor();
+	addCustomHoverTo(editor);
+});
+
+function createEditor() {
+
+	var container = document.getElementById("container");
+	var jsCode = [
+		'"use strict";',
+		'function Person(age) {',
+		'	if (age) {',
+		'		this.age = age;',
+		'	}',
+		'}',
+		'Person.prototype.getAge = function () {',
+		'	return this.age;',
+		'};'
+	].join('\n');
+
+	return Monaco.Editor.create(container, {
+		value: jsCode,
+		mode: "text/javascript",
+		glyphMargin: true,
+		hover: false
+	});
+
+}
+
+=======================HTML
+<div id="container" style="height:100%"></div>
+
+=======================CSS
+
+
+=======================END
+
+
+
+
+== Listening to Mouse Events
+
+=======================JS
+var container = document.getElementById("container");
+var jsCode = [
+	'"use strict";',
+	'function Person(age) {',
+	'	if (age) {',
+	'		this.age = age;',
+	'	}',
+	'}',
+	'Person.prototype.getAge = function () {',
+	'	return this.age;',
+	'};'
+].join('\n');
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript",
+	glyphMargin: true,
+	nativeContextMenu: false
+});
+
+var decorationId = editor.changeDecorations(function(changeAccessor) {
+	return changeAccessor.addDecoration({
+		startLineNumber: 3,
+		startColumn: 1,
+		endLineNumber: 3,
+		endColumn: 1
+	}, {
+		isWholeLine: true,
+		className: 'myContentClass',
+		glyphMarginClassName: 'myGlyphMarginClass'
+	});
+});
+
+// Add a zone to make hit testing more interesting
+var viewZoneId = null;
+editor.changeViewZones(function(changeAccessor) {
+		var domNode = document.createElement('div');
+		domNode.style.background = 'lightgreen';
+		viewZoneId = changeAccessor.addZone({
+					afterLineNumber: 3,
+					heightInLines: 3,
+					domNode: domNode
+		});
+});
+
+// Add a content widget (scrolls inline with text)
+var contentWidget = {
+	domNode: null,
+	getId: function() {
+		return 'my.content.widget';
+	},
+	getDomNode: function() {
+		if (!this.domNode) {
+			this.domNode = document.createElement('div');
+			this.domNode.innerHTML = 'My content widget';
+			this.domNode.style.background = 'grey';
+		}
+		return this.domNode;
+	},
+	getPosition: function() {
+		return {
+			position: {
+				lineNumber: 7,
+				column: 8
+			},
+			preference: [Monaco.Editor.ContentWidgetPositionPreference.ABOVE, Monaco.Editor.ContentWidgetPositionPreference.BELOW]
+		};
+	}
+};
+editor.addContentWidget(contentWidget);
+
+// Add an overlay widget
+var overlayWidget = {
+	domNode: null,
+	getId: function() {
+		return 'my.overlay.widget';
+	},
+	getDomNode: function() {
+		if (!this.domNode) {
+			this.domNode = document.createElement('div');
+			this.domNode.innerHTML = 'My overlay widget';
+			this.domNode.style.background = 'grey';
+			this.domNode.style.right = '30px';
+			this.domNode.style.top = '50px';
+		}
+		return this.domNode;
+	},
+	getPosition: function() {
+		return null;
+	}
+};
+editor.addOverlayWidget(overlayWidget);
+
+var output = document.getElementById('output');
+function showEvent(str) {
+	while(output.childNodes.length > 6) {
+		output.removeChild(output.firstChild.nextSibling.nextSibling);
+	}
+	output.appendChild(document.createTextNode(str));
+	output.appendChild(document.createElement('br'));
+}
+
+
+
+editor.addListener(Monaco.Editor.EventType.MouseMove, function (e) {
+	showEvent('mousemove - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.MouseDown, function (e) {
+	showEvent('mousedown - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.ContextMenu, function (e) {
+	showEvent('contextmenu - ' + e.target.toString());
+});
+editor.addListener(Monaco.Editor.EventType.MouseLeave, function (e) {
+	showEvent('mouseleave');
+});
+
+=======================HTML
+<div id="output" style="height:29%;font-family:'Courier New', monospace;">Last 3 events:<br/></div>
+<div style="background:#ccc;height:1%"></div>
+<div id="container" style="height:70%;"></div>
+
+=======================CSS
+.myGlyphMarginClass {
+	background: red;
+}
+.myContentClass {
+	background: lightblue;
+}
+
+=======================END
+
+
+
+
+== Listening on keydown events
+
+=======================JS
+var KeyMod = require('vs/base/common/keyCodes').KeyMod;
+var KeyCode = require('vs/base/common/keyCodes').KeyCode;
+
+var container = document.getElementById("container");
+var jsCode = "function hello() {\n\talert('Hello world!');\n}";
+
+var editor = Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+function onF9() {
+	alert('F9 pressed!');
+	// prevent default
+	return true;
+}
+
+var myBinding = editor.addCommand(KeyCode.F9, onF9);
+
+// When cleaning up remember to call myBinding.dispose()
+
+=======================HTML
+<div id="container" style="height:100%"></div>
+
+=======================CSS
+
+
+=======================END
+
+= Customizing the appearence
+
+== Exposed CSS classes
+=======================JS
+// The editor exposes a set of CSS classes that can be overwritten.
+var container = document.getElementById("container");
+Monaco.Editor.create(container, {
+	value: "My to-do list:\n* buy milk\n* buy coffee\n* write awesome code",
+	mode: "text/plain"
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+/* The editor */
+.monaco-editor {
+	font-family: Arial;
+	font-size: 20px;
+	line-height: inherit;
+	background: #EDF9FA;
+}
+
+/* The editor's background */
+.monaco-editor-background {
+	background: #EDF9FA;
+}
+
+/* Cursor */
+.monaco-editor .cursor {
+	background: darkblue;
+}
+
+/* Current line */
+.monaco-editor .current-line {
+	background: rgba(0, 0, 255, 0.1);
+}
+
+/* Line Numbers */
+.monaco-editor .line-numbers {
+	background-color: #EDF9FA;
+	color: green;
+}
+
+/* Line Decorations */
+.monaco-editor .lines-decorations {
+	background-color: #EDF9FA;
+}
+
+/* Selection */
+.monaco-editor .dynamic.focused > .selections-layer > .selected-text {
+	background: rgba(128, 0, 0, 0.2) !important;
+}
+.monaco-editor .dynamic > .selections-layer > .selected-text {
+	background: rgba(128, 0, 0, 0.1) !important;
+}
+
+/* Word Highlight */
+.monaco-editor .wordHighlight {
+	background-color: rgba(0, 0, 0, 0);
+	-webkit-animation: none;
+	-moz-animation: none;
+	-ms-animation: none;
+	animation: none;
+}
+
+=======================END
+
+
+
+
+== Scrollbars
+
+=======================JS
+// Remember to check out the CSS too!
+var container = document.getElementById("container");
+var htmlCode = "<html><!--long linelong linelong linelong linelong linelong linelong linelong linelong linelong line-->\n<head>\n	<!-- HTML comment -->\n	<style type=\"text/css\">\n		/* CSS comment */\n	</style>\n	<script type=\"text/javascript\">\n		// JavaScript comment\n	</"+"script>\n</head>\n<body></body>\n</html>";
+
+Monaco.Editor.create(container, {
+	value: htmlCode,
+	mode: "text/html",
+	theme: "vs",
+	scrollbar: {
+		// Subtle shadows to the left & top. Defaults to true.
+		useShadows: false,
+
+		// Render vertical arrows. Defaults to false.
+		verticalHasArrows: true,
+		// Render horizontal arrows. Defaults to false.
+		horizontalHasArrows: true,
+
+		// Render vertical scrollbar.
+		// Accepted values: 'auto', 'visible', 'hidden'.
+		// Defaults to 'auto'
+		vertical: 'visible',
+		// Render horizontal scrollbar.
+		// Accepted values: 'auto', 'visible', 'hidden'.
+		// Defaults to 'auto'
+		horizontal: 'visible',
+
+		verticalScrollbarSize: 17,
+		horizontalScrollbarSize: 17,
+		arrowSize: 30
+	}
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+/* Make horizontal scrollbar, decorations overview ruler and vertical scrollbar arrows opaque */
+.monaco-editor .monaco-scrollable-element .scrollbar.horizontal,
+.monaco-editor .decorationsOverviewRuler,
+.monaco-editor .monaco-scrollable-element .scrollbar.vertical .arrow-background {
+	  background: rgba(230, 230, 230, 255);
+}
+/* Make vertical scrollbar transparent to allow decorations overview ruler to be visible */
+.monaco-editor .monaco-scrollable-element .scrollbar.vertical {
+	  background: rgba(0, 0, 0, 0);
+}
+
+=======================END
+
+
+
+
+== Tokens and colors
+=======================JS
+// This example shows how to integrate the editor with a certain theme and then customize the token colors of that theme.
+var container = document.getElementById("container");
+var htmlCode = "<html>\n<head>\n	<!-- HTML comment -->\n	<style type=\"text/css\">\n		/* CSS comment */\n	</style>\n	<script type=\"text/javascript\">\n		// JavaScript comment\n	</"+"script>\n</head>\n<body></body>\n</html>";
+
+Monaco.Editor.create(container, {
+	value: htmlCode,
+	mode: "text/html",
+	theme: "vs"
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+/*
+These rules customize the "Visual Studio" (vs) theme.
+
+Token names can be discovered by:
+a) exploring the .css theme files that come with the editor;
+b) inspecting the dom elements rendered by the editor;
+*/
+.monaco-editor.vs .token.comment		{ color: orange; }
+.monaco-editor.vs .token.comment.js		{ color: green; }
+.monaco-editor.vs .token.comment.css	{ color: blue; }
+
+=======================END
+
+
+
+
+
+
+
+
+= Creating the DiffEditor
+
+== Hello diff world!
+
+=======================JS
+var originalModel = Monaco.Editor.createModel("heLLo world!", "text/plain");
+var modifiedModel = Monaco.Editor.createModel("hello orlando!", "text/plain");
+
+var container = document.getElementById("container");
+var diffEditor = Monaco.Editor.createDiffEditor(container);
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Multi-line example
+
+=======================JS
+var originalModel = Monaco.Editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
+var modifiedModel = Monaco.Editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.", "text/plain");
+
+var container = document.getElementById("container");
+var diffEditor = Monaco.Editor.createDiffEditor(container, {
+	// You can optionally disable the resizing
+	enableSplitViewResizing: false
+});
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Inline Diff Example
+
+=======================JS
+var originalModel = Monaco.Editor.createModel("This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text", "text/plain");
+var modifiedModel = Monaco.Editor.createModel("just some text\nabcz\nzzzzefgh\nSome more text\nThis line is removed on the left.", "text/plain");
+
+var container = document.getElementById("container");
+var diffEditor = Monaco.Editor.createDiffEditor(container, {
+	// You can optionally disable the resizing
+	enableSplitViewResizing: false,
+
+	// Render the diff inline
+	renderSideBySide: false
+});
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Navigating a Diff
+=======================JS
+// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
+var originalModel = Monaco.Editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain");
+var modifiedModel = Monaco.Editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain");
+
+
+var container = document.getElementById("container");
+var diffEditor = Monaco.Editor.createDiffEditor(container);
+diffEditor.setModel({
+	original: originalModel,
+	modified: modifiedModel
+});
+
+
+var diffNavigation = require("vs/editor/contrib/diffNavigator/common/diffNavigator"); // note: amd has been loaded upfront
+
+var navi = new diffNavigation.DiffNavigator(diffEditor, {
+	followsCaret: true, // resets the navigator state when the user selects something in the editor
+	ignoreCharChanges: true // jump from line to line
+});
+
+window.setInterval(function() {
+	navi.next();
+}, 2000);
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+
+
+
+
+= Extending Language Services
+
+== Custom languages
+=======================JS
+// It is easy to create a custom language mode from a Monarch description
+// See http://monacotools.azurewebsites.net/Content/monarch/monarch-documentation.html.
+
+var container = document.getElementById("container");
+var code = getCode();
+
+// See http://monacotools.azurewebsites.net/Content/monarch/monarch-documentation.html
+var modeDescriptor = {
+	name: 'custom.1.',
+	mimeTypes: [],
+	tokenizer: {
+		root: [
+			[/\[error.*/, "custom-error"],
+			[/\[notice.*/, "custom-notice"],
+			[/\[info.*/, "custom-info"],
+			[/\[[a-zA-Z 0-9:]+\]/, "custom-date"],
+		],
+	},
+	suggestSupport: {
+		textualCompletions: false,
+		triggerCharacters: ['.', ' '],
+		snippets: [
+			'simpleText',
+			{
+				type: 'keyword',
+				label: 'testing',
+				codeSnippet: 'testing({{condition}})',
+				documentationLabel: "Testing"
+			},
+			{
+				type: 'snippet',
+				label: 'ifelse',
+				codeSnippet: [
+					'if ({{condition}}) {',
+					'\t{{}}',
+					'} else {',
+					'\t',
+					'}'
+				].join('\n'),
+				documentationLabel: "If-Else Statement"
+			},
+		]
+	}
+};
+Monaco.Editor.create(container, {
+	value: code,
+	mode: modeDescriptor
+});
+
+// Alternatively, you can use:
+// var model = Monaco.Editor.createModel(code, modeDescriptor);
+// var mode = Monaco.Editor.createCustomMode(modeDescriptor);
+
+function getCode() {
+	return [
+		'[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations',
+		'[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37',
+		'[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)',
+		'[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 16:45:56 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 17:13:50 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 17:21:44 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 17:23:53 2004] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd/twiki/lib/TWiki.pm line 528.',
+		'[Sun Mar 7 17:23:53 2004] statistics: Can\'t create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied',
+		'[Sun Mar 7 17:27:37 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 17:31:39 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 17:58:00 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:00:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:10:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:19:01 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:42:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:52:30 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 18:58:52 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 19:03:58 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 19:08:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:04:35 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:11:33 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:12:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:25:31 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:44:48 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome',
+		'[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 21:31:12 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 21:39:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Sun Mar 7 21:44:10 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 01:35:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 01:47:06 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 01:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 02:12:24 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 02:54:54 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 03:46:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 03:48:18 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 03:52:17 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 03:55:09 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 04:22:55 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 04:24:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 04:40:32 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 04:55:40 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 04:59:13 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 05:22:57 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 05:24:29 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'[Mon Mar 8 05:31:47 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed',
+		'<11>httpd[31628]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_inf.html in 29-Mar 15:18:20.50 from xx.xx.xx.xx',
+		'<11>httpd[25859]: [error] [client xx.xx.xx.xx] File does not exist: /usr/local/installed/apache/htdocs/squirrelmail/_vti_bin/shtml.exe/_vti_rpc in 29-Mar 15:18:20.54 from xx.xx.xx.xx',
+	].join('\n');;
+}
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================CSS
+.monaco-editor .token.custom-info {
+	color: grey;
+}
+.monaco-editor .token.custom-error {
+	color: red;
+	font-weight: bold;
+	font-size: 1.2em;
+}
+.monaco-editor .token.custom-notice {
+	color: orange;
+}
+
+.monaco-editor .token.custom-date {
+	color: green;
+}
+
+=======================END
+
+
+
+
+== Configure JavaScript defaults
+=======================JS
+// Add additonal d.ts files to the JavaScript language service and change. Also change the default compilation options.
+// The sample below show how a class Facts is declared and introduced to the system and how the compiler is told to use ES6 (target=2).
+var container = document.getElementById("container");
+var jsCode = [
+'"use strict";',
+
+"class Chuck {",
+"    greet() {",
+"        return Facts.next();",
+"    }",
+"}",
+
+].join('\n');
+
+Monaco.Editor.create(container, {
+	value: jsCode,
+	mode: "text/javascript"
+});
+
+require(['vs/languages/typescript/common/typescript'], function(mode) {
+
+	// validation settings
+	mode.javaScriptDefaults.setDiagnosticsOptions({
+		noSemanticValidation: true,
+		noSyntaxValidation: false
+	});
+
+	// typescript compiler options
+	mode.javaScriptDefaults.setCompilerOptions({
+		target: 2,
+		allowNonTsExtensions: true
+	});
+
+	// extra libraries
+	mode.javaScriptDefaults.addExtraLib([
+		'declare class Facts {',
+		'    /**',
+		'     * Returns the next fact',
+		'     */',
+		'    static next():string',
+		'}',
+	].join('\n'), 'filename/facts.d.ts');
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Configure JSON validation
+=======================JS
+// Configures a JSON schema for a JSON editor.
+// This enables information hovers, intellisense and validation.
+var container = document.getElementById("container");
+var jsonCode = [
+				'{',
+				'        "tabSize": 4,',
+				'        "missingSemicolon": "warning"',
+				'}'
+].join('\n');
+
+var model = Monaco.Editor.createModel(jsonCode, 'json', 'inmemory://model/jsonexample.json');
+Monaco.Editor.create(container, { model: model });
+
+Monaco.Editor.configureMode('json', {
+	schemas: [
+		{
+			"fileMatch": ["jsonexample.json"],
+			"url": "http://myschemastore.org/myschema",
+			"schema": {
+				"title": "My JSON schema",
+				"type": "object",
+				"properties": {
+					"tabSize": {
+						"description": "The tab size in characters",
+						"type": "number"
+					},
+					"missingSemicolon": {
+						"enum": ["ignore", "warning", "error"],
+						"default": "warning",
+						"description": "Warning level for missing semicolons"
+					}
+				}
+			}
+		}
+	]
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Configure CSS validation
+=======================JS
+// Configure the rules to be used after you have created the editor.
+// The example disables the "zero-units" CSS rule.
+var container = document.getElementById("container");
+var cssCode = [
+	'body {',
+	'}',
+	'',
+	'#header {',
+	'	-webkit-transition: opacity 100ms linear;',
+	'}'
+].join('\n');
+
+Monaco.Editor.create(container, {
+	value: cssCode,
+	mode: "text/css"
+});
+
+var lintOpts = {
+	hexColorLength: 'error',					// Hex colors must consist of three or six hex numbers
+	argumentsInColorFunction: 'error',			// Invalid number of parameters
+
+	compatibleVendorPrefixes: 'warning',		// When using a vendor-specific prefix make sure to also include all other vendor-specific properties
+	vendorPrefix: 'warning',					// When using a vendor-specific prefix also include the standard property
+	duplicateProperties: 'warning',				// Do not use duplicate style definitions
+	emptyRules: 'warning',						// Do not use empty rulesets
+	universalSelector: 'warning',				// The universal selector (*) is known to be slow
+	fontFaceProperties: 'warning',				// @font-face rule must define 'src' and 'font-family' properties
+	unknownProperties: 'warning',				// Unknown property.
+	unknownVendorSpecificProperties: 'warning',	// Unknown vendor specific property.
+	propertyIgnoredDueToDisplay: 'warning',		// Property is ignored due to the display. E.g. with 'display: inline', the width, height, margin-top, margin-bottom, and float properties have no effect
+
+	importStatement: 'ignore',					// Import statements do not load in parallel
+	boxModel: 'ignore',							// Do not use width or height when using padding or border
+	zeroUnits: 'ignore',						// No unit for zero needed
+	important: 'ignore',						// Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
+	float: 'ignore',							// Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
+	idSelector: 'ignore'						// Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
+}
+
+// Try 'ignore', 'warning', and 'error'
+Monaco.Editor.configureMode('css', {
+	"lint": lintOpts
+});
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+== Participating in Code Validation
+=======================JS
+// The editor lets you participate in code validation. All you need to do is to register a validation participant with the platform
+// and publish markers from the participant.
+// <ul>
+// <li>The markers API provided through the class IMarkerPublisher and IMarkerService now supports groups. Groups are independent units of markers associated with a resource. When computed they get published even if another group on the same resource is still pending. This allows for example to update // markers on a resource in a fast and a slow computation independently. To support this feature we needed to change and break some existing API around markers. The changes are:
+// <ul>
+// <li>Markers don't have an ownerId anymore. If you want to associate a set of markers for a given resource with a certain owner, group those markers into a separate group. The interfaces and the functions on the module markers to create markers have been updated.</li>
+// <li>Markers have an optional id. This can be used to identify a marker inside a group. By default the id is undefined.</li>
+// <li>The interface to change and read markers on a marker publisher has been renamed to IMarkerReadAccessor and IMarkerChangeAccessor.</li>
+// <li>The methods on a IMarkerPublisher to get a read or change accessor have been renamed to readMarkers and changeMarkers (the Set in the name got removed sine you don't read or change sets anymore).</li>
+// <li>Both method have an optional parameter id. If passed in a group with that id is created if it doesn't exist and read or changed, respectively. If id is omitted the group with the id 'defaultGroup' is accessed.</li>
+// </ul>
+// Register a worker participant to the javascript language service
+// You can find the source code of the participant here:
+// http://monacotools.azurewebsites.net/Docs/examples/validateParticipant.js
+Monaco.Editor.registerWorkerParticipant('javascript', '../../../../../Docs/examples/validateParticipant', 'ValidateParticipant');
+
+// Create a javascript model and identify it with a url
+var jsCode = [
+	"function HelloWorld() {",
+	"    console.log('Hello World');",
+	"}",
+].join('\n');
+var model = Monaco.Editor.createModel(jsCode, 'javascript', 'http://myhost:port/myfile');
+
+// Create the editor
+var textEditor = Monaco.Editor.create(document.getElementById("container"));
+
+function log(str) {
+	var output = document.getElementById("output");
+	output.innerHTML += str + '<br/>';
+	output.scrollTop = 1000;
+}
+
+// Get marker service & subscribe to marker events
+var markerService = textEditor.getMarkerService();
+markerService.onMarkerChanged.add(function(resources) {
+	resources.forEach(function(resource) {
+		log('- Markers changed for resource \'' + resource.toString() + '\'');
+
+		// Read all markers for this resource
+		var markers = markerService.read({
+			resource: resource, // filter markers by resource
+//				owner: 'id', // filter markers by owner/creator
+//				take: 100, // how markers should be read
+		});
+		markers.forEach(function(marker) {
+			log('-- Marker: ' + marker.message + '@(' + marker.startLineNumber + ',' + marker.startColumn  + ')');
+		});
+	});
+});
+
+// Set editor model
+textEditor.setModel(model);
+
+=======================HTML
+<div id="output" style="height:29%;font-family:'Courier New', monospace;">Output:<br/></div>
+<div style="background:#ccc;height:1%"></div>
+<div id="container" style="height:70%;"></div>
+
+=======================END
+
+
+
+
+== Participating in Intellisense
+=======================JS
+// The editor lets you participate in computing and filtering Intellisense proposals. All you need to do is to register a suggest participant with the platform
+// and return suggest proposals or filter out suggestions.
+// Try typing conLog and Ctrl-Space for intellisense
+
+// Register a worker participant to the javascript language service
+// You can find the source code of the participant here:
+// http://monacotools.azurewebsites.net/Docs/examples/suggestParticipant.js
+Monaco.Editor.registerWorkerParticipant('javascript', '../../../../../Docs/examples/suggestParticipant', 'SuggestParticipant');
+
+// Create a javascript model and identify it with a url
+var jsCode = [
+	"function HelloWorld() {",
+	"    console.log('Hello World');",
+	"}",
+].join('\n');
+var model = Monaco.Editor.createModel(jsCode, 'javascript', 'http://myhost:port/myfile');
+
+// Create the editor
+var textEditor = Monaco.Editor.create(document.getElementById("container"));
+
+// Set editor model
+textEditor.setModel(model);
+
+=======================HTML
+<div id="container" style="height:100%;"></div>
+
+=======================END
+
+
+
+
+
+
+
+

BIN
website/playground/run.png


+ 54 - 0
website/playground/spinner.css

@@ -0,0 +1,54 @@
+/* ---- BEGIN loading spinner ---- */
+#loading .spinner {
+	margin: 100px auto;
+	width: 50px;
+	height: 40px;
+	text-align: center;
+	font-size: 10px;
+}
+
+#loading .spinner > div {
+	background-color: #333;
+	height: 100%;
+	width: 6px;
+	display: inline-block;
+
+	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+	animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+#loading .spinner .rect2 {
+	-webkit-animation-delay: -1.1s;
+	animation-delay: -1.1s;
+}
+
+#loading .spinner .rect3 {
+	-webkit-animation-delay: -1.0s;
+	animation-delay: -1.0s;
+}
+
+#loading .spinner .rect4 {
+	-webkit-animation-delay: -0.9s;
+	animation-delay: -0.9s;
+}
+
+#loading .spinner .rect5 {
+	-webkit-animation-delay: -0.8s;
+	animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+	20% { -webkit-transform: scaleY(1.0) }
+}
+
+@keyframes sk-stretchdelay {
+	0%, 40%, 100% {
+		transform: scaleY(0.4);
+		-webkit-transform: scaleY(0.4);
+	}  20% {
+		transform: scaleY(1.0);
+		-webkit-transform: scaleY(1.0);
+	}
+}
+/* ---- END loading spinner ---- */

+ 4 - 0
website/worker-loader-proxy.js

@@ -0,0 +1,4 @@
+self.MonacoEnvironment = {
+	baseUrl: '../release/min/'
+};
+importScripts('../release/min/vs/base/worker/workerMain.js');

Some files were not shown because too many files changed in this diff