Merge 3.2 into master

DEP Remove branch alias

.editorconfig

@@ -0,0 +1,17 @@
+# For more information about the properties used in this file,
+# please see the EditorConfig documentation:
+# http://editorconfig.org
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{*.yml,package.json}]
+indent_size = 2
+
+# The indent size used in the package.json file cannot be changed:
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516

.gitignore

@@ -1,2 +1,3 @@
 webfonts/.DS_Store
-images/.DS_Store
+images/.DS_Store
+css/.DS_Store

README.md

@@ -1,6 +1,6 @@
 # Using the Simple theme
 
- * Copy the theme into the `themes/` directory of your SilverStripe project.  If you've named it correctly, there should be a directory called `themes/simple/templates`.
+ * Copy the theme into the `themes/` directory of your Silverstripe project.  If you've named it correctly, there should be a directory called `themes/simple/templates`.
  
  * Add the following to your `mysite/_config.php` file.  Remove any existing `SSViewer::set_theme` lines.
 

code-of-conduct.md

@@ -0,0 +1 @@
+When having discussions about this module in issues or pull request please adhere to the [SilverStripe Community Code of Conduct](https://docs.silverstripe.org/en/contributing/code_of_conduct).

composer.json

@@ -0,0 +1,28 @@
+{
+    "name": "silverstripe-themes/simple",
+    "description": "The SilverStripe simple theme (default SilverStripe 3 theme)",
+    "type": "silverstripe-theme",
+    "keywords": [
+        "silverstripe",
+        "theme"
+    ],
+    "license": "BSD-3-Clause",
+    "authors": [
+        {
+            "name": "Sara Tu\u0161ar (Innovaif)",
+            "homepage": "http://www.saratusar.com"
+        }
+    ],
+    "require": {
+        "composer/installers": "*",
+        "silverstripe/framework": ">=3.5"
+    },
+    "extra": {
+        "expose": [
+            "css",
+            "images",
+            "javascript",
+            "webfonts"
+        ]
+    }
+}

css/form.css

@@ -1,116 +1,50 @@
-.ui-widget,
-.ui-widget input,
-.ui-widget select,
-.ui-widget textarea,
-.ui-widget button {
-    font-family: Arial, Helvetica, sans-serif !important
-}
-input:invalid,
-textarea:invalid {
-    border-radius: 1px;
-    -moz-box-shadow: 0px 0px 5px red;
-    -webkit-box-shadow: 0px 0px 5px red;
-    box-shadow: 0px 0px 5px red;
-}
-.no-boxshadow input:invalid,
-.no-boxshadow textarea:invalid {
-    background-color: #f0dddd
-}
+/** ----------------------------------------------------------
+ *
+ * This stylesheet includes both generic form styles and
+ *    additional form styles for the User Defined Form Module.
+ *
+ ** ------------------------------------------------------- */
+
+
+/* GENERIC FORMS
+----------------------------------------------- */
+
 form {
-    max-width: 70%;
-}
-form .message {
-    float:right;
-    padding-top: 6px;
-    color:#b80000;
-}
-.holder-required {
-    background-color:#ffb8b8;
-}
-form .good {
-    background-color: #ecf9d0;
-    border-color: #8fbe00;
-}
-form .bad {
-    background-color: #f9d0d0;
-    border-color: #be0000;
-}
-.checkbox,
-.radio {
-    margin-top: 3px;
-}
-.checkbox label.right,
-    .radio label.right {
-        text-align: left;
-        padding-left: 0px;
-    }
-#MemberLoginForm_LoginForm_action_dologin,
-.Actions .action {
-    padding: 6px 20px
-}
-#MemberLoginForm_LoginForm,
-#MemberLoginForm_LostPasswordForm {
-    max-width: 500px
-}
-#ForgotPassword a {
-    margin-top: 15px
-}
-#ForgotPassword {
-    margin-top: 6px
+    max-width: 500px;
+    width: 50%;
 }
 div.field {
-    width: 100%;
-    float: left;
-    margin-bottom: 10px;
-    padding:10px;
+    margin: 10px 0 15px;
 }
