Commits

Steve Michelotti  committed c295d4e

incremental checkin

  • Participants
  • Parent commits 9415d3b

Comments (0)

Files changed (16)

File docs/KnockoutJS-Outline.docx

Binary file added.

File docs/KnockoutJS.pptx

Binary file added.

File docs/KnoutoutJS-Pluralsight-Outline.docx

Binary file added.
+# Shut down unneeded processes
+#PrepareDemoEnvironment
+
+# First clean the target directory
+#Get-ChildItem C:\development\demo\MVCScaffolding -recurse | Remove-Item -Recurse -Force
+
+# Copy Snippets
+$ScriptDir = Split-Path $MyInvocation.MyCommand.Path -Parent
+
+copy-item $ScriptDir\snippets\Knockout-HtmlSnippets -Destination "$env:userprofile\Documents\Visual Studio 2010\Code Snippets\Visual Web Developer\My HTML Snippets" -Recurse -Force
+copy-item $ScriptDir\snippets\Knockout-JSSnippets -Destination "$env:userprofile\Documents\Visual Studio 2010\Code Snippets\Visual Web Developer\My JScript Snippets" -Recurse -Force
+#copy-item $ScriptDir\snippets\knockout-Snippets -Destination "$env:userprofile\Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets" -Recurse -Force
+
+#copy-item $ScriptDir\src\Begin\TaskManager -Destination C:\development\demo\Knockout -Recurse -Force
+
+
+#Start-Process -FilePath C:\development\demo\MVCScaffolding\TaskManager\TaskManager.sln
+#Start-Process -FilePath $ScriptsDir\docs\MVCScaffolding.pptx

File snippets/Knockout-HtmlSnippets/ko1-tagsList.snippet

+<?xml version="1.0" encoding="utf-8"?>
+<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
+  <CodeSnippet Format="1.0.0">
+    <Header>
+      <SnippetTypes>
+        <SnippetType>Expansion</SnippetType>
+      </SnippetTypes>
+      <Title>ko1-tagsList</Title>
+      <Author>Steve Michelotti</Author>
+      <Description>
+      </Description>
+      <HelpUrl>
+      </HelpUrl>
+      <Shortcut>ko1tagsList</Shortcut>
+    </Header>
+    <Snippet>
+      <Code Language="html"><![CDATA[<div id="tagsList" class="box">
+    <div class="box-head">
+        <h2 class="left">Tags</h2>
+    </div>
+
+    <div class="box-content">
+        <input type="text" placeholder="Add New Tag" />
+        <button>+ Add</button>
+           
+        <ul>
+            <li class="tagItem">
+                <span></span>
+                <div>
+                    <a href="#" class="tag-edit">Edit</a>
+                    <a href="#" class="tag-delete">Delete</a>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
+
+$end$]]></Code>
+    </Snippet>
+  </CodeSnippet>
+</CodeSnippets>

File snippets/Knockout-HtmlSnippets/ko3-tagDialog.snippet

+<?xml version="1.0" encoding="utf-8"?>
+<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
+  <CodeSnippet Format="1.0.0">
+    <Header>
+      <SnippetTypes>
+        <SnippetType>Expansion</SnippetType>
+      </SnippetTypes>
+      <Title>ko3-tagDialog</Title>
+      <Author>Steve Michelotti</Author>
+      <Description>
+      </Description>
+      <HelpUrl>
+      </HelpUrl>
+      <Shortcut>ko3tagDialog</Shortcut>
+    </Header>
+    <Snippet>
+      <Code Language="html"><![CDATA[<div id="tagDialog">
+    Tag Name: <input type="text" data-bind="value: Name" />
+</div>]]></Code>
+    </Snippet>
+  </CodeSnippet>
+</CodeSnippets>

File snippets/Knockout-JSSnippets/ko2-indexjsinit.snippet

