diff --git a/tutorial/code/Page.php b/tutorial/code/Page.php
new file mode 100644
index 0000000..4f88a28
--- /dev/null
+++ b/tutorial/code/Page.php
@@ -0,0 +1,17 @@
+<?
+
+class Page extends SiteTree {
+	static $db = array(
+	);
+	
+	static $defaults = array(
+	);
+
+	
+}
+
+class Page_Controller extends ContentController {
+
+}
+
+?>
diff --git a/tutorial/css/editor.css b/tutorial/css/editor.css
new file mode 100644
index 0000000..9fe6dc9
--- /dev/null
+++ b/tutorial/css/editor.css
@@ -0,0 +1,14 @@
+/**
+ * This support file is used to style the WYSIWYG editor in the CMS
+ */
+
+@import "typography.css";
+
+body.mceContentBody {
+	min-height: 200px;
+	font-size: 62.5%;
+}
+body.mceContentBody a.broken {
+	background-color: #FF7B71;
+	border: 1px red solid;
+}
diff --git a/tutorial/css/form.css b/tutorial/css/form.css
new file mode 100644
index 0000000..c57567c
--- /dev/null
+++ b/tutorial/css/form.css
@@ -0,0 +1,64 @@
+/* GENERIC FORM STYLING */
+#Content form {
+	width:378px;
+}
+	#Content form fieldset {
+		border:0;
+		padding:12px;
+	}
+		#Content .message {
+			color:red;
+			background:#ddd;
+			border:1px solid #ccc;
+			padding:5px;
+			margin:5px;
+		}
+		#Content span.message {
+			width: 300px;
+		}
+		#Content form div {
+			margin-top:10px;
+			width:100%;
+		}
+		#Content form label {
+			font-size:1.1em;
+			color:#333;
+		}
+			#Content form label.left {
+				float:left;
+				width:12em;
+			}
+			#Content form label.FormHeading {
+				font-size:1.3em;
+				color:#ff7200;
+				font-weight:bold;
+			}
+		#Content form input.text,
+		#Content form textarea,
+		#Content form select {
+			width:200px;
+			color:#000;
+			background:#f8f8f8;
+			border:1px solid #aaa;
+			padding:3px;
+		}
+		
+		#Content form input.numeric {
+			width:20px;
+			background:#f0f0f0;
+			border:1px solid #aaa;
+			padding:3px;
+			color:#000;
+			margin-right:4px;
+		}
+		#Content form input.year {
+			width:35px;
+		}
+		#Content form p.Actions {
+			text-align:right;
+			padding:0 22px 15px 0;
+		}
+			#Content form p.Actions input {
+				padding:2px;
+			}
+
diff --git a/tutorial/css/layout.css b/tutorial/css/layout.css
new file mode 100644
index 0000000..dda0219
--- /dev/null
+++ b/tutorial/css/layout.css
@@ -0,0 +1,287 @@
+/* Global Resetting */
+html{	
+	width: 100%;
+	height: 100%;
+	background:url(../images/body_bg.gif) repeat;
+}
+body {
+	width: 100%;
+	height: 100%;
+	font-size: 62.5%;
+	/* reset font-sizes to 1em == 10px */
+}
+* {
+	font-size: 1em;
+	/* reset font-sizes to 1em == 10px */
+	padding: 0;
+	margin: 0;
+	font-family:Verdana,Helvetica,sans-serif;
+	list-style:none;
+}
+a img{
+	border:0;
+}
+.clear{
+	clear:both;
+}
+
+/* Layout CSS */
+#Main {
+	margin:20px auto;
+	width:900px;
+}
+#Header {
+	background:url(../images/blueback.gif) bottom left repeat-x;
+	border-left:1px solid #ccc;
+	border-right:1px solid #ccc;
+	clear:left;
+}
+	#Header h1 {
+		color:#fff;
+		font-size:1.5em;
+		line-height:4.5em;
+		padding-left:20px;
+	}
+		#Menu1 {
+			padding:10px 50px 0;
+		}
+			#Menu1 li {
+				float:left;
+				margin-left:2px;
+				background:url(../images/menu1_right.gif) no-repeat right top;
+			}
+				#Menu1 li.current,
+				#Menu1 li.section {
+					background:url(../images/menu1_right_on.gif) no-repeat right top;
+				}
+				#Menu1 li a {
+					display:block;
+					color:#fff;
+					font-weight:bold;
+					font-size:1.1em;
+					text-decoration:none;
+					padding:5px 15px;
+					background:url(../images/menu1_left.gif) no-repeat left top;
+				}
+					#Menu1 li a:hover {
+						color:#d2ebff;
+					}
+					#Menu1 li.current a,
+					#Menu1 li.section a {
+						background:url(../images/menu1_left_on.gif) no-repeat left top;
+						color:#d2ebff;
+					}
+
+#ContentContainer {
+	background:#f5f5f5 url(../images/ss_watermark.gif) bottom left no-repeat;
+	padding-top:20px;
+	padding-bottom:20px;
+	overflow: auto;
+}
+
+#Banner {
+	text-align: center;
+}
+
+#Menu2 {
+	margin-left: 20px;
+	width: 17em;
+	float:left;
+	background:#f0f0f0;
+	border:1px solid #ddd;
+	padding:10px 10px 10px 10px;
+}
+	#Menu2 li {
+		padding-left:15px;
+		background:url(../images/menu2_arrow.gif) no-repeat left center;
+	}
+	#Menu2 a {
+		color:#333;
+		font-weight:bold;
+		font-size:1.1em;
+		line-height:1.6em;
+		text-decoration:none;
+	}
+	#Menu2 a:hover {
+		text-decoration:underline;
+	}
+	#Menu2 li.current a,
+	#Menu2 li.section a {
+		color:#0083C8;
+	}
+
+#Content {
+	float: left;
+	margin: 0px 20px;
+	width:70%;
+}
+
+div.breadcrumbs {
+	margin-bottom:10px;
+	font-size:1em;
+	color:#666;
+}
+div.breadcrumbs a {
+	text-decoration:none;
+}
+
+#Footer {
+	background:#015581;
+	clear:both;
+	text-align:right;
+	padding-right:20px;
+	border:1px solid #ccc;
+	border-top:0;
+}
+	#Footer span {
+		color:#ccc;
+		font-size:1.1em;
+		line-height:2em;
+		font-weight:bold;
+		padding-left:20px;
+		background:url(../images/ss_logo.gif) no-repeat;
+	}
+	#Footer a {
+		color:#fff;
+	}
+		#Footer a:hover {
+			text-decoration:none;
+		}
+
+
+/* The rest of this file is for the second tutorial */
+#NewsList,
+#StaffList {
+	background:#f0f0f0;
+	border:1px dotted #ccc;
+	padding:10px;
+}
+
+#NewsList li,
+#StaffList li {
+	margin: 0;
+	list-style-type: none;
+}
+	#NewsList li.newsDateTitle span {
+		color:#666;
+		line-height:2em;
+	}
+	#NewsList li.newsDateTitle a {
+		font-size:1.3em;
+		font-weight:bold;
+		color:#0083C8;
+		text-decoration:none;
+		padding-left:20px;
+		background:url(../images/treeicons/news-file.gif) no-repeat left center;
+	}
+		#NewsList li.newsDateTitle a:hover {
+			border-bottom:1px dotted #0083C8;
+		}
+		
+	#NewsList li.newsSummary {
+		margin-bottom:20px;
+	}
+		#NewsList li.newsSummary span {
+			font-size:1.1em;
+			line-height:1.5em;
+			color:#333;
+		}
+		#NewsList li.newsSummary a.readMoreLink {
+			color:#0083C8;
+			text-decoration:none;
+		}
+			#NewsList li.newsSummary a.readMoreLink:hover {
+				border-bottom:1px dotted #0083C8;
+			}
+
+div.newsDetails {
+	margin-bottom:10px;
+}
+
+div.newsDetails p {
+	color:#666;
+	margin:0;
+	font-size:1em;
+}
+
+div.pageComments {
+	background:#f0f0f0;
+	border:1px dotted #ccc;
+	padding:10px;
+}
+
+#StaffList .staffname { 
+	clear: both;
+	padding-left: 60px;
+	height: 1.2em;
+}
+
+#StaffList .staffphoto {
+	float: left;
+	margin-left: 3px;
+	margin-top: -1.2em;
+}     
+#StaffList .staffphoto img {
+	border:1px solid #AAA;
+}
+
+#StaffList .staffdescription {
+	margin-left: 60px;
+	margin-bottom:30px;
+}
+
+#StaffPhoto {
+	float: left;
+	margin-right: 10px;
+}
+
+#StaffPhoto img {
+	border:1px solid #AAA;
+}
+
+#PageComments {
+	list-style:none;
+	background:#e9e9e9;
+	border:1px solid #ccc;
+	border-bottom:0;
+	padding:0;
+	margin:0;
+}
+	#PageComments li {
+		list-style:none;
+		padding:5px;
+		margin:0;
+		font-size:1em;
+		border-bottom:1px dotted #bbb;
+	}
+		#PageComments li p span {
+			font-style:italic;
+		}
+		#PageComments a.deletelink {
+			font-weight:bold;
+		}
+
+			
+#PageNumbers {
+	font-weight:bold;
+	color:#333;
+	font-size:1.1em;
+	text-align:center;
+	padding:5px;
+	border:1px solid #ddd;
+	background:#e9e9e9;
+}
+#PageNumbers * {
+	padding:0 5px;
+	line-height:1.5em;
+}
+#PageNumbers a {
+	color:#0083C8;
+	text-decoration:none;
+}
+	#PageNumbers a:hover {
+		text-decoration:underline;
+	}
+
+		
+
diff --git a/tutorial/css/typography.css b/tutorial/css/typography.css
new file mode 100644
index 0000000..21d401f
--- /dev/null
+++ b/tutorial/css/typography.css
@@ -0,0 +1,113 @@
+/**
+ * This typography file is included in the WYSIWYG editor
+ */
+.typography * {
+	font-family:Verdana,Arial,sans-serif;
+	font-size:1em;
+}
+.typography blockquote {
+	margin-left:20px;
+}
+.typography hr {
+	padding:5px;
+}
+.typography p,
+.typography ul li,
+.typography ol li,
+.typography a {
+	color:#333;
+	line-height:1.5em;
+	font-size:1.1em;
+}
+.typography p {
+	margin-bottom:20px;
+}
+
+
+/** CMS LIST STYLES **/
+.typography ul,
+.typography ol {
+	margin-left:10px;
+	margin-bottom:20px;
+}
+	.typography ul li,
+	.typography ol li {
+		margin:4px 10px;
+		line-height:1.4em;
+	}
+		.typography ul li {
+		 list-style-type:disc;
+		}
+		.typography ol li {
+			list-style-type:decimal;
+    }
+
+/* HEADER STYLES */
+
+.typography h1,
+.typography h2,
+.typography h3,
+.typography h4 {
+	margin-bottom:14px;
+	color:#0083C8;
+}
+.typography h1,
+.typography h4 {
+	font-weight:bold;
+}
+.typography h2,
+.typography h3 {
+	font-weight:normal;
+}
+	.typography h1 {
+		font-size:2.2em;
+	}
+	.typography h2 {
+		font-size:2.2em;
+	}
+	.typography h3 {
+		font-size:1.6em;
+	}
+	.typography h4 {
+		font-size:1.4em;
+	}
+
+/* LINK STYLES */
+.typography a {
+	color:#0083C8;
+  font-size:1em;
+  text-decoration:none;
+}
+	.typography a:hover {
+		text-decoration:underline;
+	}
+	
+	
+.typography table {
+	font-size:1.1em;
+}
+	.typography table tr td {
+		padding:3px 5px;
+	}
+
+	
+/* WYSIWYG EDITOR ALIGNMENT CLASSES */
+.typography .left {
+	text-align:left;
+}
+.typography .center {
+	text-align:center;
+}
+.typography .right {
+	text-align:right;
+}
+.typography img.right {
+	float:right;
+}
+.typography img.left {
+	float:left;
+}
+
+.typography p.MsoNormal, .typography p.MsoBodyText {
+	margin: 0;
+}
\ No newline at end of file
diff --git a/tutorial/images/blueback.gif b/tutorial/images/blueback.gif
new file mode 100644
index 0000000..edc39b2
Binary files /dev/null and b/tutorial/images/blueback.gif differ
diff --git a/tutorial/images/body_bg.gif b/tutorial/images/body_bg.gif
new file mode 100644
index 0000000..2f99a4c
Binary files /dev/null and b/tutorial/images/body_bg.gif differ
diff --git a/tutorial/images/menu1_left.gif b/tutorial/images/menu1_left.gif
new file mode 100644
index 0000000..514c7aa
Binary files /dev/null and b/tutorial/images/menu1_left.gif differ
diff --git a/tutorial/images/menu1_left_on.gif b/tutorial/images/menu1_left_on.gif
new file mode 100644
index 0000000..cf3a3c7
Binary files /dev/null and b/tutorial/images/menu1_left_on.gif differ
diff --git a/tutorial/images/menu1_right.gif b/tutorial/images/menu1_right.gif
new file mode 100644
index 0000000..124664f
Binary files /dev/null and b/tutorial/images/menu1_right.gif differ
diff --git a/tutorial/images/menu1_right_on.gif b/tutorial/images/menu1_right_on.gif
new file mode 100644
index 0000000..7048cac
Binary files /dev/null and b/tutorial/images/menu1_right_on.gif differ
diff --git a/tutorial/images/menu2_arrow.gif b/tutorial/images/menu2_arrow.gif
new file mode 100644
index 0000000..42c7222
Binary files /dev/null and b/tutorial/images/menu2_arrow.gif differ
diff --git a/tutorial/images/ss_logo.gif b/tutorial/images/ss_logo.gif
new file mode 100644
index 0000000..d2721ad
Binary files /dev/null and b/tutorial/images/ss_logo.gif differ
diff --git a/tutorial/images/ss_watermark.gif b/tutorial/images/ss_watermark.gif
new file mode 100644
index 0000000..793317f
Binary files /dev/null and b/tutorial/images/ss_watermark.gif differ
diff --git a/tutorial/images/treeicons/home-file.gif b/tutorial/images/treeicons/home-file.gif
new file mode 100644
index 0000000..a38837f
Binary files /dev/null and b/tutorial/images/treeicons/home-file.gif differ
diff --git a/tutorial/images/treeicons/news-file.gif b/tutorial/images/treeicons/news-file.gif
new file mode 100644
index 0000000..7c877f2
Binary files /dev/null and b/tutorial/images/treeicons/news-file.gif differ
diff --git a/tutorial/images/welcome.png b/tutorial/images/welcome.png
new file mode 100644
index 0000000..6cfe95f
Binary files /dev/null and b/tutorial/images/welcome.png differ
diff --git a/tutorial/templates/Page.ss b/tutorial/templates/Page.ss
new file mode 100644
index 0000000..0c8ffb2
--- /dev/null
+++ b/tutorial/templates/Page.ss
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
+	<head>
+		<% base_tag %>
+		<link rel="stylesheet" type="text/css" href="tutorial/css/layout.css" />
+		<link rel="stylesheet" type="text/css" href="tutorial/css/typography.css" />
+		<link rel="stylesheet" type="text/css" href="tutorial/css/form.css" />
+	</head>
+	<body>
+		<div id="Main">
+			<div id="Header">
+				<h1>&nbsp;</h1>
+			</div>
+			<div id="ContentContainer">
+				<div id="Content" class="typography">
+					$Content
+				</div>
+			</div>
+			<div id="Footer">
+				<span>Visit <a href="http://www.silverstripe.com" title="Visit www.silverstripe.com">www.silverstripe.com</a> to download the CMS</span>
+			</div>
+		</div>
+		$SilverStripeNavigator
+	</body>
+</html>