Changed SCSS folder to CSS (Sass shouldn't be a requirement). Imported global patterns to new format

source/css/scss/base/_animation.scss

@@ -0,0 +1,13 @@
+.animate-fade {
+	@include transition(opacity, 0.3s, ease-out);
+
+	&:hover {
+		opacity: 0;
+	}
+}
+
+.animate-move {
+	> .demo-shape {
+		@include transition(all, 0.8s, ease-in-out);
+	}
+}

source/css/scss/base/_forms.scss

@@ -11,18 +11,10 @@ form ol, form ul {
 	margin-left: 0;
 }
 
-legend {
-	display: none;
-}
-
 fieldset {
 	border: 0;
 	padding: 0;
 	margin: 0;
-	
-	> div {
-		margin-bottom: $space;
-	}
 }
 
 label {
@@ -70,6 +62,11 @@ input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
+//Form Field Container
+.field-container {
+	margin-bottom: $space;
+}
+
 .inline-form {
 	
 	fieldset, .inline-container {
@@ -77,7 +74,7 @@ input[type="search"]::-webkit-search-decoration {
 	}
 	
 	input[type=submit], button, .btn {
-		@include font-size($font-slightly-smaller,medium);
+		font-size: $font-size-slightly-smaller;
 		padding: 0.65rem 1.3rem;
 		background: $gray-dark;
 		position: absolute;
@@ -114,50 +111,6 @@ input[type="search"]::-webkit-search-decoration {
 	}
 }
 
-.inline-search-results-form {
-
-::-webkit-input-placeholder {
-   font-size: 1.2em;
-}
-
-:-moz-placeholder { /* Firefox 18- */
-   font-size: 1.2em;  
-}
-
-::-moz-placeholder {  /* Firefox 19+ */
-   font-size: 1.2em;  
-}
-
-:-ms-input-placeholder {  
-   font-size: 1.2em;  
-}
-
-input.search-input {
-	font-size: 1.2em;
-	color: #111;
-}
-
-}
-
-
-h1.search-heading {
-	position: relative;
-	top: 0.5em;
-	@media all and (min-width: $bp-med) { top: 0.4em; }
-	@media all and (min-width: $bp-large) { top: 0.1em; }
-}
-
-
-.inline-select {
-	@include font-size(0.85,small);
-	background: transparent;
-	height: 3em;
-	-webkit-appearance: none;
-	border-radius: 0;
-	border: 0;
-	padding: 0 0.4em;
-}
-
 /* Validation */
 .has-error {
 	border-color: $error;
@@ -165,15 +118,6 @@ h1.search-heading {
 .is-valid {
 	border-color: $valid;
 }
-.error {
-	display: block;
-	color: $error;
-}
-.valid {
-	display: block;
-	color: $valid;
-}
-
 
 
 

source/css/scss/base/_global-classes.scss

@@ -61,70 +61,36 @@
 	text-align: left;
 }
 
-.uppercase { text-transform: uppercase; }
-
 /* Display Classes */
 .hide-small {
-	display: none;
+    @media all and (max-width: $bp-med) {
-	@media all and (min-width: $bp-med) {
+        display: none;
-		display: block;
+    }
-	}
 }
 
-.hide-small-med {
-	display: none;
-	@media all and (min-width: $bp-large) {
-		display: block;	
-	}
-}
-
-
 .hide-med {
-	@media all and (min-width: $bp-med) {
+    @media all and (min-width: $bp-med) and (max-width: $bp-large) {
-		display: none; 
+        display: none;
-	}
+    }
-}
-
-.hide-med-max {
-	@media all and (max-width: $bp-med) {
-		display: none;
-	}
 }
 
 .hide-large {
-	@media all and (min-width: $bp-large) {
+    @media all and (min-width: $bp-large) {
-		display: none;
+        display: none;
-	}
+    }
 }
 
-.hide-large-max {
+//
-	@media all and (max-width: $bp-large) {
+.valid {
-		display: none;
+	color: $valid;
-	}
 }
 
-.hide-xl {
+.error {
-	@media all and (min-width: $bp-xl) {
+	color: $error;
-		display: none;
-	}
 }
 
-.hide-small-large-show-medium {
+.info {
-	display: none;
+
-	@media all and (min-width: $bp-med) {
-		display: inline;
-	}
-	@media all and (min-width: $bp-large) {
-		display: none;
-	}
 }
 
-.hide-med-show-small-large {
-	@media all and (min-width: $bp-med) {
-		display: none;
-	}
-	@media all and (min-width: $bp-large) {
-		display: block;
-	}
-}
 

source/css/scss/base/_headings.scss

@@ -0,0 +1,31 @@
+/* Headings */
+/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */
+h1, .alpha   { 
+	line-height: 1.2;
+}
+
+h2, .beta    { 
+	line-height: 1.2;
+}
+
+h3, .gamma   { 
+	line-height: 1.2;
+}
+
+h4, .delta   {
+	
+}
+
+h5, .epsilon { 
+	
+}
+
+h6, .zeta    { 
+	
+}
+
+/* Subheadings */
+.subheading {
+	font-family: $font-secondary;
+	font-weight: normal;
+}

source/css/scss/base/_lists.scss

@@ -11,17 +11,9 @@ dl {
 }
 
 dt {
-	float: left;
-	clear: left;
 	font-weight: bold;
-	margin-right: 0.3em;
-	
-	&:after {
-		content: ": ";
-	}
 }
 
 dd {
-	float: left;
+	margin-left: 0;
-	margin: 0;
 }

source/css/scss/base/_main.scss

@@ -1,6 +1,6 @@
 body {
 	background: $white;
-	font: 100%/1.5 $font-secondary;
+	font: 100%/1.5 $font;
 	-webkit-text-size-adjust: 100%;
 	color: $gray-dark;
 }

source/css/scss/base/_text.scss

@@ -0,0 +1,26 @@
+/* Text-Related Elements */ 
+p {
+	margin-bottom: $space;
+}
+
+/* Blockquote */
+blockquote {
+    font-style:italic;
+    border-left: 1px solid $gray;
+    color: $gray;
+	padding-left: $pad;
+	margin-bottom: $space;
+}
+
+/* Horizontal Rule */ 
+hr {
+	border: 0;
+    height: 2px;
+    background: $gray-light-2;
+    margin: $space-double 0;
+}
+
+abbr {
+    border-bottom: 1px dotted $gray;
+    cursor: help;
+}

source/css/scss/generic/_variables.scss

@@ -2,7 +2,7 @@
     $VARIABLES
 \*------------------------------------*/
 
-/* Colors */
+//Colors
 $gray : #808080;
 $gray-light : #f9f9f9;
 $gray-light-2 : #eee;
@@ -24,25 +24,23 @@ $brand-facebook: #03539e;
 $brand-twitter: #35ccff;
 $brand-linkedin: #217bc1;
 
-/* Typography */
+//Typography
 $font : "HelveticaNeue", "Helvetica", "Arial", sans-serif;
-$font-secondary : "jaf-bernino-sans-condensed","HelveticaNeue", "Helvetica", "Arial", sans-serif;
+$font-secondary : Georgia, Times, "Times New Roman", serif;
-$font-size-norm : 1;
-$font-slightly-larger : 1.0625;
-$font-slightly-smaller : 0.875;
-$font-size-sm : 0.75;
-$font-size-large : 1.4375;
 
-/* Layout */
+$font-size-norm : 1em;
+$font-size-slightly-larger : 1.0625em;
+$font-size-slightly-smaller : 0.875em;
+$font-size-sm : 0.75em;
+$font-size-large : 1.4375em;
+
+//Layout
 $max-width: 82rem;
 $offset-left-1: 4.5rem;
 
 $l-sidebar-width: 19.75rem;
-$threecol-1-width: 18%;
-$threecol-main-width: 54%;
-$threecol-2-wdith: 28%;
 
-/* Defaults */
+//Defaults
 $space : 1rem;
 $space-and-half : $space*1.5;
 $space-double : $space*2;
@@ -56,19 +54,21 @@ $pad-double : $pad*2;
 $pad-half : $pad/2;
 $pad-quarter :$pad/4;
 
-/* Borders */
+//Borders
-$border-med: 4px;
+$border-med: 3px;
 $border-thick: 7px;
 
 
-/* Breakpoints */
+//Breakpoints
 $bp-small : 24em;
 $bp-small-2 : 29.75em;
 $bp-small-3 : 39.8em;
 $bp-med : 46.8em;
-$bp-med-2 : 50em;
+$bp-med-2 : 48em;
-$bp-large : 60em;
+$bp-large : 50em;
 $bp-large-2 : 66em;
 $bp-xl : 73em;
 $bp-xxl : 89em;
-$bp-xxxl : 93em;
+$bp-xxxl : 93em;
+
+//

source/css/scss/objects/_accordion.scss

@@ -26,7 +26,7 @@
 	&.active {
 		background: $gray-dark;
 
-		a:after {
+		&:after {
 			content:"-";
 		}
 	}

source/css/scss/objects/_article.scss

@@ -0,0 +1,52 @@
+//Article
+.article-header {
+	h1 {
+		font-size: 2.5em;
+	}
+}
+
+.byline {
+	font-size: $font-size-slightly-smaller;
+	font-style: italic;
+	margin-bottom: $space-half;
+}
+
+/* Wordpress Caption */
+.wp-caption-text {
+	font-style: italic;
+}
+
+// Review Summary
+.review-summary {
+	.grade {
+		width: 4.5em;
+		float: left;
+		margin: 0 $space-half 0 0;
+	}
+
+	.summary-text {
+		margin-left: 5em;
+	}
+}
+
+//Social Share
+.social-share {
+	overflow: hidden;
+	margin-bottom: $space;
+
+	li {
+		float: left;
+		margin-right: $space-quarter;
+	}
+
+	a {
+		background: $gray-dark;
+		color: $white;
+		display: block;
+		padding: $pad-half;
+
+		&:hover {
+			background: $gray;
+		}
+	}
+}

source/css/scss/objects/_blocks.scss

@@ -11,26 +11,37 @@
 .block {
 	overflow: hidden;
 
-	.headline {
-		margin: 0;
-		@include font-size($font-size-norm,medium);
-	}
-
 	p:last-child {
 		margin-bottom: 0;
 	}
 }
 
+.headline {
+	line-height: 1.2;
+}
+
 /* Hero Block */
 .block-hero {
+	margin-bottom: $space-half;
+
 	.b-thumb {
 		img {
 			display: block;
 		}
 	}
 
-	.headline {
+	@media all and (min-width: $bp-large) {
-		padding: $pad-half;
+		position: relative;
+
+		.b-text {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			background: $dim;
+			color: $white;
+			padding: $pad-and-half;
+		}
 	}
 }
 
@@ -42,54 +53,34 @@
 
 	.b-inner {
 		display: table-row;
+		vertical-align: top;
   		overflow: hidden;
 	}
 
 	.b-thumb {
-		display: table-cell;
+		@media all and (min-width: $bp-small-2) {
-  		vertical-align: middle;
+			display: table-cell;
-  		width: 30%;
+			vertical-align: top;	
-  		max-width: 10em;
+	  		width: 30%;
+	  		max-width: 10em;
 
- 		img {
+	 		img {
- 			display: block;
+	 			display: block;
-			  width: 100%;
+				  width: 100%;
-			  height: auto;
+				  height: auto;
+	 		}
  		}
 	}
 
 	.b-text {
-		display: table-cell;
+		@media all and (min-width: $bp-small-2) {
-		vertical-align: middle;
+			display: table-cell;
-		width: 70%;
+			width: 70%;
-		padding: 0 $pad-half;
+			padding: 0 $pad;
+		}
 	}
 }
 
-/* Block Small Thumbnail with Headline */
-.block-thumb-small {
-	.b-thumb {
-		width: 20%;
-		max-width: 6em;
-	}
-
-	.b-text {
-		width: 80%;
-	}
-}
-
-
-/* Headline-only block */
-.block-headline {
-	a {
-		display: block;
-		padding: $pad-half;
-	}
-
-	.headline, .byline {
-		display: inline;
-	}
-}
 
 /* Block Headline Summary */
 .block-headline-summary {
@@ -109,18 +100,11 @@
 
 		img {
 			display: block;
+			margin-bottom: $space-half;
 		}
 	}
 
-	.b-text {
+	
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		background: $dim;
-		color: $white;
-		padding: $pad-half;
-	}
 }
 
 /* Block Thumb with Summary */

source/css/scss/objects/_buttons.scss

@@ -11,9 +11,14 @@
 	border: 0;
 	text-align: center;
 	
-	&:hover {
+	&:hover, &:focus {
 		color: $white;
 	}
+
+	&.disabled {
+		background: $gray-light-2;
+		color: $gray-light-4;
+	}
 }
 
 .btn-small {

source/css/scss/objects/_comments.scss

@@ -0,0 +1,29 @@
+.comments {
+	li {
+		margin-bottom: $space;
+	}
+}
+
+.comment-container {
+	overflow: hidden;
+	margin-bottom: $space;
+}
+
+.comment-meta {
+	float: left;
+	width: 6.5em;
+
+	img {
+		display: block;
+		border: 1px solid $gray-light-2;
+		margin-bottom: $space-half;
+	}
+}
+
+.comment-name {
+	font-size: $font-size-sm;
+}
+
+.comment-text {
+	margin-left: 9em;
+}

source/css/scss/objects/_footer.scss

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    $FOOTER
+\*------------------------------------*/
+.footer {
+	clear: both;
+	overflow: hidden;
+	background: $gray-dark-2;
+	color: $white;
+	line-height: 1.2;
+
+	.lc {
+		padding: $pad $pad 0;
+	}
+
+
+	a {
+		color: $gray-light;
+	}
+
+	
+}
+
+//Footer Nav
+.nav-footer {
+	margin: (-$pad) (-$pad) $space;
+
+	li {
+		border-bottom: 1px solid $gray-dark;
+
+		@media all and (min-width: $bp-med) {
+			border: 0;
+			float: left;
+		}
+	}
+
+	a {
+		display: block;
+		padding: $pad;
+	}
+}
+
+.copyright {
+	@media all and (min-width: $bp-med) {
+			float: right;
+		}
+}

source/css/scss/objects/_header.scss

@@ -3,21 +3,16 @@
 	padding: 0;
 	border-bottom: 1px solid #dbdbdb;
 	@extend .lc;
-
-	.search-form {
-		overflow: hidden;
-		max-height: 0;
-
-		&.active {
-			max-height: 8em;
-		}
-	}
 }
 
 .logo {
 	float: left;
-	max-width: 11rem;
+	max-width: 8rem;
 	margin: 0.4rem;
+
+	@media all and (min-width: $bp-med) {
+		max-width: 9rem;
+	}
 }
 
 .nav-toggle {
@@ -28,8 +23,18 @@
 	line-height: 1;
 	border-left: 1px solid #dbdbdb;
 
-	&.active {
+	@media all and (min-width: $bp-med) {
-		background: $gray-dark-2;
+		display: none;
-		color: $white;
+	}
+}
+
+.search-form {
+	overflow: hidden;
+	max-height: 0;
+
+	@media all and (min-width: $bp-med) {
+		float: right;
+		max-height: none;
+		margin: 0.65em 0.5em 0 0;
 	}
 }

source/css/scss/objects/_layout.scss

@@ -7,147 +7,37 @@
 	max-width: $max-width;	
 	margin: 0 auto;
 	padding: $pad-half;
-
-	&.flush {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-}
-
-.box {
-	padding: $pad-half;
-	margin-bottom: $space;
 }
 
 /*------------------------------------*\
     $TEMPLATES
 \*------------------------------------*/
-/* Main Column Container */
-.l-main-container {
-	float: left;
-	width: 100%;
-}
 
 /* Two Column Layout */
 .l-two-col {
 	@extend .cf;
 
-	> .l-main-container > .l-main {
-		@media all and (min-width: $bp-large) {
-			margin-right: $l-sidebar-width;
-			padding-right: $pad;
-		}
-	}
-	
-	> .l-sidebar {
-		@media all and (max-width: $bp-large) {
-			clear: both;
-		}
-
-		@media all and (min-width: $bp-large) {
-			float: left;
-			width: $l-sidebar-width;
-			margin-left: (-$l-sidebar-width);
-			padding-left: $pad;
-		}
-	}
-}
-
-/* Two Column Layout */
-.l-two-col-alt {
-	@extend .cf;
-
-	> .l-sidebar {
-		@media all and (max-width: $bp-large) {
-			clear: both;
-		}
-		
-		@media all and (min-width: $bp-large) {
-			float: left;
-			width: 15rem;
-			padding-left: $pad;
-		}
-	}
-	
 	.l-main {
 		@media all and (min-width: $bp-large) {
-			margin-left: 15rem;
+			float: left;
-		}
+			width: 70%;
-	}
-}
-
-/* Three Column Layout */
-.l-three-col {
-	@extend .cf;
-
-	> .l-main-container > .l-main {
-		@media all and (min-width: $bp-med) and (max-width: $bp-large) {
-			padding: 0 3rem;
-		}
-		
-		@media all and (min-width: $bp-large) {
-			margin-right: $l-sidebar-width;
 			padding-right: $pad;
 		}
-		
-		@media all and (min-width: $bp-xl) {
-			margin-left: 18%;
-			padding-left: $pad-double;
-		}
 	}
 	
-	/* Left Sidebar */
+	.l-sidebar {
-	.l-sidebar-1 {
-		display: none; /* Initially hidden */
-		
-		@media all and (min-width: $bp-xl) {
-			display: block;
-			float: left;
-			width: 18%;
-			margin-left: -100%;
-		}
-	}
-	
-	.l-sidebar-2 {
-		@media all and (min-width: $bp-med) and (max-width: $bp-large) {
-			padding: 0 3rem;
-		}
-		
 		@media all and (max-width: $bp-large) {
 			clear: both;
 		}
-	
+
 		@media all and (min-width: $bp-large) {
 			float: left;
-			width: $l-sidebar-width;
+			width: 30%;
-			margin-left: (-$l-sidebar-width);
+			padding: 0 0 0 $pad;
-			padding-left: $pad;
 		}
 	}
 }
 
-.l-two-col-expose {
-	
-	> .l-main-container > .l-main {
-		@media all and (min-width: $bp-xl) {
-			margin-left: 18%;
-			padding-left: $pad-double;
-		}
-	}
-
-	> .l-sidebar {
-		display: none;
-
-		@media all and (min-width: $bp-xl) {
-			display: block;
-			float: left;
-			width: 18%;
-			margin-left: -100%;
-		}
-	}
-	
-}
-
 
 /*------------------------------------*\
     $GRIDS

source/css/scss/objects/_lists.scss

@@ -18,15 +18,26 @@
 
 /* Headline List */
 .headline-list {
-	border-top: 1px solid $gray-light-3;
 	margin-bottom: $space;
 
 	&.flush {
 		margin: 0;
 	}
 
+	h4 {
+		font-weight: normal;
+	}
+
 	li {
-		border-bottom: 1px solid $gray-light-3;
+		padding: $pad-quarter 0;
+		border-top: 1px solid $gray-light-3;
+	}
+}
+
+/* Post List */
+.post-list {
+	li {
+		margin-bottom: $space;
 	}
 }
 

source/css/scss/objects/_main.scss

@@ -2,7 +2,7 @@
     $MAIN CONTENT AREA
 \*------------------------------------*/
 [role=main] {
-	padding: 0;
+	padding: $pad-half $pad-half $pad-double;
 	overflow: hidden;
 	@extend .lc;
 	@extend .cf;

source/css/scss/objects/_nav.scss

@@ -0,0 +1,52 @@
+/*------------------------------------*\
+    $NAVIGATION
+\*------------------------------------*/
+
+.nav {
+	clear: both;
+	overflow: hidden;
+	max-height: 0;
+	
+	a {
+		display: block;
+		padding: $pad;
+		border-top: 1px solid $gray-light-2;
+	}
+
+	&.active {
+		max-height: 40em;
+	}
+
+	@media all and (min-width: $bp-med) {
+		max-height: none;
+		float: right;
+		clear: none;
+
+		li {
+			float: left;
+		}
+
+		a {
+			border: 0;
+		}
+		
+	}
+}
+
+//Pagination
+.pagination {
+	overflow: hidden;
+
+	li {
+		float: left;
+		border-right: 1px solid $gray-light-2;
+
+		&:last-child {
+			border: 0;
+		}
+	}
+
+	a {
+		padding: $pad;
+	}
+}

source/css/scss/objects/_sections.scss

@@ -0,0 +1,7 @@
+.section {
+	margin: 0 0 $space;
+}
+
+.section-title {
+	margin-bottom: $space-half;
+}

source/css/scss/objects/_tabs.scss

@@ -20,7 +20,6 @@
 		display: block;
 		padding: $pad-half;
 		background: $gray;
-		text-transform: uppercase;
 
 		&:hover, &:focus {
 			background: $gray-light-3;

source/css/scss/objects/_text.scss

@@ -0,0 +1,77 @@
+/* Global Font Classes */
+.font-secondary {
+	font-family: $font-secondary;
+}
+
+//Intro text
+.intro {
+	font-size: $font-size-slightly-larger;
+	font-weight: bold;
+}
+
+//Pullquote
+.pullquote {
+	font-family: $font-secondary;
+	font-size: $font-size-large;
+}
+
+//Text Passages
+.text {
+	a {
+		text-decoration: underline;
+	}
+
+	ul {
+		list-style: disc;
+		margin: 0 0 $space 1.2em;
+
+		ul {
+			margin-bottom: 0;
+		}
+	}
+
+	ol {
+		list-style: decimal;
+		margin: 0 0 $space 1.2em;
+
+		ol {
+			margin-bottom: 0;
+		}
+	}
+}
+
+/* Review Grade Tile */
+.grade {
+	display: block;
+	font-weight: bold;
+	background: $gray;
+	color: $white;
+	min-height: 4.5rem;
+	padding-top: 1.5rem;
+	text-align: center;
+}
+
+/* Eyebrow */
+.eyebrow {
+	background: $gray-dark;
+	color: $white;
+	padding: 0.2em;
+	display: inline-block;
+	margin-bottom: $space-half;
+}
+
+.eyebrow-image {
+	position: relative;
+	
+	img {
+		position: relative;
+		z-index: 0;
+	}
+
+	.eyebrow {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 1;
+	}
+}

source/css/style.scss

@@ -46,6 +46,7 @@
 @import "scss/base/media";
 @import "scss/base/forms";
 @import "scss/base/tables";
+@import "scss/base/animation";
 
 
 
@@ -78,17 +79,12 @@
 \*------------------------------------*/
 @import "scss/objects/icons";
 @import "scss/objects/buttons";
-@import "scss/objects/tags";
 @import "scss/objects/blocks";
 @import "scss/objects/lists";
-@import "scss/objects/announcement";
 @import "scss/objects/tooltip";
 @import "scss/objects/accordion";
 @import "scss/objects/tabs";
-@import "scss/objects/carousels";
+@import "scss/objects/sections";
-@import "scss/objects/slideshow";
-@import "scss/objects/ads";
-
 @import "scss/objects/article";
 @import "scss/objects/comments";
 

source/patterns/a-global-animations/a-global-animations.mustache

@@ -0,0 +1,3 @@
+<div class="demo-animate animate-fade"><strong>Fade:</strong> Duration: 0.3s Easing: ease-out (Hover to see effect)</div>
+
+<div class="demo-animate animate-move"><div class="demo-shape"></div><strong>Movement:</strong> Duration: 0.8s  Easing: ease-in-out; (Hover to see effect)</div>

source/patterns/a-global-colors/a-global-colors.mustache

@@ -0,0 +1,38 @@
+<ul class="sg-colors">
+	<li>
+		<span class="sg-swatch" style="background: #ff0000;"></span>
+		<span class="sg-label">#ff0000</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #00ff00;"></span>
+		<span class="sg-label">#00ff00</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #0000ff;"></span>
+		<span class="sg-label">#0000ff</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #ffff00;"></span>
+		<span class="sg-label">#ffff00</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #00ffff;"></span>
+		<span class="sg-label">#00ffff</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #ff00ff;"></span>
+		<span class="sg-label">#ff00ff</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #ffffff;"></span>
+		<span class="sg-label">#ffffff</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #808080;"></span>
+		<span class="sg-label">#808080</span>
+	</li>
+	<li>
+		<span class="sg-swatch" style="background: #000000;"></span>
+		<span class="sg-label">#000000</span>
+	</li>
+</ul>

source/patterns/a-global-fonts/a-global-fonts.mustache

@@ -0,0 +1,6 @@
+<p>Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</p>
+<p><em>Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</em></p>
+<p><strong>Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;</strong></p>
+<p class="font-secondary">Secondary font: Georgia, Times, "Times New Roman", serif;</p>
+<p class="font-secondary"><em>Secondary font italic: Georgia, Times, "Times New Roman", serif;</em></p>
+<p class="font-secondary"><strong>Secondary font bold: Georgia, Times, "Times New Roman", serif;</strong></p>

source/patterns/a-global-visibility/a-global-visibility.mustache

@@ -0,0 +1,11 @@
+<p class="hide-small">This text is hidden on smaller screens</p>
+
+<p class="hide-med hide-large"><em>This text is only visible on smaller screens</em></p>
+
+<p class="hide-med">This text is hidden on medium screens only</p>
+
+<p class="hide-small hide-large"><em>This text is only visible on medium screens</em></p>
+
+<p class="hide-large">This text is hidden on large screens</p>
+
+<p class="hide-small hide-med"><em>This text is only visible on large screens</em></p>

source/patterns/a-text-blockquote/a-text-blockquote.mustache

@@ -0,0 +1,3 @@
+<blockquote>
+	<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
+</blockquote>

source/patterns/a-text-inline-a/a-text-inline-a.mustache

@@ -1 +0,0 @@
-<a href="#">This is a text link</a>

source/patterns/a-text-inline-abbr/a-text-inline-abbr.mustache

@@ -1 +0,0 @@
-Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>

source/patterns/a-text-inline-address/a-text-inline-address.mustache

@@ -1 +0,0 @@
-<address>{{{ atoms.text.address }}}</address>

source/patterns/a-text-inline-blockquote/a-text-inline-blockquote.mustache

@@ -1,3 +0,0 @@
-<blockquote>
-	<p>{{ atoms.text.blockquotep }}</p>
-</blockquote>

source/patterns/a-text-inline-code/a-text-inline-code.mustache

@@ -1 +0,0 @@
-<code>This is what code looks like.</code>

source/patterns/a-text-inline-del/a-text-inline-del.mustache

@@ -1 +0,0 @@
-<del>This text is deleted</del>

source/patterns/a-text-inline-elements/a-text-inline-elements.mustache

@@ -0,0 +1,41 @@
+<div class="text">
+	<p><a href="#">This is a text link</a></p>
+
+	<p><strong>Strong is used to indicate strong importance</strong></p>
+
+	<p><em>This text has added emphasis</em></p>
+
+	<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
+
+	<p>The <i>i element</i> is text that is set off from the normal text</p>
+
+	<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
+
+	<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
+
+	<p><s>This text has a strikethrough</s></p>
+
+	<p>Superscript<sup>®</sup></p>
+
+	<p>Subscript for things like H<sub>2</sub>O</p>
+
+	<p><small>This small text is small for for fine print, etc.</small></p>
+
+	<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
+
+	<p>Keybord input: <kbd>Cmd</kbd></p>
+
+	<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
+
+	<p><cite>This is a citation</cite>
+
+	</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
+
+	<p>The <mark>mark element</mark> indicates a highlight</p>
+
+	<p><code>This is what inline code looks like.</code></p>
+
+	<p><samp>This is sample output from a computer program</samp></p>
+
+	<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
+</div><!--end .text-->

source/patterns/a-text-inline-em/a-text-inline-em.mustache

@@ -1 +0,0 @@
-<em>This text has added emphasis</em>

source/patterns/a-text-inline-q/a-text-inline-q.mustache

@@ -1 +0,0 @@
-<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q>

source/patterns/a-text-inline-strong/a-text-inline-strong.mustache

@@ -1 +0,0 @@
-<strong>Strong is used to indicate strong importance</strong>

source/patterns/a-text-inline-sup/a-text-inline-sup.mustache

@@ -1 +0,0 @@
-Superscript<sup>&reg;</sup>

source/scss/base/_headings.scss

@@ -1,51 +0,0 @@
-/* Headings */
-/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */
-h1, .alpha   { 
-	@include font-size(2.4375, xx-large);
-}
-
-h2, .beta    { 
-	font-family: $font-secondary;
-	@include font-size(1.2, x-large);
-	line-height: 1.3;
-	margin: 0 0 $space-quarter;
-	
-	@media all and (min-width: $bp-med) {
-		@include font-size($font-size-large, x-large);
-		margin-bottom: $space;
-	}
-}
-
-h3, .gamma   { 
-	margin: 0 0 $space-quarter;
-	font-family: $font-secondary;
-	line-height: 1.3;
-	@include font-size(1, large);
-}
-
-h4, .delta   {
-	margin: 0 0 $space-quarter;
-	font-family: $font-secondary;
-	@include font-size(1, large);
-	line-height: 1.2;
-}
-
-h5, .epsilon { 
-	margin: 0 0 $space-quarter;
-	font-family: $font-secondary;
-	@include font-size(1, normal);
-}
-
-h6, .zeta    { 
-	margin: 0 0 $space-quarter;
-	font-family: $font-secondary;
-@include font-size(1.1, x-large);
-}
-
-hgroup {
-	margin-bottom: $space;
-}
-
-hgroup h1, hgroup h2, hgroup h3 {
-	margin: 0;
-}

source/scss/base/_text.scss

@@ -1,98 +0,0 @@
-/* Text-Related Elements */ 
-p {
-	margin-bottom: $space;
-}
-
-/* Blockquote */
-
-blockquote {
-	font-family:$font;
-    font-style:italic;
-    font-size:$font-size-norm;
-    border-left:6px solid $gray;
-    color: $gray;
-    line-height:$space-double;
-	padding-left: $pad;
-	margin-bottom: $space;
-}
-
-
-.pullquote blockquote {
-	font-family:$font;
-    font-style:italic;
-    border:none;
-    font-size:$font-size-norm;
-    line-height:$space-and-half;
-	padding-left: $pad+$pad/2;
-	margin-bottom: $space;
-    margin-top: -1rem;
-	
-    cite{
-        position:absolute;
-        padding-left:$pad-double+$pad;
-    }
-    
-    &:before {
-        content:" ";
-        height:1.2rem;
-        display:block;
-        position:relative;
-        left:-2.2rem;
-        top: 1.125rem;
-        background: url(/patterns/images/quote-mark-b.png) no-repeat;
-        background-size: 1.5rem;
-    } 
-    &:after{
-        content:" . ";
-        color:transparent;
-        display:inline-block;
-        width:1.5rem;
-        background: url(/patterns/images/quote-mark-e.png) no-repeat 0.250rem -0.125rem;
-        background-size:1.1rem;  
-    }
-    @media all and (min-width: $bp-med) {
-        font-size:1.6rem; 
-        line-height: 1.2;
-            &:before {
-                background-size:2rem;
-            }    
-            &:after{
-                background-size:1.4rem;  
-                }    
-    }     
-    @media all and (min-width: $bp-large) {
-		font-size: 2.34rem;
-        font-siez:$font-size-norm;
-		line-height: 1.155;
-        padding-left: $pad-double+$pad;
-        
-        &:before {
-            height:2.2rem;
-            background-size: 3.5rem;
-            top: 1.563rem;
-            left: -4rem;
-            }
-        &:after{
-            background-position: 0.4rem -0.18rem;
-            background-size: 2rem;
-            width:3rem;
-            }         
-	}
-}
-
-
-
-/* Horizontal Rule */ 
-hr {
-	border: 0;
-    height: 1px;
-    background: $gray;
-    margin: $space-double 0;
-}
-
-small {
-	font-size: 0.7rem;
-	font-weight: bold;
-	color: $gray;
-	text-transform: uppercase;
-}

source/scss/objects/_announcement.scss

@@ -1,53 +0,0 @@
-/* Callouts */
-.announcement {
-	background: $gray-dark;
-
-	@include font-size($font-size-sm,small);
-	
-	.lc {
-		padding: $pad-half $pad;
-	}
-	
-	a {
-		display: block;
-		color: $white;
-	}
-
-
-	@media all and (min-width: $bp-med) {
-		font-size: $font-size-norm;
-	}
-}
-
-div.live-event-name { 
-	display: block;
-	@media all and (min-width: $bp-med) {
-		float: left; 
-	}
-}
-
-div.live-event-more-link { 
-	display: block;
-	margin-top: $pad-quarter;
-	@media all and (min-width: $bp-med) {
-		float: right;
-		margin-top: 0;
-	}
-}
-
-.live { color: red; }
-
-.new-stories {
-	background: $gray-light-3;
-	padding: $pad-half 0;
-	margin-bottom: $pad;
-	p { color: $black; margin-bottom: 0; }
-}
-
-.placeholder {
-	padding: 8em 0;
-	margin-bottom: $pad;
-}
-
-
-

source/scss/objects/_article.scss

@@ -1,25 +0,0 @@
-.article {
-	padding: $pad-half;
-
-	.byline {
-		margin-bottom: $space-half;
-	}
-}
-
-/* Wordpress Caption */
-.wp-caption-text {
-	font-style: italic;
-}
-
-/* Review Summary */
-.review-summary {
-	.grade {
-		width: 4.5em;
-		float: left;
-		margin: 0 $space-half 0 0;
-	}
-
-	.summary-text {
-		margin-left: 5em;
-	}
-}

source/scss/objects/_comments.scss

@@ -1,97 +0,0 @@
-.comments-btn {
-	display: block;
-	margin-bottom: $space;
-	
-	@media all and (min-width: $bp-med) {
-		display: none;
-	}
-}
-
-.comment-form {
-	margin-bottom: $space;
-}
-
-.fyre-stream-content {
-	margin-bottom: $space-double;
-}
-
-.fyre-comment-article {
-	overflow: hidden;
-	position: relative;
-	margin-bottom: $space-half;
-	font-size: 0.9rem;
-
-	&:last-child {
-		.fyre-comment-footer {
-			border-bottom: 0;
-		}
-	}
-}
-
-.fyre-comment-user {
-	float: left;
-	width: $offset-left-1;
-	padding-right: $pad;
-
-	img {
-		border-radius: 10px;
-	}
-}
-.fyre-comment-username {
-	color: $gray;
-	font-size: 1rem;
-}
-
-.fyre-comment-date {
-	position: absolute;
-	top: 0.23rem;
-	right: 0;
-	color: $gray-light-3;
-	font-size: 0.7rem;
-
-	&:hover, &:focus {
-		color: $gray;
-	}
-}	
-
-.fyre-comment-head {
-	margin: 0 0 $space-half $offset-left-1;
-}
-
-.fyre-comment {
-	margin-left: $offset-left-1;
-}
-
-.fyre-comment-footer {
-	margin-left: $offset-left-1;
-	@include font-size($font-size-sm, small);
-	overflow: hidden;
-	padding-bottom: $pad-half;
-	border-bottom: 1px solid $gray-light-2;
-
-	a {
-		color: $gray;
-		font-weight: bold;
-
-		&:hover, &:focus {
-			color: $gray;
-		}
-	}
-}
-
-.fyre-comment-actions {
-	float:left;
-}
-
-.fyre-flag-link {
-	padding: 0 $pad-half;
-}
-
-.fyre-comment-like {
-	float: right;
-}
-
-.fyre-comment-reply {
-	float: right;
-	padding: 0 $pad-half;
-}

source/scss/objects/_footer.scss

@@ -1,21 +0,0 @@
-/*------------------------------------*\
-    $FOOTER
-\*------------------------------------*/
-.footer {
-	clear: both;
-	overflow: hidden;
-	background: $gray-dark-2;
-	color: $white;
-	line-height: 1.2;
-
-	.lc {
-		padding: $pad $pad 0;
-	}
-
-
-	a {
-		color: $gray-light;
-	}
-
-	
-}

source/scss/objects/_nav.scss

@@ -1,13 +0,0 @@
-/*------------------------------------*\
-    $NAVIGATION
-\*------------------------------------*/
-
-.nav {
-	clear: both;
-	overflow: hidden;
-	max-height: 0;
-
-	&.active {
-		max-height: 40em;
-	}
-}

source/scss/objects/_show.scss

@@ -1,18 +0,0 @@
-.show-index .block-inset .block-title {
-	position: relative;
-	background-color: $gray-dark;
-	@media all and (min-width: $bp-large) {
-		background-color: $dim;
-		position: absolute;
-		bottom: 0.3em;
-	}
-}
-
-.show-index .block h2 {
-	margin-top: $pad-half;
-}
-
-.show-index .block-title h2 {
-	margin-top: 0em;
-	padding: $pad-quarter;
-}

source/scss/objects/_slideshow.scss

@@ -1,17 +0,0 @@
-.slideshow {
-	margin-bottom: $space;
-}
-
-.sideshow-nav {
-	overflow: hidden;
-	
-	ul {
-		width: 9999999em;
-	}
-	
-	li {
-		float: left;
-		max-width: 8em;
-		margin-right: $pad-half;
-	}
-}

source/scss/objects/_tags.scss

@@ -1,44 +0,0 @@
-.tags {
-	margin-bottom: $space-half;
-}
-
-.page-title .tags {
-	@media all and (min-width: $bp-xl) {
-		display: none;
-	}
-}
-
-.tag {
-	font-family: Tahoma, Verdana, Segoe, sans-serif;
-	font-weight: bold;
-	@include font-size($font-size-sm, small);
-	line-height: 1;
-	display: inline-block;
-	background: $gray-dark;
-	color: $white;
-	padding: 0.5rem;
-	margin-right: $space-half;
-	position: relative;	
-
-	&:after {
-		content: "";
-	   position: absolute;
-	   top: 100%;
-	   left: 50%;
-	   display: inline-block;
-	   margin-left: -5px;
-	   border-top: 5px solid $gray-dark;
-	   border-top-color: $gray-dark; 
-	   border-left: 5px solid transparent;
-	   border-right: 5px solid transparent; 
-	}
-	
-	&:hover {
-		background: $gray;
-		color: $white;
-
-		&:after {
-			border-top-color: $gray;
-		}
-	}
-}

source/scss/objects/_text.scss

@@ -1,40 +0,0 @@
-/* Passages of Text */
-.text {
-	
-}
-
-/* Review Grade Tile */
-.grade {
-	display: block;
-	font-weight: bold;
-	background: $gray;
-	color: $white;
-	min-height: 4.5rem;
-	padding-top: 1.5rem;
-	text-align: center;
-}
-
-/* Eyebrow */
-.eyebrow {
-	background: $gray-dark;
-	color: $white;
-	padding: 0.2em;
-	display: inline-block;
-	margin-bottom: $space-half;
-}
-
-.eyebrow-image {
-	position: relative;
-	
-	img {
-		position: relative;
-		z-index: 0;
-	}
-
-	.eyebrow {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-	}
-}