diff --git a/css/form.css b/css/form.css
index 660f309..26faaef 100644
--- a/css/form.css
+++ b/css/form.css
@@ -1,7 +1,7 @@
 /** ----------------------------------------------------------
  *
  * This stylesheet includes both generic form styles and 
- *    additional form styles for the User Defined Form Module. 
+ *    additional form styles for the User Defined Form Module.
  *
  ** ------------------------------------------------------- */
 
@@ -44,7 +44,7 @@ form select {
     background-color: #fff;
     border: 1px solid #dad9d9;
 }
-    .ie7 form select { width: 400px; }
+    .ie7 form select { width: 400px; } /* fix for ie7's rendering of max-width property on select input */
 
 form input.text:focus,
 form textarea:focus,
@@ -57,7 +57,7 @@ form input[disabled], form textarea[disabled] {
     border: 1px solid #dad9d9;
 }
 textarea {
-    resize: vertical;
+    resize: vertical; /* forces text area to be resized vertically only */
 }
 
 
@@ -194,7 +194,7 @@ form .date .middleColumn input {
     font-size: 13px;                            /* reset to default */
     color: #333;                                /* reset to default */
 }
-form .requiredField label.left:after {
+form .requiredField label.left:after { /* pseudo element adds an asterisk to a required fields label */
     color: #B94A48;
     content: "*";
     font-size: 14px;
@@ -212,7 +212,7 @@ form .optionset ul {
         margin-bottom: 5px;
         list-style-type:none;
     }
-    form div.checkbox:after { 
+    form div.checkbox:after { /* clearfix */
         content: ".";
         display: block;
         height: 0;
diff --git a/css/layout.css b/css/layout.css
index 203e60c..a64e7a8 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1,11 +1,33 @@
 /** ----------------------------------------------------------
  *
- * Contains the main layout of the page and the individual styles. 
+ * Contains the main layout of the page and the individual styles.
  * Acts as the main stylesheet for theme.
  *
- * 		Include your notes or table of contents below....
+ *		Include your notes or table of contents below....
  *		Include color hex's or values of your grid
  *
+ *		1. MAIN LAYOUT
+ *		2. HEADER
+ *			- Brand
+ *			- Search Form
+ *		3. Navigation
+ *			- Primary Navigation
+ *			- tablet Navigation
+ *			- Secondary Navigation
+ *			- Secondary Nav 2-5 Levels deep
+ *		4. Mixed
+ *		5. Footer
+ *		6. Page Specific Layout
+ *			- Homepage
+ *			- Search Results
+ *		7. Device and Responsive Layout
+ *			- Breakpoint 960px
+ *			- Breakpoint 640px
+ *				- Search Form
+ *				- Main Content
+ *		8. Print Styles
+ *			- Simple Theme custom print styles
+ *
  * @author Your Name <email@silverstripe.com>
  * ------------------------------------------------------- */
 
@@ -13,12 +35,12 @@
 body {
     margin: 0;
     background: #ededed;
-    min-width: 240px;
-    -webkit-text-size-adjust: none;
+    min-width: 240px; 
+    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
 }
 	.ie7 body,
 	.ie8 body {
-	    min-width: 860px
+	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
 	}
 	.main {
 	    background: #fff;
@@ -31,17 +53,17 @@ body {
 	    padding: 0 30px;
 	}
 	.ie6 .inner {
-	    width: 960px
+	    width: 960px;
 	}
-	.content-container {
+	.content-container { /* widths are set as percentages due to responsive nature of the site */
 	    float: right;
-	    width: 73%;
+	    width: 73%; /* sets width of content-container when there is a sidebar */
 	}
 	.no-sidebar .content-container {
 	    float: left;
-	    width:100%;
+	    width:100%; /* makes content container full width when there is no sidebar */
 	}
-	aside {
+	aside { /* this is the sidebar element */
 	    float: left;
 	    width: 23%;
 	    margin-top: 12px;
@@ -53,7 +75,7 @@ body {
 
 /* HEADER */
 .header {
-    background: #161616
+    background: #161616;
 }
 	.header .inner {
 	    padding-top: 45px;
@@ -74,7 +96,7 @@ body {
 		    font-family: "HelveticaNeueLTPro-Bd", "Helvetica Neue LT Pro Bold", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue LT Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
 		    color: #fff;
 		    font-weight: 600;
-		    font-stretch: normal;
+		    font-stretch: normal; /* default value. No font stretching */
 		    line-height: 1em;
 		}
 		.brand p {
@@ -83,6 +105,7 @@ body {
 		}
 
 	/* Search form */
+
 	.search-bar {
 	    position: absolute;
 	    right: 28px;
@@ -94,19 +117,20 @@ body {
 		}
 		.search-bar form input.text {
 		    width: 155px;
-		    padding: 5px 34px 5px 10px;
+		    padding: 5px 34px 5px 15px;
 		    color: #888;
 		    margin: 0;
 		    border: none;
+		    -moz-border-radius: 14px;
 		    border-radius: 14px;
 		    background: #fff;
 		}
 
-		.search-bar form input.action {
+		.search-bar form input.action { /* positions the search button icon over the top of the search input */
 		    font-size: 14px;
 		    position: absolute;
-		    right: 0;
-		    top: -1px;
+		    right: 5px;
+		    top: 0;
 		    cursor: pointer;
 		    border: none;
 		    padding: 5px;
@@ -118,14 +142,14 @@ body {
 		}
 		.search-bar form input.active,
 		.search-bar form input.action:hover {
-		    color: #000
+		    color: #000;
 		}
 		.search-bar form input:focus,
 		.header textarea:focus {
-		    outline: none
+		    outline: none; /* removes default browser outlining on focus */
 		}
 		.search-dropdown-icon {
-		    display: none
+		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
 		}
 
 
@@ -133,15 +157,18 @@ body {
 /* NAVIGATION */
 
 	/* Primary navigation */
+
 	.header .primary ul {
-	    /*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
+		position:absolute;
+		bottom:0;
+		right:17px; /* positions the main navigation */
 	}
 	.header .primary li {
 	    float: left;
 	    padding-bottom: 14px;
 	    margin: 0 5px;
 	    position: relative;
-	    white-space: nowrap;
+	    white-space: nowrap; /* forces text to never wrap onto a second line */
 	}
 	.header .primary li a {
 	    color: #888;
@@ -152,20 +179,20 @@ body {
 	    display: block;
 	}
 	.header .primary li a:hover {
-	    color: #fff
+	    color: #fff;
 	}
 	.header .primary li.section a,
 	.header .primary li.current a {
-	    color: #fff
+	    color: #fff;
 	}
 	.header .primary li.section:after,
 	.header .primary li.current:after {
-	    content: '}';
+	    content: '}'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */
 	    display: block;
 	    position: absolute;
 	    left: 50%;
 	    margin-left: -7px;
-	    bottom: -6px;
+	    bottom: -7px;
 	    font-family: 'WebSymbolsRegular';
 	    font-size: 30px;
 	    color: #fff;
@@ -173,13 +200,13 @@ body {
 	    line-height: 20px;
 	}
 
-
+	/* Tablet Navigation */
 	/* When navigation and logo overlap tablet-nav is initialized */
 	.tablet-nav .brand p {
-	    margin-bottom: 0
+	    margin-bottom: 0;
 	}
 	.tablet-nav .header .inner {
-	    padding-top: 20px
+	    padding-top: 20px;
 	}
 	.tablet-nav .header .primary ul {
 	    float: left;
@@ -187,12 +214,12 @@ body {
 	    position: relative;
 	    margin: 20px 0 0 -13px;
 	    white-space: nowrap;
-	    right: auto;
+	    right: auto; /* resets the right property value that is set for the desktop site */
 	}
 		.tablet-nav .header .primary ul li {
 		    white-space: nowrap;
 		}
-			.tablet-nav .header .primary ul li a {
+			.tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */
 			    -moz-transition: none;
 			    -webkit-transition: none;
 			    transition: none;
@@ -211,7 +238,7 @@ body {
 	    font-weight: normal;
 	}
 	.main .secondary {
-	    border-bottom: 1px solid #e5e5e5
+	    border-bottom: 1px solid #e5e5e5;
 	}
 		.main .secondary ul {
 		    padding: 0;
@@ -223,7 +250,7 @@ body {
 		    list-style-type: none;
 		    margin-bottom: 0;
 		}
-			.main .secondary li .arrow {
+			.main .secondary li .arrow { 
 			    color: #b80000;
 			    padding-right: 5px;
 			    display: block;
@@ -232,14 +259,14 @@ body {
 			    position: absolute;
 			    left: 2px;
 			    top: 7px;
-			    -moz-transition: 0.2s;
+			    -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */
 			    -webkit-transition: 0.2s;
 			    transition: 0.2s;
 			}
 		.main .secondary li a:hover .arrow {
-		    left: 6px
+		    left: 6px; /* this sets the final position for the arrow transition */
 		}
-		.main .secondary li a {
+		.main .secondary li a { /* side nav link styling */
 		    padding: 10px 0;
 		    display: block;
 		    text-transform: uppercase;
@@ -259,28 +286,28 @@ body {
 		}
 		.main .secondary li.section,
 		.main .secondary li.current {
-		    background-color: #f1f1f1
+		    background-color: #f1f1f1;
 		}
 			.main .secondary li.section a,
 			.main .secondary li.current a {
-			    color: #000
+			    color: #000;
 			}
 		.main .secondary h3 {
 			color: #aaa;
 		}
 
 		/* Secondary navigation 2-5 levels deep */
-		.main .secondary ul ul {					
+		.main .secondary ul ul {
 			display: none;
 		}
 		.secondary ul li.current ul,
-		.secondary ul li.section ul {				/* Only show child pages from selected parent */
+		.secondary ul li.section ul { /* Only show child pages from selected parent */
 			display: block;
 		}
-		.secondary li.current ul ul {				
+		.secondary li.current ul ul {
 			display: none;
 		}
-		.main .secondary ul ul li a { padding-left: 10px; }	/* Indent all sidebar navigation levels*/
+		.main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/
 			.main .secondary ul ul li a .arrow { left: 12px; }
 			.main .secondary ul ul li a:hover .arrow { left: 16px; }
 
@@ -311,7 +338,7 @@ header:after,
 #Root:after,
 .search-bar:after,
 header .inner:after,
-footer:after {
+footer:after { /* clearfix */
     height: 0;
     content: ".";
     display: block;
@@ -320,7 +347,7 @@ footer:after {
 }
 .search-bar form input.action,
 .header .primary li a,
-.footer a {
+.footer a { /* adds color transition when links/inputs on hover */
     -moz-transition: color 0.2s;
     -webkit-transition: color 0.2s;
     transition: color 0.2s;
@@ -333,58 +360,6 @@ body h1 span.amp {
 }
 
 
-/* PAGE SPECIFIC LAYOUT */
-	/* Homepage */
-
-	/* Search Results */	
-	.typography .searchResults h1 {
-		margin-bottom: 0;
-		padding-bottom: 0;
-		border-bottom: none;
-	}								/* TODO: Test search results styles */
-	.searchResults p.searchQuery {
-	    margin-bottom: 10px;
-	    font-size: 15px;
-	    font-weight: bold;
-	}
-	.searchResults ul#SearchResults {
-	    padding: 0;
-	    margin-left: 0;
-	    border-bottom: 1px solid #e5e5e5;
-	}
-		.searchResults ul#SearchResults li {
-		    border-top: 1px solid #e5e5e5;
-		    padding: 20px 0;
-		    list-style-type: none;
-		}
-		.searchResults ul#SearchResults p {
-		    margin-bottom: 10px
-		}
-		.searchResults #PageNumbers {
-		    border-top: 1px solid #e5e5e5;
-		    padding-top: 20px;
-		}
-		.searchResults #PageNumbers a {
-		    padding: 0 5px
-		}
-		.searchResults #PageNumbers .pagination {
-		    float: left
-		}
-		.searchResults #PageNumbers p {
-		    float: right
-		}
-		.searchResults #PageNumbers .next,
-		.searchResults #PageNumbers .prev {
-		    font-size: 14px
-		}
-		.searchResults #PageNumbers .next {
-		    margin-left: 15px
-		}
-		.searchResults #PageNumbers .prev {
-		    margin-right: 15px
-		}
-
-
 /* FOOTER */
 .footer {
     color: #999;
@@ -397,7 +372,7 @@ body h1 span.amp {
 	    color: #999;
 	}
 	.footer a:hover {
-	    color: #B90000
+	    color: #B90000;
 	}
 	.footer .left {
 	    float: left;
@@ -421,21 +396,21 @@ body h1 span.amp {
 	    padding: 0;
 	}
 		.footer .primary li {
-		    display: inline
+		    display: inline;
 		}
 	.ie6 .footer .primary li,
-	.ie7 .footer .primary li {
+	.ie7 .footer .primary li { /* this is a bugfix for ie6/7 */
 	    display: inline;
 	    zoom: 1;
 	    margin-right: 10px;
 	}
-	.footer .primary li:after {
+	.footer .primary li:after { /* adds '/' to separate the footer navigation items */
 	    padding: 0 3px 0 5px;
 	    content: '/';
 	    color: #999;
 	}
 	.footer .primary li:last-child:after {
-	    content: ''
+	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
 	}
 	.footer .arrow {
 	    padding: 0 8px 0 5px;
@@ -443,93 +418,158 @@ body h1 span.amp {
 	    font-size: 13px;
 	}
 	.footer .primary .nav-open-button {
-	    display: none;
-	}
-	.footer .primary ul#nav .menu-bubble-arrow {
-	    display: none;
+	    display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */
 	}
 
+/* PAGE SPECIFIC LAYOUT */
 
+	/* Homepage */
+		/* currently no Hompage specific styles - feel free to add your own */
+
+	/* Search Results */
+	.typography .searchResults h1 {
+		margin-bottom: 0;
+		padding-bottom: 0;
+		border-bottom: none;
+	}
+	.searchResults p.searchQuery {
+	    margin-bottom: 10px;
+	    font-size: 15px;
+	    font-weight: bold;
+	}
+	.searchResults ul#SearchResults {
+	    padding: 0;
+	    border-bottom: 1px solid #e5e5e5;
+	    margin:0;
+	}
+		.searchResults ul#SearchResults li {
+		    border-top: 1px solid #e5e5e5;
+		    padding: 20px 0;
+		    list-style-type: none;
+		}
+		.searchResults ul#SearchResults p {
+		    margin-bottom: 10px;
+		}
+		.searchResults #PageNumbers a {
+		    padding: 0 5px;
+		}
+		.searchResults #PageNumbers .pagination {
+		   	border-bottom: 1px solid #e5e5e5;
+		    padding: 20px 0;
+		    display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */
+		    width:100%;
+		}
+		.searchResults #PageNumbers .pagination span{
+			display:table-cell; /* each element in the pagination div displays as a table cell */
+		}
+		.searchResults #PageNumbers p {
+		    text-align: center;
+		    padding:20px 0;
+		}
+		.searchResults #PageNumbers .next,
+		.searchResults #PageNumbers .prev {
+		    font-size: 14px;
+		    padding: 0 20px;
+		    display:table-cell; /* each element in the pagination div displays as a table cell */
+		    vertical-align: middle;
+		    border-bottom:0 !important;
+		}
+		.searchResults #PageNumbers .next {
+		    margin-left: 15px;
+		}
+		.searchResults #PageNumbers .prev {
+		    margin-right: 15px;
+		}
 
 /* DEVICE & RESPONSIVE LAYOUT */
 .header .nav-open-button {
-    display: none
+    display: none; /* removes the nav toggle button for desktop site */
 }
 #media-query-trigger {
+    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) 
+    instead to trigger the hiding/showing of nav and search in mobile mode */
     display: none;
     visibility: hidden;
 }
 
-@media only screen and (max-width: 960px) { 
+/* BREAKPOINT 960px */
+
+@media only screen and (max-width: 960px) {
 	.content img {
 	    max-width: 97%;
 	    height: auto;
 	}
 	.header .primary ul {
 	    margin-left: -12px;
-	    -webkit-padding-start: 0px;
+	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
 	}
 }
 
+/* BREAKPOINT 640px */
+
 /* when changing the breakpoint below, change it ito the same value in the script.js file as well */
 @media only screen and (max-width: 640px) { 
 	body {
-	    max-width: 640px
+	    max-width: 640px;
 	}
 	#media-query-trigger {
-	    visibility: visible
+	    visibility: visible;
 	}
-	.brand {
+
+	/* Navigation*/
+
+	.tablet-nav .header .brand {
 	    float: none;
 	    display: inline-block;
 	    margin-left: 22px;
 	    margin-bottom: 22px;
 	}
 		.brand h1 {
-		    font-size: 40px
+		    font-size: 40px;
 		}
 		.brand h1 {
-		    padding-right: 80px
+		    padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */
 		}
-	.header {
-	    padding: 0px
+	.tablet-nav .header {
+	    padding: 0px;
 	}
-		.header .inner {
+		.tablet-nav .header .inner {
 		    padding: 20px 0 0 0;
 		    min-height: 0;
 		}
-		.header .primary .nav-open-button {
+		.tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */
 		    z-index: 100;
 		    width: 20px;
 		    height: 20px;
 		    position: absolute;
 		    right: 20px;
-		    top: 32px;
+		    top: 35px;
 		    display: block;
 		    cursor: pointer;
 		    font-family: 'WebSymbolsRegular';
 		    font-size: 20px;
 		    color: #ededed;
 		}
-		.header .primary ul {
+		.tablet-nav .header .primary ul {
 		    z-index: 10;
 		    position: relative;
-		    display: none;
+		    display: none; /* initially hiding the navigation */
 		    float: left;
-		    margin: 0 !important;
+		    margin: 0;
 		    padding: 0;
 		    white-space: normal;
 		    width: 100%;
 		}
-			.header .primary ul li {
+			.tablet-nav .header .primary ul li {
 			    width: 100%;
-			    margin: 0 !important;
-			    float: none;
+			    margin: 0;
+			    padding: 0;
+			    float: none; /* displays list items vertically */
 			    background: none;
 			    position: relative;
 			    text-shadow: 0 1px #fff;
 			}
-			.header .primary ul li:after {
+			.tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */
 			    content: '\003e';
 			    display: block;
 			    position: absolute;
@@ -542,39 +582,42 @@ body h1 span.amp {
 			    vertical-align: middle;
 			    line-height: 38px;
 			}
-			.header .primary ul li a,
-			.header .primary ul li.current a,
-			.header .primary ul li.section a {
+			.tablet-nav .header .primary ul li a,
+			.tablet-nav .header .primary ul li.current a,
+			.tablet-nav .header .primary ul li.section a { /* styling the  top level nav links */
 			    padding: 10px 0 10px 22px;
 			    font-weight: bold;
 			    border-bottom: 1px solid #bbb;
 			    color: #434343;
-			    border-radius: 0 !important;
-			    background: #e7e7e7 !important;
+			    background: #e7e7e7;
 			}
-			.header .primary ul li a:hover {
-			    color: inherit
+			.tablet-nav .header .primary ul li.current a,
+			.tablet-nav .header .primary ul li.section a {
+				background: #CCCCCC; /* makes background on current top level page slightly darker */
 			}
-			.header .primary li.section:after,
-			.header .primary li.current:after {
-			    display: none;
+			.tablet-nav .header .primary ul li a:hover {
+			    color: inherit;
 			}
-			.tablet-nav .header nav.primary ul li {
+			.tablet-nav .header .primary li.section:after,
+			.tablet-nav .header .primary li.current:after {
+			    display: none; /* hides the link arrow on current top level page */
+			}
+			.tablet-nav .tablet-nav .header nav.primary ul li {
 				padding: 0;
 			}
 
 	/* Search Form */
-	.search-bar {
+	.search-bar { /* adds new styling to mobile search bar */
 	    width: 100%;
 	    position: relative;
 	    top: 0;
 	    right: 0;
-	    display: none;
+	    display: none; /* hides searchbar initially */
 	    padding: 20px 0;
-	    margin: 80px 0 0;
+	    margin: 0;
 	    background-color: #E7E7E7;
 	}
-	.search-dropdown-icon {
+	.search-dropdown-icon { /* styling for search toggle button */
 	    display: block;
 	    cursor: pointer;
 	    width: 20px;
@@ -599,11 +642,12 @@ body h1 span.amp {
 		    position: relative;
 		}
 	.search-bar div.field {
-	    margin-bottom: 0
+	    margin-bottom: 0;
 	}
 	.search-bar form input.text {
-	    width: 93%;
-	    padding: 8px 7% 8px 0;
+	    width: 89%; /* makes search input full width - allowing for space either side */
+	    max-width: 89%;
+	    padding: 8px 10% 8px 1%;
 	    text-indent: 15px;
 	    position: relative;
 	    display: block;
@@ -612,24 +656,26 @@ body h1 span.amp {
 	    border: 1px solid #e5e5e5;
 	    background: #fff;
 	    font-size: 17px;
+	    -moz-border-radius: 20px; /* increase border radius due to increased padding */
+		border-radius: 20px;
 	}
 	.search-bar form input.action {
-	    right: 24px;
+	    right: 5%;
 	    top: 2px;
 	    font-size: 18px;
 	}
 
 	/* Main Content */
 	.main {
-	    padding: 20px 0 45px;
+	    padding: 20px 0 45px; /* decrease padding so that more content can fit on screen */
 	}
 	.content-container,
 	aside {
-	    width: 100%
+	    width: 100%; /* sidenav is now shown above the page content */
 	}
-		.typography h1 {
+		.typography h1 { /* decrease size of page heading due to smaller screen */
 		    font-size: 30px;
-			 line-height:35px;
+			line-height:35px;
 		    margin-bottom: 15px;
 		    padding-bottom: 10px;
 		}
@@ -642,14 +688,14 @@ body h1 span.amp {
 	    line-height: 27px;
 	}
 	.main .inner {
-	    padding: 0 22px
+	    padding: 0 22px;
 	}
 	/* Secondry Nav */
 	.secondary li a {
-	    line-height: 24px
+	    line-height: 24px;
 	}
 	.secondary li .arrow {
-	    line-height: 26px
+	    line-height: 26px;
 	}
 	/* Footer */
 	.footer .right {
@@ -658,8 +704,10 @@ body h1 span.amp {
 	}
 }
 
+/* Print Styles */
+
 /* Based on HTML5 boilerplate print styles */
-@media print { 
+@media print {
 	* {
 	    background: transparent !important;
 	    color: black !important;
diff --git a/css/reset.css b/css/reset.css
index 0da5f8f..5863523 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -1,6 +1,11 @@
 /* This reset is loosely derived from HTML5 boilerplate 
 for more information visit http://html5boilerplate.com/ */
 
+/* Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.
+Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
+From the consistent base that you’ve set up via your reset, you can then go on to re-style your document,
+safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you! */
+
 html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
diff --git a/css/typography.css b/css/typography.css
index 89efed9..307c611 100644
--- a/css/typography.css
+++ b/css/typography.css
@@ -16,6 +16,9 @@
 
 /* TEMPLATE CUSTOM FONTS */
   /* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */
+
+  /* add your own custom fonts here */
+
   @font-face {
       font-family: 'CamboRegular';
       src: url('../webfonts/Cambo-Regular-webfont.eot');
@@ -33,15 +36,17 @@
 
 
 /* BASE TYPOGRPHY */
+
+/* These are the default styles for the Simple theme */
 body {
-    font-size: 13px;
-    line-height: 20px;
+    font-size: 13px; /* This overrides the browsers default font size */
+    line-height: 20px; /* If you change the font-size make sure you change the line-height value as well - the usual ratio is around 1.5 (font-size x 1.5 = line-height) */
     margin-bottom: 20px;
     color: #333333;
     font-family: Arial, Helvetica, sans-serif;
 }
-  body a { text-decoration: none; }
-  body a:link { -webkit-tap-highlight-color: #b80000 }
+  body a { text-decoration: none; } /* this removes the underline from all links */
+  body a:link { -webkit-tap-highlight-color: #b80000 } /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */
 
 
 /* HEADERS */
@@ -51,14 +56,15 @@ body {
 .typography h4,
 .typography h5,
 .typography h6 {
-    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
+    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif; /* This references one of the custom @font-face fonts - the other fonts that are referenced are fallbacks for browsers that don't support @fontface */
     font-weight: normal;
     margin-bottom: 10px;
     color: #444;
 }
-.typography h1 { font-size: 36px; 
-  line-height: 45px; 
-  margin: 0 0 25px 0; 
+.typography h1 {
+  font-size: 36px;
+  line-height: 45px;
+  margin: 0 0 25px 0;
   border-bottom: 1px solid #e5e5e5;
   padding-bottom: 5px;
 }
@@ -78,17 +84,13 @@ body {
       margin-bottom: 20px;
   }
 .typography em { font-style: italic; }
-::-moz-selection {
-    background: #b80000;
-    color: #fff;
-    text-shadow: none;
-}
-::selection {
-    background: #b80000;
-    color: #fff;
-    text-shadow: none;
-}
 
+::selection,
+::-moz-selection { /* Applies style to highlighted portion of a page */
+    background: #b80000;
+    color: #fff;
+    text-shadow: none;
+}
 
 /* LINKS */
 .typography a, 
@@ -108,16 +110,16 @@ body {
 .typography ul, 
 .typography ol,
 .typography dl { margin: 0 0 20px 25px; }
-.typography ul li { list-style-type: disc; }
+.typography ul li { list-style-type: disc; } /* adds disc style bullet to the list */
   .typography li { margin-bottom: 5px; }
 
 
 /* TABLE STYLES
 -------------------------------------------- */
 .typography table {
-    border-collapse: collapse;
+    border-collapse: collapse; /* borders are collapsed into a single border when possible */
     border: 1px solid #d4d4d4;
-    border-spacing: 0;
+    border-spacing: 0; /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */
     margin: 0 0 10px;
     text-align: left;
 }
@@ -157,7 +159,7 @@ body {
 -------------------------------------------- */
 .typography img {
     border: 5px solid #d7d7d7;
-    height: auto;
+    height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
     background: transparent url(../images/ajax-loader.gif) no-repeat center center;
 }
 .typography img.left {
@@ -188,7 +190,7 @@ body {
 .typography .captionImage img { margin: 0; }
   .typography .captionImage.left {
     float: left;
-    margin: 5px 30px 20px 0px;      
+    margin: 5px 30px 20px 0px;
   }
   .typography .captionImage.right{
     float: right;
diff --git a/templates/Includes/SidebarMenu.ss b/templates/Includes/SidebarMenu.ss
index 1a981e5..fb346e4 100644
--- a/templates/Includes/SidebarMenu.ss
+++ b/templates/Includes/SidebarMenu.ss
@@ -1,18 +1,20 @@
 <%--Include SidebarMenu recursively --%>
-<% if $Children %>
-	<% loop $Children %>
-		<li class="$LinkingMode">
-			<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
-				<span class="arrow">&rarr;</span>
-				<span class="text">$MenuTitle.XML</span>
-			</a>
+<% if LinkOrSection = section %>
+	<% if $Children %>
+		<% loop $Children %>
+			<li class="$LinkingMode">
+				<a href="$Link" class="$LinkingMode" title="Go to the $Title.XML page">
+					<span class="arrow">&rarr;</span>
+					<span class="text">$MenuTitle.XML</span>
+				</a>
 
-			<% if $Children %>
-				<ul>
-					<% include SidebarMenu %>
-				</ul>
-			<% end_if %>
+				<% if $Children %>
+					<ul>
+						<% include SidebarMenu %>
+					</ul>
+				<% end_if %>
 
-		</li>
-	<% end_loop %>
+			</li>
+		<% end_loop %>
+	<% end_if %>
 <% end_if %>