+fieldset {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+form label {
+    margin-bottom: 5px;
+}
+    form label.left {
+        display: block;
+        font-weight: bold;
+    }
+    form label.right {
+        font-size: 12px;
+        color: #888;
+    }
 
-.middleColumn div.field {
-	padding-left:0;
-	padding-right:0;
-}
-
-
-.ui-widget {
-    font-family: Arial, Helvetica, sans-serif
-}
-form label.left {
-    max-width:50%;
-    padding-right: 5%;
-    padding-bottom:10px;
-    margin-top: 3px;
-    display: block;
-    font-size: 13px;
-}
-form label.right {
-    padding-left: 5%;
-    display: block;
-    font-size: 13px;
-}
-.main form .middleColumn {
-    float: left;
-    width: 50% !important;
-}
-	.main form .middleColumn .middleColumn {
-	    width: 100% !important
-	}
-.header form .middleColumn {
-    float: none;
-    width: 100% !important;
-}
-.listbox option {
-    padding: 3px 0
-}
 form input.text,
 form textarea,
-form .textajaxuniquetext,
+form .textajaxuniquetext,   /* Not sure if this is used? */
 form select {
-    width: 98%;
-    padding: 6px 1%;
+    width: 100%;
+    max-width: 400px;
+    padding: 6px 5px;
     font-size: 15px;
-    background-color:#fff;
-	 border: 1px solid #dad9d9;
+    background-color: #fff;
+    border: 1px solid #dad9d9;
 }
+    .ie7 form select { width: 400px; } /* fix for ie7's rendering of max-width property on select input */
 
 form input.text:focus,
 form textarea:focus,
@@ -118,139 +52,247 @@ form .textajaxuniquetext:focus,
 form select:focus {
     outline:none;
 }
-
-form input.sitetreeurlsegment {
-    width: 200px
-}
-form span.readonly {
-    font-size: 16px
-}
 form input[disabled], form textarea[disabled] {
     background-color: #f7f7f7;
     border: 1px solid #dad9d9;
 }
-form .creditCardField input,
-form input.currency {
-    padding: 5px 1%;
-    width: 50px;
+textarea {
+    resize: vertical; /* forces text area to be resized vertically only */
 }
+
+
+/* Radio and Checkbox */
+.field .checkbox:not(.field),
+.field .radio:not(.field) {
+    float: left;
+    width: 13px;
+    height: 13px;
+    margin-right: 6px;
+    margin-top: 5px;
+    padding: 0;
+}
+    .checkbox label.right,
+    .radio label.right {
+        float: left;
+    }
+
+
+/* Messages */
+form .message {
+    background-color: #fef4ba;
+    padding: 5px 10px;
+    border: 1px solid #e8c805;
+    border-radius: 3px;
+}
+    form .good {
+        background-color: #ecf9d0;
+        border-color: #8fbe00;
+    }
+    form .bad,
+    form .required,
+    form .error {
+        background-color: #f9d0d0;
+        border-color: #cf0000;
+        color: #b80000;
+    }
+
+
+/* ACTIONS */
+.Actions {
+    margin-bottom: 20px;
+}
+    a.btn, button, input[type="submit"], input[type="reset"], .Actions .action {
+        background: #b80000;
+        color: #fff;
+        display: inline-block;
+        border-radius: 4px;
+        padding: 6px 15px;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        border: none;
+        font-size: 13px;
+        margin-right: 10px;
+        float: left;
+    }
+    a.btn:hover, button, input[type="submit"]:hover, .Actions .action:hover {
+        background: #C80000;
+        color: #fff;
+    }
+    a.btn {
+        line-height: 18px;
+        margin-bottom: 10px;
+    }
+    a.btn:after {                     /* creates arrow in button */
+        content: '\2192';
+        padding-left: 10px;
+    }
+    .ie7 input.action {
+        width: 0;                     /* IE table-cell margin fix */
+        overflow: visible;
+    }
+    input.action[class] {             /* IE ignores [class] */
+        width: auto;                  /* cancel margin fix for other browsers */
+    }
+
+    .ie7 .Actions .action {
+        float: left;
+    }
+    .Actions:after {
+        color: #B94A48;
+        display: inline-block;
+        font-weight: normal;
+        margin-top: 9px;
+    }
+    #MemberLoginForm_LoginForm .Actions:after {
+        display: none;
+    }
+
+
+/* AREA SPECIFIC */
+    /* LOGIN and FORGOT PASSWORD */
+    #Remember {
+        min-height: 20px;
+    }
+    #ForgotPassword {
+        clear: left;
+    }
+    #MemberLoginForm_LostPasswordForm .Actions:after {
+        display: none;
+    }
+
+    /* Search / Login */
+    .header form .middleColumn {
+        /* float: none;
+        width: 100% !important; */
+    }
+
+
+
+
+/* USER DEFINED USER FORM MODULE STYLES
+----------------------------------------------- */
+
+/*Generic and mixed*/
+.FormHeading {
+    clear: both;
+    padding-top: 15px;
+}
+form .date .middleColumn input {
+    /*background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;*/
+    width: 114px;
+}
+.Actions input.resetformaction,
+.Actions input.action-minor {                  /* Clear button */
+    float: left;
+    background-color: #888;
+}
+.Actions input.resetformaction:hover,
+.Actions input.action-minor:hover {            /* Clear button */
+    background-color: #aaa;
+}
+
+/* Labels */
+.checkbox label.right {
+    font-size: 13px;                            /* reset to default */
+    color: #333;                                /* reset to default */
+}
+form .requiredField label.left:after, form .requiredField legend.left:after { /* pseudo element adds an asterisk to a required fields label */
+    color: #B94A48;
+    content: "*";
+    font-size: 14px;
+    font-weight: normal;
+    padding-left: 3px;
+}
+
+/* Radio / Checkbox */
+form .checkboxset ul,
+form .optionset ul {
+    margin: 0;
+}
+    form .checkboxset li,
+    form .optionset li {
+        margin-bottom: 5px;
+        list-style-type:none;
+    }
+    form div.checkbox:after { /* clearfix */
+        content: ".";
+        display: block;
+        height: 0;
+        clear: both;
+        visibility: hidden;
+    }
+    form .checkbox .checkbox { clear: both; }
+
+/* Messages */
+span.message {
+    margin: 10px 0;
+    display: block;
+    max-width: 390px;
+    clear: left;
+}
+div.holder-required {               /* This class needs to be changed - is used for both input and div */
+    /* background-color: #f9d0d0;
+    border: 1px solid #cf0000;
+    padding: 10px;
+    margin-left: -11px; */
+}
+form input.holder-required {        /* This class needs to be changed - is used for both input and div */
+    border: 1px solid #cf0000;
+}
+
+/* Error messages */
+input:invalid,
+textarea:invalid {
+    border-radius: 1px;
+    box-shadow: 0px 0px 5px red;
+}
+.no-boxshadow input:invalid,
+.no-boxshadow textarea:invalid {
+    background-color: #f0dddd
+}
+
+/* To test - potentially not needed? */
+.ss-uploadfield-item-info button{
+    margin-top: 4px !important;
+    float: left;
+}
+form .creditCardField input,
+form input.currency,
 form input.numeric {
-    padding: 5px 1%;
     width: 50px;
 }
 form #DMYDate-month,
 form #DMYDate-day {
     width: 25px
 }
-form .checkboxset ul,
-form .optionset ul {
-    margin: 0;
-}
 
-form .checkboxset li,
-form .optionset li {
-    margin-bottom: 5px;
-    list-style-type:none;
-}
-form .checkboxset li .checkbox,
-form .optionset li .radio{
-    margin-top: 1px;
-}
 
-a.btn, button, input[type="submit"] {
-    background: #b80000;
-    color: #fff;
-    display: inline-block;
-    border-radius: 4px;
-    padding: 6px 15px;
-    margin-top: 10px;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    border-bottom: none !important;
-    font-size: 13px;
-	 border:none;
-}
 
-a.btn:hover, button, input[type="submit"]:hover {
-    background: #d80000;
-    color: #fff;
-}
 
-button{
-	background-color:#a4a4a4;
-}
+/* Responsive form styles
+----------------------------------------------- */
 
-.ss-uploadfield-item-info button{
-		margin-top:4px !important;
-		float:left;
-}
+@media only screen and (max-width: 700px) {
 
-a.btn:after {
-    content: '\2192';
-    padding-left: 10px;
-    font-size: 14px;
-    font-family: Arial, Helvetica, sans-serif;
-}
-
-.resetformaction {
-    float:right;
-    border-radius:20px;
-    background-color:#9F9F9F;
-    border:none;
-    color:#fff;
-    font-weight: bold;
-    font-size: 13px;
-}
-
-@media only screen and (max-width: 700px) { 
-    .main form .middleColumn {
-	    float: right;
-	    width: 100% !important;
-	    : ;
-	}
+    /* To test - potentially not needed? */
 	.header form .middleColumn {
 	    float: none;
 	    width: 100% !important;
-	    : ;
 	}
 	form label.left,
 	#MemberLoginForm_LoginForm label {
 	    margin-bottom: 8px
 	}
-    div.field {
-        position:relative;
-        padding-bottom: 20px;
-    }
-    .checkbox label.right,
-    .radio label.right {
-        float:left;
-        text-align: left;
-    }
-    form label.left {
-        width:50%;
-        padding:0;
-    }
-    form label.right {
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        margin-top: 3px;
-        width: 50%;
-        padding: 0;
-    }
-    .checkbox label.right,
-    .radio label.right {
-        position:relative;
-        right:auto;
-        margin-top:-10px;
-    }
 }
 