+<?xml version="1.0" encoding="utf-8"?>
+<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
+  <CodeSnippet Format="1.0.0">
+    <Header>
+      <SnippetTypes>
+        <SnippetType>Expansion</SnippetType>
+      </SnippetTypes>
+      <Title>ko2-indexjsinit</Title>
+      <Author>Steve Michelotti</Author>
+      <Description>
+      </Description>
+      <HelpUrl>
+      </HelpUrl>
+      <Shortcut>ko2indexjsinit</Shortcut>
+    </Header>
+    <Snippet>
+      <Code Language="jscript"><![CDATA[/// <reference path="knockout-1.3.0beta.debug.js" />
+/// <reference path="jquery-ui-1.8.16.js" />
+/// <reference path="jquery-1.6.4.js" />
+/// <reference path="ajax-util.js" />
+
+$$(function () {
+    var data = [
+        { Id: 1, Name: "Ball Handling" },
+        { Id: 2, Name: "Passing" },
+        { Id: 3, Name: "Shooting" },
+        { Id: 4, Name: "Rebounding" },
+        { Id: 5, Name: "Transition" },
+        { Id: 6, Name: "Defense" },
+        { Id: 7, Name: "Team Offense" },
+        { Id: 8, Name: "Team Defense" }
+    ];
+
+    $end$
+   
+});
+
+
+]]></Code>
+    </Snippet>
+  </CodeSnippet>
+</CodeSnippets>

File snippets/Knockout-JSSnippets/ko4-tagedit.snippet

+<?xml version="1.0" encoding="utf-8"?>
+<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
+  <CodeSnippet Format="1.0.0">
+    <Header>
+      <SnippetTypes>
+        <SnippetType>Expansion</SnippetType>
+      </SnippetTypes>
+      <Title>ko4-tagedit</Title>
+      <Author>Steve Michelotti</Author>
+      <Description>
+      </Description>
+      <HelpUrl>
+      </HelpUrl>
+      <Shortcut>ko4tagedit</Shortcut>
+    </Header>
+    <Snippet>
+      <Code Language="jscript"><![CDATA[$$(".tag-edit").live("click", function () {
+        $$("#tagDialog").dialog({
+            buttons: {
+                Save: function () { $$(this).dialog("close"); },
+                Cancel: function () { $$(this).dialog("close"); }
+            }
+        });
+    });]]></Code>
+    </Snippet>
+  </CodeSnippet>
+</CodeSnippets>

File snippets/Knockout-JSSnippets/ko5-tagItemData.snippet

+<?xml version="1.0" encoding="utf-8"?>
+<CodeSnippets xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
+  <CodeSnippet Format="1.0.0">
+    <Header>
+      <SnippetTypes>
+        <SnippetType>Expansion</SnippetType>
+      </SnippetTypes>
+      <Title>ko5-tagItemData</Title>
+      <Author>Steve Michelotti</Author>
+      <Description>
+      </Description>
+      <HelpUrl>
+      </HelpUrl>
+      <Shortcut>ko5tagItemData</Shortcut>
+    </Header>
+    <Snippet>
+      <Code Language="jscript"><![CDATA[var data = [
+        new tagItem("Ball Handling", 1),
+        new tagItem("Passing", 2),
+        new tagItem("Shooting", 3),
+        new tagItem("Rebounding", 4),
+        new tagItem("Transition", 5),
+        new tagItem("Defense", 6),
+        new tagItem("Team Offense", 7),
+        new tagItem("Team Defense", 8)
+    ];]]></Code>
+    </Snippet>
+  </CodeSnippet>
+</CodeSnippets>

File src/Working/BasketballPlaybook/BasketballPlaybook.suo

Binary file modified.

File src/Working/BasketballPlaybook/BasketballPlaybook/App_Data/BasketballPlaybook.Models.PlaybookDbContext.sdf

Binary file modified.

File src/Working/BasketballPlaybook/BasketballPlaybook/Content/Site.css

   color: #000;
   border-color: #857b42;
 }
-a img {
-  border: 0;
-}
 a {
   color: #ba4c32;
   text-decoration: underline;
   cursor: pointer;
 }
+a img {
+  border: 0;
+}
 a:hover {
   color: #8d341f;
   text-decoration: none;
   width: 988px;
   margin: 0 auto;
 }
-#header {
+header {
   height: 89px;
   background: url(images/header.gif);
   white-space: nowrap;
 }
-#header h1 {
+header h1 {
   float: left;
   display: inline;
   padding-top: 12px;
 }
+#container {
+  padding: 20px 0;
+}
 #top-navigation {
   float: right;
   white-space: nowrap;
 #top {
   height: 53px;
 }
-#navigation {
+nav {
   height: 36px;
 }
-#navigation ul {
+nav ul {
   list-style-type: none;
 }