-@media only screen and (max-width: 900px) { 
+@media only screen and (max-width: 900px) {
     form {
         max-width: 100%;
     }
 }
 
-@media only screen and (min-width: 700px) { 
-}
+@media only screen and (min-width: 700px) {
+
+}

css/layout.css

@@ -1,132 +1,238 @@
-header:after,
-.main:after,
-#Root:after,
-.search-bar:after,
-header .inner:after,
-footer:after {
-    height: 0;
-    content: ".";
-    display: block;
-    clear: both;
-    visibility: hidden;
+/** ----------------------------------------------------------
+ *
+ * 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 color hex's or values of your grid
+ *
+ *		1. OOCSS GRID
+ *		2. MAIN LAYOUT
+ *		3. HEADER
+ *			- Brand
+ *			- Search Form
+ *		4. Navigation
+ *			- Primary Navigation
+ *			- tablet Navigation
+ *			- Secondary Navigation
+ *			- Secondary Nav 2-5 Levels deep
+ *		5. Mixed
+ *		6. Footer
+ *		7. Page Specific Layout
+ *			- Homepage
+ *			- Search Results
+ *		8. Device and Responsive Layout
+ *			- Breakpoint 960px
+ *			- Breakpoint 640px
+ *				- Search Form
+ *				- Main Content
+ *		9. Print Styles
+ *			- Simple Theme custom print styles
+ *
+ * @author Your Name <email@silverstripe.com>
+ * ------------------------------------------------------- */
+
+/* OOCSS Grid
+* https://github.com/stubbornella/oocss/wiki/grids
+*/
+
+.line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */
+.lastUnit {
+	overflow:hidden;
+	*overflow:visible;
+	*zoom:1;
+	padding:0 10px;
 }
+.unit { /* unit - Base class which divides a line into sections (columns). */
+	float:left;
+	padding:0 10px;
+	-moz-box-sizing:border-box;
+	-webkit-box-sizing:border-box;
+	box-sizing:border-box; /* box-sizing:border-box; creates a box-model where
+	padding and border are NOT added onto the width - they are included in the width,
+	so a 200px wide element with 20px padding will be 200px, NOT 240px wide */
+}
+.unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */
+	float:right;
+}
+
+/* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space.
+The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */
+/* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */
+
+.size1of1 {
+	float:none;
+}
+.size1of2 {
+	width:50%;
+}
+.size1of3 {
+	width:33.33333%;
+}
+.size2of3 {
+	width:66.66666%;
+}
+.size1of4 {
+	width:25%;
+}
+.size3of4 {
+	width:75%;
+}
+.size1of5 {
+	width:20%;
+}
+.size2of5 {
+	width:40%;
+}
+.size3of5 {
+	width:60%;
+}
+.size4of5 {
+	width:80%;
+}
+.lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */
+	float:none;
+	width:auto;
+	_position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters.
+	meaning that anything prefixed with _ wouldn't be picked up by any other browsers */
+	_left:-3px;
+	_margin-right:-3px;
+}
+
+/* MAIN LAYOUT */
 body {
     margin: 0;
     background: #ededed;
     min-width: 240px;
-    -webkit-text-size-adjust: none;
-    font-family: Arial, Helvetica, sans-serif;
-}
-.ie7 body,
-.ie8 body {
-    min-width: 860px
-}
-::-moz-selection {
-    background: #b80000;
-    color: #fff;
-    text-shadow: none;
-}
-::selection {
-    background: #b80000;
-    color: #fff;
-    text-shadow: none;
-}
-a:link {
-    -webkit-tap-highlight-color: #b80000
+    -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */
 }
+	.ie7 body,
+	.ie8 body {
+	    min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */
+	}
+	.main {
+	    background: #fff;
+	    padding: 40px 0 60px;
+	    min-height: 300px;
+	}
+	.inner {
+	    max-width: 1100px;
+	    margin: 0 auto;
+	    padding: 0 30px;
+	}
+	.ie6 .inner {
+	    width: 960px;
+	}
+	.no-sidebar .content-container {
+	    float: left;
+	    width:100%; /* makes content container full width when there is no sidebar */
+	}
+	.sidebar { /* this is the sidebar element */
+	    margin-top: 12px;
+	}
+	.no-sidebar .sidebar {
+		display: none;
+	}
 
-.brand {
-    float: left;
-    display: inline-block;
+
+/* HEADER */
+.header {
+    background: #161616;
 }
-	.brand h1 {
-	    margin: 0;
-	    padding: 0;
-	    font-size: 48px;
-	    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;
+	.header .inner {
+	    padding-top: 45px;
+	    position: relative;
+	    min-height: 72px;
+	}
+
+	/* Brand */
+	header .brand, header .brand:hover {
+	    float: left;
 	    color: #fff;
-	    font-weight: 600;
-	    font-stretch: normal;
-	    line-height: 1em;
+	    display: inline-block;
 	}
-.brand,
-.brand:hover {
-    color: #fff
-}
-	.brand p {
-	    color: #888;
-	    margin-bottom: 22px;
+		.brand h1 {
+		    margin: 0;
+		    padding: 0;
+		    font-size: 48px;
+		    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; /* default value. No font stretching */
+		    line-height: 1em;
+		}
+		.brand p {
+		    color: #888;
+		    margin-bottom: 22px;
+		}
+
+	/* Search form */
+
+	.search-bar {
+		position: absolute;
+		right: 13px;
+		top: 12px;
 	}
-.search-bar form input.action,
-.header .primary li a,
-.footer a {
-    -moz-transition: color 0.2s;
-    -webkit-transition: color 0.2s;
-    transition: color 0.2s;
-}
-/* Search Form */
-.search-bar {
-    position: absolute;
-    right: 30px;
-    top: 34px;
-}
-.search-dropdown-icon {
-    display: none
-}
-.search-bar form fieldset {
-    position: relative;
-    padding: 0;
-    margin: 0;
-}
-.search-bar form input.text {
-    width: 155px;
-    padding:6px 35px 6px 10px;
-    color: #888;
-    margin: 0;
-    border: none;
-    border-radius: 20px;
-    background: #fff;
-    font-family: Arial, Helvetica, sans-serif;
-}
-.search-bar form input.active {
-    color: #000
-}
-.search-bar form input.action {
-    font-size: 15px;
-    position: absolute;
-    right: 3px;
-    top: -1px;
-    cursor: pointer;
-    border: none;
-    padding: 5px;
-    background: none;
-    font-family: 'WebSymbolsRegular';
-    color: #848484;
-	 border-radius:0;
-	 margin-top:0;
-}
-.search-bar form input.action:hover {
-    color: #000
-}
+		.search-bar .field {
+			margin: 0;
+			padding: 0;
+		}
+		.search-bar form input.text {
+		    width: 155px;
+		    padding: 5px 34px 5px 15px;
+		    color: #888;
+		    margin: 0;
+		    border: none;
+		    border-radius: 14px;
+		    background: #fff;
+		}
 
-#Search {
-	padding:0;
-}
+		.search-bar form input.action { /* positions the search button icon over the top of the search input */
+		    font-size: 14px;
+		    position: absolute;
+		    right: 5px;
+		    top: 0;
+		    cursor: pointer;
+		    border: none;
+		    padding: 5px;
+		    background: none;
+		    font-family: 'WebSymbolsRegular';
+		    color: #848484;
+			border-radius: 0;
+			margin: 0;
+		}
+		.search-bar form input.active,
+		.search-bar form input.action:hover {
+		    color: #000;
+		}
+		.search-bar form input:focus,
+		.header textarea:focus {
+		    outline: none; /* removes default browser outlining on focus */
+		}
+		.search-dropdown-icon {
+		    display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */
+		}
 
-.search-bar form input:focus,
-.header textarea:focus {
-    outline: none
-}
-.header .primary ul {
-    /*float: right; margin:23px -12px 0 0;*/ position:absolute; bottom:0; right:17px;
-}
-.header .primary li {
-    float: left;
-    padding-bottom: 17px;
-    margin: 0 5px;
-    position: relative;
-    white-space: nowrap;
-}
+
+
+/* NAVIGATION */
+
+	/* Primary navigation */
+	.header .inner .unit {
+		position: relative; /* used to position the main navigation */
+	}
+	.header .primary ul {
+		position:absolute;
+		bottom:0;
+		right:0; /* positions the main navigation */
+	}
+	.header .primary li {
+	    float: left;
+	    padding-bottom: 14px;
+	    margin: 0 5px;
+	    position: relative;
+	    white-space: nowrap; /* forces text to never wrap onto a second line */
+	}
 	.header .primary li a {
 	    color: #888;
 	    font-size: 15px;
@@ -136,224 +242,199 @@ a:link {
 	    display: block;
 	}
 	.header .primary li a:hover {
-	    color: #fff
+	    color: #fff;
 	}
-.header .primary li.section a,
-.header .primary li.current a {
-    color: #fff
-}
-.header .primary li.section:after,
-.header .primary li.current:after {
-    content: '}';
-    display: block;
-    position: absolute;
-    left: 50%;
-    margin-left: -7px;
-    bottom: -6px;
-    font-family: 'WebSymbolsRegular';
-    font-size: 28px;
-    color: #fff;
-    text-align: center;
-    line-height: 20px;
-}
-/* when navigation and logo overlap tablet-nav is initialized */
-.tablet-nav .brand p {
-    margin-bottom: 0
-}
-.tablet-nav .header .inner {
-    padding-top: 20px
-}
-.tablet-nav .header .primary ul {
-    float: left;
-    clear: both;
-    position: relative;
-    margin: 20px 0 4px -12px;
-    white-space: nowrap;
-    right: auto;
-}
-	.tablet-nav .header .primary ul li {
-	    margin-bottom: 10px;
-	    padding-bottom: 0;
+	.header .primary li.section a,
+	.header .primary li.current a {
+	    color: #fff;
+	}
+	.header .primary li.section:after,
+	.header .primary li.current:after {
+	    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: -7px;
+	    font-family: 'WebSymbolsRegular';
+	    font-size: 30px;
+	    color: #fff;
+	    text-align: center;
+	    line-height: 20px;
+	}
+
+	/* Tablet Navigation */
+	/* When navigation and logo overlap tablet-nav is initialized */
+	.tablet-nav .brand p {
+	    margin-bottom: 0;
+	}
+	.tablet-nav .header .inner {
+	    padding-top: 20px;
+	}
+	.tablet-nav .header .primary ul {
+	    float: left;
+	    clear: both;
+	    position: relative;
+	    margin: 20px 0 0 -13px;
 	    white-space: nowrap;
+	    right: auto; /* resets the right property value that is set for the desktop site */
 	}
-		.tablet-nav .header .primary ul li a {
-		    -moz-transition: none;
-		    -webkit-transition: none;
-		    transition: none;
+		.tablet-nav .header .primary ul li {
+		    white-space: nowrap;
 		}
-	.tablet-nav .header .primary ul li.current a,
-	.tablet-nav .header .primary ul li.section a {
-	    background-color: #525252;
-	    border-radius: 4px;
-	}
-.tablet-nav .header .primary li.section:after,
-.tablet-nav .header .primary li.current:after {
-    display: none
-}
-.tablet-nav .footer .right {
-    float: left;
-    width: 100%;
-}
-.header .nav-open-button {
-    display: none
-}
-.inner {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 30px;
-}
-.ie6 .inner {
-    width: 960px
-}
-.main {
-    background: #fff;
-    padding: 50px 0 60px;
-}
-aside {
-    float: left;
-    width: 23%;
-    margin-top: 17px;
-}
-.secondary h3 {
-    font-size: 20px;
-    color: #b8b7b7;
-    margin: 0 0 8px 0;
-}
-.secondary {
-    border-bottom: 1px solid #e5e5e5
-}
-	.secondary ul {
-	    padding: 0;
-	    margin: 0;
-	}
-	.secondary li {
-	    border-top: 1px solid #e5e5e5;
-	    position: relative;
-	    list-style-type: none;
-	}
-		.secondary li .arrow {
-		    color: #b80000;
-		    padding-right: 5px;
-		    display: block;
-		    font-size: 15px;
-		    line-height: 20px;
-		    position: absolute;
-		    left: 2px;
-		    top: 5px;
-		    -moz-transition: 0.2s;
-		    -webkit-transition: 0.2s;
-		    transition: 0.2s;
-		}
-	.secondary li:hover .arrow {
-	    left: 6px
-	}
-	.secondary li a {
-	    padding: 8px 0;
-	    display: block;
+			.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;
+			}
+	.tablet-nav .footer .right {
+	    float: left;
 	    width: 100%;
-	    text-transform: uppercase;
-	    letter-spacing: 2px;
-	    font-size: 11px;
-	    color: #333;
-	    line-height: 17px;
-	    font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
 	}
-	.secondary li .text {
-	    padding-left: 28px;
-	    display: block;
+
+	/* Secondary navigation */
+	.main .secondary h3 {
+	    font-size: 20px;
+	    color: #AAA;
+	    margin: 0 0 8px 0;
+	    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
+	    font-weight: normal;
 	}
-	.secondary li.section,
-	.secondary li.current {
-	    background-color: #f7f7f7
+	.main .secondary {
+	    border-bottom: 1px solid #e5e5e5;
 	}
-		.secondary li.section a,
-		.secondary li.current a {
-		    color: #000
+		.main .secondary ul {
+		    padding: 0;
+		    margin: 0;
 		}
-.content-container {
-    float: right;
-    width: 73%;
-    padding-bottom: 20px;
+		.main .secondary li {
+		    border-top: 1px solid #e5e5e5;
+		    position: relative;
+		    list-style-type: none;
+		    margin-bottom: 0;
+		}
+			.main .secondary li .arrow {
+			    color: #b80000;
+			    padding-right: 5px;
+			    display: block;
+			    font-size: 15px;
+			    line-height: 20px;
+			    position: absolute;
+			    left: 2px;
+			    top: 7px;
+			    -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; /* this sets the final position for the arrow transition */
+		}
+		.main .secondary li a { /* side nav link styling */
+		    padding: 10px 0;
+		    display: block;
+		    text-transform: uppercase;
+		    letter-spacing: 2px;
+		    font-size: 11px;
+		    color: #333;
+		    line-height: 17px;
+		    border-bottom: none;
+		    font-family: 'Lucida Sans', 'Lucida Grande', Arial, Helvetica, sans-serif;
+		}
+		.main .secondary li .text {
+		    padding-left: 28px;
+		    display: block;
+		}
+		.main .secondary li.current a.current {
+			color: #b80000;
+			background-color: #EDEDED;
+		}
+		.main .secondary li.section,
+		.main .secondary li.current {
+		    background-color: #F3F3F3;
+		}
+			.main .secondary li.section a,
+			.main .secondary li.current a {
+			    color: #000;
+			}
+
+
+		/* Secondary navigation 2-5 levels deep */
+		.main .secondary ul ul {
+			display: none;
+		}
+		.secondary ul li.current ul,
+		.secondary ul li.section ul { /* Only show child pages from selected parent */
+			display: block;
+		}
+		.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 .arrow { left: 12px; }
+			.main .secondary ul ul li a:hover .arrow { left: 16px; }
+
+		.main .secondary ul ul ul li a { padding-left: 20px; }
+			.main .secondary ul ul ul li a .arrow { left: 22px; }
+			.main .secondary ul ul ul li a:hover .arrow { left: 26px; }
+
+		.main .secondary ul ul ul ul li a { padding-left: 30px; }
+			.main .secondary ul ul ul ul li a .arrow { left: 32px; }
+			.main .secondary ul ul ul ul li a:hover .arrow { left: 36px; }
+
+		.main .secondary ul ul ul ul ul li a { padding-left: 40px; }
+			.main .secondary ul ul ul ul ul li a .arrow { left: 32px; }
+			.main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; }
+
+		.main .secondary li a:hover,
+		.main .secondary li.section a:hover,
+		.main .secondary li.current a:hover {
+			color: #b80000;
+		}
+
+
+
+
+/* MIXED */
+header:after,
+.main:after,
+#Root:after,
+.search-bar:after,
+header .inner:after,
+footer:after { /* clearfix */
+    height: 0;
+    content: ".";
+    display: block;
+    clear: both;
+    visibility: hidden;
 }
-.no-sidebar .content-container {
-    float: left;
-    width:100%;
+.search-bar form input.action,
+.header .primary li 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;
+}
+.footer a.brand { color: #333; margin-left: 0; }
+.footer a.brand:hover { color: #B80000; }
+body h1 span.amp {
+    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
+    font-style: italic;
 }
 
-.no-sidebar aside {
-	display:none;
-}
 
-.header {
-    background: #161616
-}
-	.header .inner {
-	    padding-top: 45px;
-	    position: relative;
-	    min-height: 72px;
-	}
-/* Search Results */
-.searchResults h1 {
-    font-size: 36px;
-    margin-bottom: 15px;
-}
-.searchResults p.searchQuery {
-    color: #333;
-    margin-bottom: 10px;
-}
-.searchResults ul#SearchResults {
-    padding: 0
-}
-	.searchResults ul#SearchResults li {
-	    border-top: 1px solid #e5e5e5;
-	    padding: 20px 0;
-	    list-style-type: none;
-	}
-	.searchResults ul#SearchResults p {
-	    margin-bottom: 12px
-	}
-	.searchResults ul#SearchResults a.searchResultHeader {
-	    font-size: 16px;
-	    font-weight: bold;
-	    margin-bottom: 6px;
-	    display: block;
-	}
-.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 */
 .footer {
-    color: #999;
+    color: #6B6B6B;
     background: #ededed;
     padding: 20px 0;
     font-size: 11px;
     line-height: 22px;
 }
 	.footer a {
-	    color: #999
+	    color: #6B6B6B;
 	}
 	.footer a:hover {
-	    color: #000
+	    color: #B90000;
 	}
 	.footer .left {
 	    float: left;
@@ -377,143 +458,231 @@ aside {
 	    padding: 0;
 	}
 		.footer .primary li {
-		    display: inline
+		    display: inline;
 		}
-.ie6 .footer .primary li,
-.ie7 .footer .primary li {
-    display: inline;
-    zoom: 1;
-    margin-right: 10px;
-}
-.footer .primary li:after {
-    padding: 0 3px 0 5px;
-    content: '/';
-    color: #999;
-}
-.footer .primary li:last-child:after {
-    content: ''
-}
-.footer .arrow {
-    padding: 0 8px 0 5px;
-    color: #b80000;
-    font-size: 13px;
-}
-.footer .primary .nav-open-button {
-    display: none
-}
-.footer .primary ul#nav .menu-bubble-arrow {
-    display: none
+	.ie6 .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 { /* adds '/' to separate the footer navigation items */
+	    padding: 0 3px 0 5px;
+	    content: '/';
+	    color: #999;
+	}
+	.footer .primary li:last-child:after {
+	    content: ''; /* makes sure last nav item doesn't have a '/' following it */
+	}
+	.footer .arrow {
+	    padding: 0 8px 0 5px;
+	    color: #b80000;
+	    font-size: 13px;
+	}
+	.footer .primary .nav-open-button {
+	    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 button{
+			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; /* 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) { 
+@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: 0;
 	}
-		.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;
+            background: #000;
+            margin-top: 0;
+            padding: 0;
 		}
-		.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;
 			    right: 20px;
 			    top: 0px;
-			    font-family: 'WebSymbolsRegular';
+                font-family: 'WebSymbolsRegular';
 			    font-size: 14px;
 			    color: #999;
 			    text-align: center;
 			    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 */
 			}
+			.tablet-nav .header .primary ul li a:hover {
+			    color: inherit;
+			}
+			.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: 0;
 	    background-color: #E7E7E7;
 	}
-	.search-dropdown-icon {
+	.search-dropdown-icon { /* styling for search toggle button */
 	    display: block;
 	    cursor: pointer;
 	    width: 20px;
@@ -538,11 +707,12 @@ aside {
 		    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;
@@ -551,23 +721,26 @@ aside {
 	    border: 1px solid #e5e5e5;
 	    background: #fff;
 	    font-size: 17px;
+	    border-radius: 20px; /* increase border radius due to increased padding */
 	}
 	.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%
+	.sidebar {
+	    width: 100%; /* sidenav is now shown above the page content */
+	    margin-bottom: 30px;
 	}
-		.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;
 		}
@@ -580,14 +753,14 @@ aside {
 	    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 {
@@ -595,7 +768,11 @@ aside {
 	    width: 100%;
 	}
 }
-@media print { 
+
+/* Print Styles */
+
+/* Based on HTML5 boilerplate print styles */
+@media print {
 	* {
 	    background: transparent !important;
 	    color: black !important;
@@ -604,14 +781,27 @@ aside {
 	    filter: none !important;
 	    -ms-filter: none !important;
 	}
-	.header,
-	.footer {
-	    display: none
-	}
 	a,
 	a:visited {
 	    text-decoration: underline
 	}
+	a[href]:after {
+        content: " (" attr(href) ")";
+    }
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    /*
+     * Don't show links for images, or javascript/internal links
+     */
+
+    .ir a:after,
+    a[href^="javascript:"]:after,
+    a[href^="#"]:after {
+        content: "";
+    }
+
 	thead {
 	    display: table-header-group
 	}
@@ -622,4 +812,33 @@ aside {
 	img {
 	    max-width: 100% !important
 	}
-}
+	pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+    @page {
+        margin: 0.5cm;
+    }
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+
+    /* Simple theme custom print styles */
+	.header,
+	.footer,
+    .nav-open-button,
+    .search-bar,
+    .search-dropdown-icon,
+    nav.primary {
+	    display: none;
+	}
+}

css/reset.css

@@ -1,3 +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,
@@ -30,7 +38,7 @@ input[type="checkbox"], input.checkbox, .checkboxes input {vertical-align:bottom
 .ie6 input {vertical-align: text-bottom;}
 label, input[type="button"], input[type="submit"], input[type="image"], button, .btn {cursor:pointer;}
 button, input, select, textarea {margin:0;}
-.checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;}
+/* .checkbox, .radio {float:left; width:13px; height:13px; margin-right:6px; padding:0;} */
 
 button {width:auto; overflow:visible;}
 .ie7 img {-ms-interpolation-mode: bicubic;}
@@ -56,4 +64,4 @@ a:hover, a:active {outline: none;}
 ol {list-style-type:decimal;}
 ul li {list-style-type:none;}
 nav ul, nav li {margin:0; list-style:none; list-style-image:none;}
-strong, th {font-weight:bold;}
+strong, b, th {font-weight:bold;}

css/tabstrip.css

@@ -1,65 +0,0 @@
-ul.tabstrip {
-    padding: 0;
-    margin: 0 !important;
-    clear: left;
-    float: left;
-    width: 100%;
-    position: relative;
-}
-ul.tabstrip {
-    padding: 0;
-    margin: 0 !important;
-    clear: left;
-    float: left;
-    width: 100%;
-    position: relative;
-}
-	ul.tabstrip li {
-	    float: left;
-	    background: #ddd;
-	    cursor: pointer;
-	    position: relative;
-	    top: 0;
-	    border: 1px solid #ddd;
-	    border-bottom: none;
-	    margin: 0 5px 0 0;
-	    border-radius: 3px 3px 0 0;
-	}
-		ul.tabstrip li a {
-		    display: block;
-		    float: left;
-		    padding: 5px 13px 5px;
-		    text-decoration: none;
-		    font-weight: bold;
-		    outline: none;
-		    color: #333;
-		}
-		ul.tabstrip li a:hover {
-		    text-decoration: none
-		}
-	ul.tabstrip li.current,
-	ul.tabstrip li.ui-tabs-selected,
-	ul.tabstrip li.sel {
-	    background: #fff;
-	    top: 0;
-	}
-	ul.tabstrip li:hover {
-	    background-color: #eee
-	}
-	ul.tabstrip li.current:hover {
-	    background-color: #fff
-	}
-	ul.tabstrip li.current a,
-	ul.tabstrip li.ui-tabs-selected a,
-	ul.tabstrip li.sel a {
-	    color: #333
-	}
-.tab {
-    clear: left;
-    overflow: auto;
-    border: 1px solid #ddd;
-    border-top: none;
-    margin: 0;
-    padding: 10px 15px;
-    background-color: #fff;
-}

css/typography.css

@@ -1,161 +1,268 @@
-/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 20, 2012 06:04:25 AM America/New_York */
-@font-face {
-    font-family: 'CamboRegular';
-    src: url('../webfonts/Cambo-Regular-webfont.eot');
-    src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
-@font-face {
-    font-family: 'WebSymbolsRegular';
-    src: url('../webfonts/websymbols-regular-webfont.eot');
-    src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-}
+/** ----------------------------------------------------------
+ *
+ * Contains the generic theme typography styles
+ *
+ *    Include your notes or table of contents here
+ *
+ *    Include color hex's or values of your grid
+ *      #333333             - body
+ *      #B80000             - links, headings
+ *      #D80000             - links on hover
+ *      5px Vertical grid   - based on multiples of 5px, eg 10px, 15px, 20px, 25px...
+ *
+ *    @author Your Name <email@gmail.com>
+ *
+ * ------------------------------------------------------- */
+
+/* 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');
+      src: url('../webfonts/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/Cambo-Regular-webfont.woff') format('woff'), url('../webfonts/Cambo-Regular-webfont.ttf') format('truetype'), url('../webfonts/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
+      font-weight: normal;
+      font-style: normal;
+  }
+  @font-face {
+      font-family: 'WebSymbolsRegular';
+      src: url('../webfonts/websymbols-regular-webfont.eot');
+      src: url('../webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../webfonts/websymbols-regular-webfont.woff') format('woff'), url('../webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('../webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
+      font-weight: normal;
+      font-style: normal;
+  }
+
+
+/* BASE TYPOGRPHY */
+
+/* These are the default styles for the Simple theme */
 body {
-    font-size: 13px;
+    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;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
+  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 */
+.typography h1,
+.typography h2,
+.typography h3,
+.typography h4,
+.typography h5,
+.typography h6 {
+    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;
-    color: #b80000;
-}
-p {
-    margin: 0 0 17px;
-    font-size: 13px;
-    line-height: 21px;
-}
-em {
-    font-style: normal
-}
-a {
-    color: #b80000;
-    text-decoration: none;
-}
-a:hover {
-    color: #d80000
-}
-
-.typography h1 a{
-  border:none;
-}
-
-.typography ul {
-    margin: 20px 0 20px 30px
-}
-.typography li {
-    line-height: 22px;
-    margin-bottom: 5px;
-    list-style-type: disc;
+    margin-bottom: 10px;
+    color: #444;
 }
 .typography h1 {
-    font-size: 36px;
-    border-bottom: 1px solid #e5e5e5;
-    padding-bottom: 6px;
-    margin: 0 0 23px 0;
-    line-height: 45px;
-}
-	.typography h1 span.amp {
-	    font-family: Baskerville,"Goudy Old Style","Palatino","Book Antiqua",Georgia;
-	    font-style: italic;
-	}
-.typography h2 {
-    font-size: 24px;
-    margin-bottom: 15px;
-    padding-top: 15px;
-    line-height: 32px;
-}
-.typography h3 {
-    font-size: 21px;
-    margin-bottom: 10px;
-    padding-top: 10px;
-}
-.typography a {
-    border-bottom: 1px dashed #b80000
+  font-size: 36px;
+  line-height: 45px;
+  margin: 0 0 25px 0;
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 5px;
 }
+.typography h2 { font-size: 28px; line-height: 35px; margin-bottom: 15px; }
+.typography h3 { font-size: 22px; line-height: 30px; margin-bottom: 10px; }
+.typography h4 { font-size: 18px; line-height: 25px; margin-bottom: 5px; }
+.typography h5 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
+.typography h6 { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 5px; }
 
 
-table {
-    border-collapse: collapse;
+/* PARAGRAGHS */
+.typography  p { font-size: 13px; line-height: 20px; margin: 0 0 20px; }
+  .typography .intro {
+      font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
+      font-size: 22px;
+      line-height: 32px;
+      margin-bottom: 20px;
+  }
+.typography em { font-style: italic; }
+
+::selection,
+::-moz-selection { /* Applies style to highlighted portion of a page */
+    background: #b80000;
+    color: #fff;
+    text-shadow: none;
+}
+
+/* LINKS */
+.typography a,
+.typography a.intro {
+    color: #B80000;
+    text-decoration: none;
+}
+  .typography a:hover {
+    color: #D80000;
+    border-bottom: 1px dashed #B80000;
+  }
+  .typography a:focus { }
+
+
+/* LIST STYLES
+-------------------------------------------- */
+.typography ul,
+.typography ol,
+.typography dl { margin: 0 0 20px 25px; }
+.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; /* 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;
 }
-  table tr:nth-child(even) {
+  .typography table tr:nth-child(even) {
       background-color: #ededed
   }
-  table tr.even,
-  .content table th,
-  .content thead td {
+  .typography table tr.even,
+  .typography table th,
+  .typography thead td {
       background-color: #ededed
   }
-  table td,
-  .content table th {
+  .typography table td,
+  .typography table th {
       padding: 2px 5px;
       border: 1px solid #d4d4d4;
       vertical-align: top;
   }
-  table th {
-      text-align: left;
+  .typography table th {
       font-weight: bold;
   }
-p.intro {
-    font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
-    font-size: 22px;
-    line-height: 32px;
-    margin-bottom: 20px;
-    color: #222;
-}
-/* WYSIWYG EDITOR ALIGNMENT CLASSES 
+
+
+/* WYSIWYG EDITOR ALIGNMENT CLASSES
 -------------------------------------------- */
-.typography .left {
+.typography .text-left {
     text-align: left
 }
-.typography .center {
+.typography .text-center {
     text-align: center
 }
-.typography .right {
+.typography .text-right {
     text-align: right
 }
-/* IMAGES 
+
+
+/* IMAGES
 -------------------------------------------- */
 .typography img {
     border: 5px solid #d7d7d7;
-    max-width: 60%;
-    height: auto;
-    float: left;
-    margin: 6px 20px 10px 0;
-}
-.typography img.left, .typography img.right {
-    border: 5px solid #d7d7d7;
-    max-width: 60%;
-    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 {
     float: left;
-    margin: 6px 20px 10px 0;
+    max-width: 50%;
+    margin: 5px 20px 10px 0;
 }
 .typography img.right {
     float: right;
-    margin: 6px 0 10px 20px;
+    max-width: 50%; /* Responsive width */
+    margin: 5px 0 10px 20px;
 }
-
 .typography img.leftAlone {
     float: left;
     margin-right: 100%;
+    margin-bottom: 10px;
+    clear: both;
 }
 .typography img.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
     display: block;
+    margin-bottom: 10px;
+    clear: both;
+}
+.typography .captionImage { width: 100%; margin-top: 5px; }
+.typography .captionImage img { margin: 0; }
+  .typography .captionImage.left {
+    float: left;
+    margin: 5px 30px 20px 0px;
+  }
+  .typography .captionImage.right{
+    float: right;
+    margin: 5px 0 20px 30px;
+  }
+  .typography .captionImage.left[style],
+  .typography .captionImage.right[style] {
+    max-width: 50%; /* Overides core width to make responsive */
+  }
+  .typography .captionImage.left img,
+  .typography .captionImage.right img {
+    float: none;
+    max-width: none;
+    width: 100%;
+  }
+  .typography .captionImage.left img {
+    margin-right: -10px;
+  }
+  .typography .captionImage.right img {
+    margin-left: -10px;
+  }
+  .typography .captionImage.right p {
+    margin-left: -10px;
+    text-align: left;
+    margin-left: -10px;
+  }
+.typography .captionImage.leftAlone{
+  float:none;
+  margin: 0 20px 20px 0px;
+}
+.typography .captionImage.center{
+  margin: 0 auto 20px;
+}
+.typography .captionImage p {
+  clear: both;
+  margin: 5px 0;
+  font-style: italic;
+  color: #888;
 }
 
 
+/* BLOCKQUOTES
+-------------------------------------------- */
+.typography blockquote {
+  background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
+  font-family: "CamboRegular", Georgia, "Times New Roman", Times, serif;
+  color: #777;
+  display: block;
+  font-style: italic;
+  margin: 0 0 20px;
+  float: right;
+  text-indent: 30px;
+  width: 50%;
+  margin-left: 5%;
+  clear: both;
+}
+.typography blockquote p {
+  font-size: 17px;
+  line-height: 25px;
+}
+.typography pre {
+  background: #F7F7F7;
+  border: 1px solid #E4E4E4;
+  font-family: Courier, monospace;
+  margin: 0 0 20px 0;
+  padding: 15px;
+  clear: both;
+}
+
+/* ADDRESS
+-------------------------------------------- */
+address {
+  display: block;
+  margin-bottom: 20px;
+}

javascript/script.js

@@ -1,46 +1,31 @@
 jQuery.noConflict();
 
-(function($) {    
-    $(document).ready(function() {
-										 
-		/* removes text from search form on focus and replaces it on unfocus - if text is entered then it does not get replaced with default on unfocus */
+(function($) {
+	$(document).ready(function() {
+		// L is a magnifying glass icon in the font
 		$('#SearchForm_SearchForm_action_results').val('L');
-		var searchField = $('#SearchForm_SearchForm_Search');
-		var default_value = searchField.val();
-		searchField.focus(function() {
-			$(this).addClass('active');
-			if(searchField.val() == default_value) {
-				searchField.val('');
-			}
-		});
-		searchField.blur(function() {
-			  if(searchField.val() == '') {
-					searchField.val(default_value);
-			  }
-		});
-				
+
 		if (!$.browser.msie || ($.browser.msie && (parseInt($.browser.version, 10) > 8))) {
-			
-			var searchBarButton = $("span.search-dropdown-icon");
+			var searchBarButton = $("button.search-dropdown-icon");
 			var searchBar = $('div.search-bar');
-			var menuButton = $("span.nav-open-button");
-			var menu = $('.header .primary ul');										 
+			var menuButton = $("button.nav-open-button");
+			var menu = $('.header .primary ul');
 			var mobile = false;
 			var changed = false;
-			
+
 			$('body').append('<div id="media-query-trigger"></div>');
-			
-			function menuWidthCheck() {								  
+
+			function menuWidthCheck() {
 				var header_w = $('header .inner').width();
 				var elements_w = menu.width() + $('.brand').width();
-				
+
 				if ((header_w < elements_w) || ($(window).width() <= 768)) {
 					$('body').addClass('tablet-nav');
 				}
 				else {
-					$('body').removeClass('tablet-nav');				
+					$('body').removeClass('tablet-nav');
 				}
-				
+
 				mobile_old = mobile;
 				if ($('#media-query-trigger').css('visibility') == 'hidden') {
 					mobile = false;
@@ -48,7 +33,7 @@ jQuery.noConflict();
 				else {
 					mobile = true;
 				}
-				
+
 				if (mobile_old != mobile) {
 					changed = true;
 				}
@@ -56,12 +41,12 @@ jQuery.noConflict();
 					changed = false;
 				}
 			}
-			
+
 			menuWidthCheck();
-			
+
 			$(window).resize(function() {
 				menuWidthCheck();
-				
+
 				if (!mobile) {
 					menu.show();
 					searchBar.show();
@@ -69,22 +54,82 @@ jQuery.noConflict();
 				else {
 					if (changed) {
 						menu.hide();
-						searchBar.hide();	
+						searchBar.hide();
 					}
 				}
 			});
-			
-			/* toggle navigation and search in mobile view */		
+
+			/* toggle navigation and search in mobile view */
 			searchBarButton.click(function() {
-				menu.slideUp();													 
+				menu.slideUp();
 				searchBar.slideToggle(200);
 			});
-			
+
 			menuButton.click(function() {
-				searchBar.slideUp();													 
+				searchBar.slideUp();
 				menu.slideToggle(200);
-			});	
+			});
 		}
-		
-    });
+	});
+
+// ---------------------------------------------------------
+// Use of jQuery.browser is frowned upon.
+// More details: http://api.jquery.com/jQuery.browser
+// jQuery.uaMatch maintained for back-compat
+
+    jQuery.uaMatch = function( ua ) {
+        ua = ua.toLowerCase();
+
+        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+            /(msie) ([\w.]+)/.exec( ua ) ||
+            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+            [];
+
+        return {
+            browser: match[ 1 ] || "",
+            version: match[ 2 ] || "0"
+        };
+    };
+
+    matched = jQuery.uaMatch( navigator.userAgent );
+    browser = {};
+
+    if ( matched.browser ) {
+        browser[ matched.browser ] = true;
+        browser.version = matched.version;
+    }
+
+    // Chrome is Webkit, but Webkit is also Safari.
+    if ( browser.chrome ) {
+        browser.webkit = true;
+    } else if ( browser.webkit ) {
+        browser.safari = true;
+    }
+
+    jQuery.browser = browser;
+
+    jQuery.sub = function() {
+        function jQuerySub( selector, context ) {
+            return new jQuerySub.fn.init( selector, context );
+        }
+        jQuery.extend( true, jQuerySub, this );
+        jQuerySub.superclass = this;
+        jQuerySub.fn = jQuerySub.prototype = this();
+        jQuerySub.fn.constructor = jQuerySub;
+        jQuerySub.sub = this.sub;
+        jQuerySub.fn.init = function init( selector, context ) {
+            if ( context && context instanceof jQuery && !(context instanceof jQuerySub) ) {
+                context = jQuerySub( context );
+            }
+
+            return jQuery.fn.init.call( this, selector, context, rootjQuerySub );
+        };
+        jQuerySub.fn.init.prototype = jQuerySub.fn;
+        var rootjQuerySub = jQuerySub(document);
+        return jQuerySub;
+    };
+// ---------------------------------------------------------
+
 }(jQuery));

templates/Includes/BreadCrumbs.ss

@@ -1,5 +1,5 @@
-<% if Level(2) %>
+<% if $Level(2) %>
 	<div id="Breadcrumbs">
 	   	$Breadcrumbs
 	</div>
-<% end_if %>
+<% end_if %>

templates/Includes/Footer.ss

@@ -1,6 +1,10 @@
 <footer class="footer" role="contentinfo">
-	<div class="inner copy">
-		<div class="left">$SiteConfig.Title <span class="arrow">&rarr;</span> <% include Navigation %></div>
-		<small class="right">&copy; <a href="http://simple.innovatif.com/about/">Theme</a> by <a href="http://www.saratusar.com">Sara</a> (Innovatif) / Powered by <a href="http://silverstripe.org">Silverstripe</a></small>
+	<div class="inner">
+		<div class="unit size4of4 lastUnit">
+			<div class="left">
+				<a href="$BaseHref" class="brand" rel="home">$SiteConfig.Title</a>
+				<span class="arrow">&rarr;</span> <% include Navigation %></div>
+			<small class="right"><a href="http://simple.innovatif.com/about/">Theme</a> by Sara (Innovatif) / Powered by <a href="http://silverstripe.org">SilverStripe</a></small>
+		</div>
 	</div>
-</footer>
+</footer>

templates/Includes/Header.ss

@@ -1,17 +1,19 @@
 <header class="header" role="banner">
 	<div class="inner">
-		<a href="$BaseHref" class="brand" rel="home">
-			<h1>$SiteConfig.Title</h1>
-			<% if SiteConfig.Tagline %>
-			<p>$SiteConfig.Tagline</p>
+		<div class="unit size4of4 lastUnit">
+			<a href="$BaseHref" class="brand" rel="home">
+				<h1>$SiteConfig.Title</h1>
+				<% if $SiteConfig.Tagline %>
+				<p>$SiteConfig.Tagline</p>
+				<% end_if %>
+			</a>
+			<% if $SearchForm %>
+				<button class="search-dropdown-icon">L</button>
+				<div class="search-bar">
+					$SearchForm
+				</div>
 			<% end_if %>
-		</a>
-		<% if SearchForm %>
-			<span class="search-dropdown-icon">L</span>
-			<div class="search-bar">
-				$SearchForm
-			</div>		
-		<% end_if %>
-		<% include Navigation %>
+			<% include Navigation %>
+		</div>
 	</div>
-</header>
+</header>

templates/Includes/Navigation.ss

@@ -1,8 +1,8 @@
 <nav class="primary">
-	<span class="nav-open-button">²</span>
+	<button class="nav-open-button">²</button>
 	<ul>
-		<% loop Menu(1) %>	  
+		<% loop $Menu(1) %>
 			<li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
 		<% end_loop %>
 	</ul>
-</nav>
+</nav>

templates/Includes/SideBar.ss

@@ -1,16 +1,14 @@
-<aside>
-	<% if Menu(2) %>
+<aside class="sidebar unit size1of4">
+	<% if $Menu(2) %>
 		<nav class="secondary">
-			<h3>
-				<% loop Level(1) %>
-				$Title
-				<% end_loop %>
-			</h3>
-			<ul>
-				<% loop Menu(2) %>
-				<li class="$LinkingMode"><a href="$Link" title="Go to the $Title.XML page"><span class="arrow">&rarr;</span><span class="text">$MenuTitle.XML</span></a></li>
-				<% end_loop %>
-			</ul>
+			<% with $Level(1) %>
+				<h3>
+					$MenuTitle
+				</h3>
+				<ul>
+					<% include SidebarMenu %>
+				</ul>
+			<% end_with %>
 		</nav>
-	<% end_if %>  	
+	<% end_if %>
 </aside>

templates/Includes/SidebarMenu.ss

@@ -0,0 +1,20 @@
+<%--Include SidebarMenu recursively --%>
+<% 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 %>
+
+			</li>
+		<% end_loop %>
+	<% end_if %>
+<% end_if %>

templates/Layout/Page.ss

@@ -1,9 +1,9 @@
-<div class="content-container">	
+<% include SideBar %>
+<div class="content-container unit size3of4 lastUnit">
 	<article>
 		<h1>$Title</h1>
 		<div class="content">$Content</div>
 	</article>
 		$Form
-		$PageComments
-</div>
-<% include SideBar %>
+		$CommentsForm
+</div>

templates/Layout/Page_results.ss

@@ -1,50 +1,54 @@
 <div id="Content" class="searchResults">
     <h1>$Title</h1>
-     
-    <% if Query %>
-        <p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p>
+
+    <% if $Query %>
+        <p class="searchQuery">You searched for &quot;{$Query}&quot;</p>
     <% end_if %>
-         
-    <% if Results %>
+
+    <% if $Results %>
     <ul id="SearchResults">
-        <% control Results %>
+        <% loop $Results %>
         <li>
-            <a class="searchResultHeader" href="$Link">
-                <% if MenuTitle %>
-                $MenuTitle
-                <% else %>
-                $Title
-                <% end_if %>
-            </a>
-            <p>$Content.LimitWordCountXML</p>
+            <h4>
+                <a href="$Link">
+                    <% if $MenuTitle %>
+                    $MenuTitle
+                    <% else %>
+                    $Title
+                    <% end_if %>
+                </a>
+            </h4>
+            <% if $Content %>
+                <p>$Content.LimitWordCountXML</p>
+            <% end_if %>
             <a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a>
         </li>
-        <% end_control %>
+        <% end_loop %>
     </ul>
     <% else %>
     <p>Sorry, your search query did not return any results.</p>
     <% end_if %>
-             
-    <% if Results.MoreThanOnePage %>
+
+    <% if $Results.MoreThanOnePage %>
     <div id="PageNumbers">
         <div class="pagination">
-            <% if Results.NotFirstPage %>
+            <% if $Results.NotFirstPage %>
             <a class="prev" href="$Results.PrevLink" title="View the previous page">&larr;</a>
             <% end_if %>
             <span>
-                <% control Results.Pages %>
-                    <% if CurrentBool %>
+                <% loop $Results.Pages %>
+                    <% if $CurrentBool %>
                     $PageNum
                     <% else %>
                     <a href="$Link" title="View page number $PageNum" class="go-to-page">$PageNum</a>
                     <% end_if %>
-                <% end_control %>
+                <% end_loop %>
             </span>
-            <% if Results.NotLastPage %>
+            <% if $Results.NotLastPage %>
             <a class="next" href="$Results.NextLink" title="View the next page">&rarr;</a>
             <% end_if %>
-        </div>    
+        </div>
         <p>Page $Results.CurrentPage of $Results.TotalPages</p>
     </div>
     <% end_if %>
-</div>
+</div>

templates/Page.ss

@@ -14,29 +14,31 @@ Change it, enhance it and most importantly enjoy it!
 <!--[if IE 8 ]><html lang="$ContentLocale" class="ie ie8"><![endif]-->
 <head>
 	<% base_tag %>
-	<title><% if MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
+	<title><% if $MetaTitle %>$MetaTitle<% else %>$Title<% end_if %> &raquo; $SiteConfig.Title</title>
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	$MetaTags(false)
 	<!--[if lt IE 9]>
 	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
-	<% require themedCSS(reset) %>
-	<% require themedCSS(typography) %>
-	<% require themedCSS(form) %>	
-	<% require themedCSS(layout) %>
-	<link rel="shortcut icon" href="$ThemeDir/images/favicon.ico" />
+	<% require themedCSS('reset') %>
+	<% require themedCSS('typography') %>
+	<% require themedCSS('form') %>
+	<% require themedCSS('layout') %>
+	<link rel="shortcut icon" href="$resourceURL('themes/simple/images/favicon.ico')" />
 </head>
-<body class="$ClassName<% if Menu(2) %><% else %> no-sidebar<% end_if %>">
+<body class="$ClassName.ShortName<% if not $Menu(2) %> no-sidebar<% end_if %>" <% if $i18nScriptDirection %>dir="$i18nScriptDirection"<% end_if %>>
 <% include Header %>
 <div class="main" role="main">
-	<div class="inner typography">
+	<div class="inner typography line">
 		$Layout
 	</div>
 </div>
 <% include Footer %>
-<% require javascript(http://code.jquery.com/jquery-1.7.2.js) %>
-<% require javascript(themes/simple/javascript/script.js) %>
+
+<% require javascript('//code.jquery.com/jquery-3.3.1.min.js') %>
+<% require themedJavascript('script') %>
+
 </body>
-</html>
+</html>