-#navigation ul li {
+nav ul li {
   float: left;
   display: inline;
   margin-right: 2px;
 }
-#navigation ul li a, #navigation ul li a span {
+nav ul li a {
+  line-height: 36px;
+  color: #907525;
+  text-decoration: none;
   float: left;
   height: 36px;
   background: url(images/tab.gif) no-repeat 0 0;
   padding: 0 0 0 15px;
 }
-#navigation ul li a span {
+nav ul li a span {
+  float: left;
+  height: 36px;
+  background: url(images/tab.gif) no-repeat 0 0;
+  padding: 0 0 0 15px;
   background-position: right 0;
   padding: 0 15px 0 0;
 }
-#navigation ul li a {
-  line-height: 36px;
-  color: #907525;
-  text-decoration: none;
-}
-#navigation ul li a.active, #navigation ul li a:hover {
+nav ul li a.active, nav ul li a:hover {
   background-position: 0 bottom;
-}
-#navigation ul li a.active span, #navigation ul li a:hover span {
-  background-position: right bottom;
-}
-#navigation ul li a.active {
   font-size: 12px;
   font-weight: bold;
   color: #887e42;
 }
-#container {
-  padding: 20px 0;
+nav ul li a.active span, nav ul li a:hover span {
+  background-position: right bottom;
 }
 .small-nav {
   color: #978b48;
 .small-nav a {
   color: #6f6636;
 }
+#main {
+  width: 988px;
+  margin: 0 auto;
+}
 #content {
   float: left;
   width: 750px;
   padding-left: 4px;
 }
 .add-button, .add-button span {
-  /*float:left;*/
   height: 26px;
   background: url(images/add-button.gif) no-repeat 0 0;
   padding: 0 10px 10px 28px;
   background-color: #fff9e1;
 }
 .box-content ul li.activeDrill {
-  /*background-color: #f3c598; */
-
   background-color: #f3c598;
 }
 .box-content ul li div {

File src/Working/BasketballPlaybook/BasketballPlaybook/Content/Site.less

 * { padding:0; margin:0; outline:0; }
+
 body {
 	background:#f9ebae;
 	font-family: Verdana, sans-serif;
 	line-height:14px;
 	color:#5e5e5e;
 }
-input, textarea, select { font-family: Verdana, sans-serif; font-size:13px; }
+
+input, textarea, select { 
+	font-family: Verdana, sans-serif; 
+	font-size:13px; 
+}
+
 textarea { overflow:hidden; }
 
 .field { border:solid 1px #d3cfc7; background:#fff; padding:5px; }
 
 .checkbox { width:13px; height:13px; vertical-align:top; position:relative; top:2px; }
 
-.button { background:#eee url(images/button.gif) repeat-x 0 0; border:solid 1px #b1a874; color:#7f7f7f; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; }
-.button:hover { color:#333; border-color:#857b42; }
+.button { 
+	background:#eee url(images/button.gif) repeat-x 0 0; 
+	border:solid 1px #b1a874; 
+	color:#7f7f7f; 
+	font-size:11px; 
+	padding:2px 6px 2px 6px; 
+	cursor:pointer; 
+	line-height:14px !important; 
+
+	&:hover { 
+		color:#333; 
+		border-color:#857b42; 
+	}
+}
 
 
 .field:focus { color:#000; border-color:#857b42;}
 
-a img { border:0; }
+a { 
+	color:#ba4c32; 
+	text-decoration: underline; 
+	cursor:pointer;
+	
+	img { 
+		border:0; 
+	}
+	
+	&:hover { 
+		color:#8d341f; 
+		text-decoration: none;
+	} 
+}
 
-a { color:#ba4c32; text-decoration: underline; cursor:pointer; }
-a:hover { color:#8d341f; text-decoration: none;}
 
 .left, .alignleft { float:left; display:inline; }
 .right, .alignright { float:right; display:inline; }
 h3 { font-size:12px; line-height:14px; font-weight: normal; }
 h3 a{ text-decoration: none; }
 
+.shell { .shellWidth; }
 
+.shellWidth() { 
+	width:988px; 
+	margin:0 auto; 
+}
 
-.shell { width:988px; margin:0 auto; }
+header { 
+	height:89px; 
+	background:url(images/header.gif); 
+	white-space:nowrap; 
+	
 
-#header { height:89px; background:url(images/header.gif); white-space:nowrap; }
-#header h1{ float:left; display:inline; padding-top:12px; }
-#top-navigation { float:right; white-space:nowrap; color:#fff; padding-top:15px; }
-#top-navigation a{ color:#fff; }
-#top-navigation span{ color:#dca598; }
-#top { height:53px; }
-
-#navigation { height:36px;}
-#navigation ul{ list-style-type: none;}
-#navigation ul li{ float:left; display:inline; margin-right:2px;}
-#navigation ul li a,
-#navigation ul li a span { float:left; height:36px; background:url(images/tab.gif) no-repeat 0 0; padding:0 0 0 15px;}
-#navigation ul li a span { background-position:right 0; padding:0 15px 0 0;}
-#navigation ul li a { line-height:36px; color:#907525; text-decoration: none; }
-
-#navigation ul li a.active,
-#navigation ul li a:hover { background-position:0 bottom;}
-
-#navigation ul li a.active span,
-#navigation ul li a:hover span{ background-position:right bottom;}
-
-#navigation ul li a.active { font-size:12px; font-weight: bold; color:#887e42; }
-
+	h1 { 
+		float:left; 
+		display:inline; 
+		padding-top:12px; 
+	}
+}
 
 #container 
 { 
 	padding:20px 0;
+	
 }
 
-.small-nav { color:#978b48; padding-bottom:20px; }
-.small-nav a{ color:#6f6636; }
 
+#top-navigation { 
+	float:right; 
+	white-space:nowrap; 
+	color:#fff; 
+	padding-top:15px; 
 
-#main {}
+	a { 
+		color:#fff; 
+	}
+
+	span { 
+		color:#dca598; 
+	}
+}
+
+#top { height:53px; }
+
+.navItem() {
+	float:left; 
+	height:36px; 
+	background:url(images/tab.gif) no-repeat 0 0; 
+	padding:0 0 0 15px;
+}
+
+nav { 
+	height:36px;
+
+	ul { 
+		list-style-type: none;
+
+		li { 
+			float:left; 
+			display:inline; 
+			margin-right:2px;
+
+			a {
+				line-height:36px; 
+				color:#907525; 
+				text-decoration: none;
+				.navItem;
+				
+
+				span { 
+					.navItem;
+					background-position:right 0; 
+					padding:0 15px 0 0;
+				}
+
+				&.active, &:hover {
+					background-position:0 bottom;
+
+					font-size:12px; 
+					font-weight: bold; 
+					color:#887e42;
+
+					span {
+						background-position:right bottom;
+					}
+				}
+			}
+		}
+	}
+}
+
+
+.small-nav { 
+	color:#978b48; 
+	padding-bottom:20px; 
+
+	a { 
+		color:#6f6636; 
+	}
+}
+
+#main { .shellWidth; }
 #content { float:left; width:750px; }
 #sidebar { float:right; width:225px; }
 
 .select-all label{ text-decoration: underline; padding-left:4px; }
 
 .add-button,
-/*.add-button span { float:left; height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 0 0 28px; }*/
-.add-button span { /*float:left;*/ height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 10px 10px 28px; }
+.add-button span { height:26px; background:url(images/add-button.gif) no-repeat 0 0; padding:0 10px 10px 28px; }
 .add-button span { background-position:right 0; padding:0 10px 0 0; }
 .add-button { font-weight: bold; font-size:12px; color:#747474; text-decoration: none; line-height:26px; }
 .add-button:hover { color:#333;}
 	right: 0;
 	left: 0;
 	bottom: 0;
+
+	a { 
+		color:#fff; 
+	}
 }
 
-footer a
-{ 
-	color:#fff; 
-}
 
 
 .msg { position:relative; padding-right:35px; margin-bottom:10px; }
 .button { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}
 
 /***** Custom Styles *****/
-.box-content ul
-{
-    padding-left: 1px;
-    padding-top: 5px;
+.box-content {
+	ul {
+		padding-left: 1px;
+		padding-top: 5px;
+
+		li {
+			list-style-type: none;
+			padding: 4px;
+			cursor: pointer;
+
+			&:hover { 
+				background-color: #fff9e1; 
+			} 
+
+			&.activeDrill { 
+				background-color: #f3c598;
+			} 
+
+			div {
+                float: right;
+            }
+		}
+	}
 }
 
-    .box-content ul li
-    {
-        list-style-type: none;
-        padding: 4px;
-        cursor: pointer;
-    }
-
-        
-
-        .box-content ul li:hover 
-        { 
-            background-color: #fff9e1; 
-        } 
-        
-        .box-content ul li.activeDrill
-        { 
-            /*background-color: #f3c598; */
-            background-color: #f3c598;
-        } 
-        
-
-            .box-content ul li div
-            {
-                float: right;
-            }
-
-
 
 /*button { -moz-box-shadow: 0 0 2px #978f6c; -webkit-box-shadow: 0 0 2px #978f6c;}*/
-button { background:#eee url(images/button.gif) repeat-x 0 0; border:solid 1px #b1a874; color:#333; font-size:11px; padding:2px 6px 2px 6px; cursor:pointer; line-height:14px !important; }
-button:hover { color:#ba4c32; border-color:#857b42; }
-button:disabled { color: GrayText; }
+button { 
+	background:#eee url(images/button.gif) repeat-x 0 0; 
+	border:solid 1px #b1a874; 
+	color:#333; 
+	font-size:11px; 
+	padding:2px 6px 2px 6px; 
+	cursor:pointer; 
+	line-height:14px !important; 
+
+	&:hover { 
+		color:#ba4c32; 
+		border-color:#857b42; 
+	}
+
+	&:disabled { 
+		color: GrayText; 
+	}
+}
 
 #tagsList { float: left; width: 240px; }
 #drillsList { float: left; width: 300px; }
 .editor-label label{ display:block; font-weight: bold; font-size:13px; padding-bottom:4px; }
 .editor-field { padding-bottom: 10px; }
 
-.editor { padding-bottom: 10px; }
-    .editor label { display:block; font-weight: bold; font-size:13px; padding-bottom:4px; width: 90px; text-align:right; }
-
+.editor { 
+	padding-bottom: 10px; 
+	
+	label { 
+		display:block; 
+		font-weight: bold; 
+		font-size:13px; 
+		padding-bottom:4px; 
+		width: 90px; 
+		text-align:right; 
+	}
+}
+    
 
 .ico() { 
 	color:#6E6B65; 

File src/Working/BasketballPlaybook/BasketballPlaybook/Content/Site.min.css

 .button{background:#eee url(images/button.gif) repeat-x 0 0;border:solid 1px #b1a874;color:#7f7f7f;font-size:11px;padding:2px 6px 2px 6px;cursor:pointer;line-height:14px!important}
 .button:hover{color:#333;border-color:#857b42}
 .field:focus{color:#000;border-color:#857b42}
+a{color:#ba4c32;text-decoration:underline;cursor:pointer}
 a img{border:0}
-a{color:#ba4c32;text-decoration:underline;cursor:pointer}
 a:hover{color:#8d341f;text-decoration:none}
 .left,.alignleft{float:left;display:inline}
 .right,.alignright{float:right;display:inline}
 h3{font-size:12px;line-height:14px;font-weight:normal}
 h3 a{text-decoration:none}
 .shell{width:988px;margin:0 auto}
-#header{height:89px;background:url(images/header.gif);white-space:nowrap}
-#header h1{float:left;display:inline;padding-top:12px}
+header{height:89px;background:url(images/header.gif);white-space:nowrap}
+header h1{float:left;display:inline;padding-top:12px}
+#container{padding:20px 0}
 #top-navigation{float:right;white-space:nowrap;color:#fff;padding-top:15px}
 #top-navigation a{color:#fff}
 #top-navigation span{color:#dca598}
 #top{height:53px}
-#navigation{height:36px}
-#navigation ul{list-style-type:none}
-#navigation ul li{float:left;display:inline;margin-right:2px}
-#navigation ul li a,#navigation ul li a span{float:left;height:36px;background:url(images/tab.gif) no-repeat 0 0;padding:0 0 0 15px}
-#navigation ul li a span{background-position:right 0;padding:0 15px 0 0}
-#navigation ul li a{line-height:36px;color:#907525;text-decoration:none}
-#navigation ul li a.active,#navigation ul li a:hover{background-position:0 bottom}
-#navigation ul li a.active span,#navigation ul li a:hover span{background-position:right bottom}
-#navigation ul li a.active{font-size:12px;font-weight:bold;color:#887e42}
-#container{padding:20px 0}
+nav{height:36px}
+nav ul{list-style-type:none}
+nav ul li{float:left;display:inline;margin-right:2px}
+nav ul li a{line-height:36px;color:#907525;text-decoration:none;float:left;height:36px;background:url(images/tab.gif) no-repeat 0 0;padding:0 0 0 15px}
+nav ul li a span{float:left;height:36px;background:url(images/tab.gif) no-repeat 0 0;padding:0 0 0 15px;background-position:right 0;padding:0 15px 0 0}
+nav ul li a.active,nav ul li a:hover{background-position:0 bottom;font-size:12px;font-weight:bold;color:#887e42}
+nav ul li a.active span,nav ul li a:hover span{background-position:right bottom}
 .small-nav{color:#978b48;padding-bottom:20px}
 .small-nav a{color:#6f6636}
+#main{width:988px;margin:0 auto}
 #content{float:left;width:750px}
 #sidebar{float:right;width:225px}
 .table th{background:#fffdfa url(images/th.gif) repeat-x 0 0;color:#818181;text-align:left;padding:7px 10px;border-bottom:solid 1px #d2d1cb}

File src/Working/BasketballPlaybook/BasketballPlaybook/Views/Home/Index.cshtml

         <input id="newTag" type="text" placeholder="Add New Tag" data-bind="value: tagToAdd, valueUpdate: 'afterkeydown', executeOnEnter: addTag" />
         <button data-bind="click: addTag, enable: tagToAdd().length > 0">+ Add</button>
            
-        <ul>
-            <!-- ko foreach: tags -->
+        <ul data-bind="foreach: tags">
             <li class="tagItem" data-bind="click: $parent.selectTag">
                 <span data-bind="text: Name"></span>
                 <div>
                     <a href="#" class="tag-delete">Delete</a>
                 </div>
             </li>
-            <!-- /ko -->
         </ul>
     </div>
 </div>

File src/Working/BasketballPlaybook/BasketballPlaybook/Views/Shared/_Layout.cshtml

     </script>
 </head>
 <body>
-<!-- Header -->
-<div id="header">
-	<div class="shell">
-		<!-- Logo + Top Nav -->
-		<div id="top">
-			<h1><a href="#">Basketball Playbook</a></h1>
-			<div id="top-navigation">
-				Welcome <a href="#"><strong>Administrator</strong></a>
-				<span>|</span>
-				<a href="#">Log out</a>
-			</div>
-		</div>
-		<!-- End Logo + Top Nav -->
+    <header>
+        <div class="shell">
+		    <div id="top">
+			    <h1><a href="#">Basketball Playbook</a></h1>
+			    <div id="top-navigation">
+				    Welcome <a href="#"><strong>Administrator</strong></a>
+				    <span>|</span>
+				    <a href="#">Log out</a>
+			    </div>
+		    </div>
 		
-		<!-- Main Nav -->
-		<div id="navigation">
-			<ul>
-			    <li><a href="#" class="active"><span>Drills</span></a></li>
-			    <li><a href="#"><span>Practices</span></a></li>
-			</ul>
-		</div>
-		<!-- End Main Nav -->
-	</div>
-</div>
-<!-- End Header -->
+            <nav>
+			    <ul>
+			        <li><a href="#" class="active"><span>Drills</span></a></li>
+			        <li><a href="#"><span>Practices</span></a></li>
+			    </ul>
+            </nav>
+	    </div>
+    </header>
 
-<!-- Container -->
-<div id="container">
-	<div class="shell">
-		<!-- Main -->
+    <div id="container">
 		<div id="main">
             @RenderBody()
 		</div>
-		<!-- Main -->
-	</div>
-</div>
-<!-- End Container -->
+    </div>
 
-<!-- Footer -->
-@*<div id="footer">*@
-<footer>
-	<div class="shell">
-		<span class="right">
-			Design by <a href="http://chocotemplates.com" target="_blank" title="The Sweetest CSS Templates WorldWide">Chocotemplates.com</a>
-		</span>
-	</div>
-</footer>
-<!-- End Footer -->
-	
+    <footer>
+	    <div class="shell">
+		    <span class="right">
+			    Design by <a href="http://chocotemplates.com" target="_blank" title="The Sweetest CSS Templates WorldWide">Chocotemplates.com</a>
+		    </span>
+	    </div>
+    </footer>	
 </body>
 </html>