diff --git a/includes/masterlist.php b/includes/masterlist.php
index 72248516..feebe9f2 100644
--- a/includes/masterlist.php
+++ b/includes/masterlist.php
@@ -1313,6 +1313,12 @@
 			"Dan Mall",
 			"http://danielmall.com/",
 	),
+	array(
+			"221",
+			"Mid Century Modern",
+			"Andrew Lohman",
+			"http://andrewlohman.com/",
+	),
 
 );
 
diff --git a/mid-century-modern/css/style.css b/mid-century-modern/css/style.css
new file mode 100755
index 00000000..dc9f5b85
--- /dev/null
+++ b/mid-century-modern/css/style.css
@@ -0,0 +1,978 @@
+
+/* TYPEKIT_KIT_ID: rwn5lgb */
+
+/* 
+==========================================================================
+Reset
+==========================================================================
+*/
+
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}
+audio,canvas,video {display: inline-block;}
+audio:not([controls]) {display: none;height: 0;}
+[hidden] {display: none;}
+html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
+body {margin: 0;}
+a:focus {outline: thin dotted;}
+a:active,a:hover {outline: 0;}
+h1 {font-size: 2em;margin: 0.67em 0;}
+abbr[title] {border-bottom: 1px dotted;}
+b,strong {font-weight: bold;}
+dfn {font-style: italic;}
+hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}
+mark {background: #ff0;color: #000;}
+code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em;}
+pre {white-space: pre-wrap;}
+q {quotes: "\201C" "\201D" "\2018" "\2019";}
+small {font-size: 80%;}
+sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
+sup {top: -0.5em;}
+sub {bottom: -0.25em;}
+img {border: 0;}
+svg:not(:root) {overflow: hidden;}
+figure {margin: 0;}
+fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}
+legend {border: 0;padding: 0;}
+button,input,select,textarea {font-family: inherit;font-size: 100%;margin: 0;}
+button,input {line-height: normal;}
+button,select {text-transform: none;}
+button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance: button;cursor: pointer;}
+button[disabled],html input[disabled] {cursor: default;}
+input[type="checkbox"],input[type="radio"] {box-sizing: border-box;padding: 0;}
+input[type="search"] {-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
+button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}
+textarea {overflow: auto;vertical-align: top;}
+table {border-collapse: collapse;border-spacing: 0;}
+
+/* 
+==========================================================================
+Some globals
+==========================================================================
+*/
+abbr[title],
+acronym[title] {
+  border-bottom-width: 0;
+}
+html,
+body {
+  font-family: "ff-meta-web-pro", sans-serif;
+  text-rendering: optimizeLegibility;
+  font-size: 100%;
+  line-height: 26px;
+  background: #f6efe5;
+  background-size: 60%;
+  color: #0d2c40;
+}
+a {
+  color: #0d2c40;
+  text-decoration: none;
+  border-bottom: 1px solid #0d2c40;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+/* 
+==========================================================================
+Page wrapper
+==========================================================================
+*/
+.page-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 120em;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+/* 
+==========================================================================
+Intro
+==========================================================================
+*/
+.intro {
+  overflow: hidden;
+}
+.intro header {
+  position: relative;
+  background: #c879b2;
+  overflow: hidden;
+  width: 40%;
+  height: 50em;
+  float: left;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -o-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+  @media (max-width: 70em) {
+    .intro header {
+      background: #f15a30;
+      width: 100%;
+      height: 27em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro header {
+      height: 20em;
+    }
+  }
+.intro header h1 {
+  position: absolute;
+  color: #ffffff;
+  font-size: 100%;
+  line-height: 2em;
+  top: 4.2em;
+  left: -3em;
+  width: auto;
+  margin: 0;
+  padding: 1em;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.intro header h2 {
+  position: relative;
+  background: #0d2c40 url(../img/icon-star.svg) no-repeat left bottom;
+  background-size: 101%;
+  float: right;
+  color: #ffffff;
+  font-size: 250%;
+  line-height: 1.25em;
+  width: 50%;
+  height: 20.019em;
+  margin: 0 0 0 0;
+  padding: 6em 0.5em 0 0.5em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro header h2 {
+      background: #0d2c40 url(../img/icon-star.svg) no-repeat left bottom;
+      background-size: 49%;
+      width: 66.666%;
+      height: 11em;
+      padding: 1em 0.5em 0 0.5em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro header h2 {
+      background: #0d2c40 url(../img/icon-star.svg) no-repeat left bottom;
+      background-size: 49%;
+      font-size: 200%;
+      width: 66.666%;
+      height: 10em;
+      padding: 1em 0.5em 0 0.5em;
+    }
+  }
+.intro .summary {
+  font-size: 100%;
+  color: #ffffff;
+  width: 60%;
+  float: left;
+  background: #c879b2 url(../img/icons-3-pack.svg);
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 101%;
+  height: 50em;
+  margin: 0;
+  padding: 16.3em 2em 10em 2em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .summary {
+      width: 100%;
+      height: auto;
+      padding: 2em 1em 37% 1em;
+    }
+  }
+.intro .summary p {
+  padding: 0 40% 2em 0 ;
+  margin: 0;
+}
+  @media (max-width: 70em) {
+    .intro .summary p {
+      padding: 0 0 1em 35%;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .summary p {
+      padding: 0 0 1em 0;
+    }
+  }
+.intro .summary a {
+  color: #ffffff;
+  text-decoration: none;
+  border-bottom: 1px solid #ffffff;
+}
+.intro .summary a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+.intro .preamble {
+  position: relative;
+  float: left;
+  width: 60.1%;
+  margin: 0 0 0 20%;
+  padding: 8em 0.5em 32em 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .preamble {
+      width: 100%;
+      margin: 0 0 0 0;
+      padding: 2em 1em 28em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .preamble {
+      overflow: hidden;
+      width: 100%;
+      margin: 0;
+      padding: 0 1em;
+    }
+  }
+.intro .preamble h3 {
+  font-size: 150%;
+  margin-right: 35%;
+}
+  @media (max-width: 53em) {
+    .intro .preamble h3 {
+      margin-right: 0;
+    }
+  }
+.intro .preamble p {
+  margin-right: 35%;
+}
+  @media (max-width: 53em) {
+    .intro .preamble p {
+      margin-right: 0;
+    }
+  }
+.intro .preamble p:last-child {
+  position: absolute;
+  z-index: 2;
+  color: #ffffff;
+  background: rgba(0, 188, 217, 0.8);
+  width: 33.650%;
+  top: -1em;
+  right: 0;
+  margin-right: 0;
+  padding: 10em 1em 20em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .intro .preamble p:last-child {
+      background: rgba(239, 54, 5, 0.8);
+      width: 33.250%;
+      padding: 6em 1em 10em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .intro .preamble p:last-child {
+      color: #0d2c40;
+      background: transparent;
+      position: relative;
+      top: 0;
+      width: 100%;
+      padding: 0;
+    }
+  }
+/* 
+==========================================================================
+Main
+==========================================================================
+*/
+.main {
+  background: url(../img/mid-century-1.jpg) no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  z-index: 1;
+  top: -25em;
+  margin-bottom: 1em;
+  padding: 20em 0;
+  position: relative;
+}
+  @media (max-width: 70em) {
+    .main {
+      top: -25em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main {
+      background: #f6efe5;
+      top: 0;
+      padding: 0;
+    }
+  }
+.main footer {
+  display: block;
+  position: absolute;
+  left: 1em;
+  bottom: 1em;
+  width: 20%;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 53em) {
+    .main footer {
+      display: inline;
+      position: relative;
+      top: 1em;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      padding: 0 0 0 0.5em;
+    }
+  }
+.main footer a {
+  margin: 0 0.25em;
+  display: block;
+  border-bottom: 0px solid transparent;
+}
+  @media (max-width: 53em) {
+    .main footer a {
+      display: inline;
+    }
+  }
+.main .explanation {
+  background: #0d2c40 url(../img/icon-half.svg);
+  background-repeat: no-repeat;
+  background-position: right center;
+  background-size: 40%;
+  position: relative;
+  color: #ffffff;
+  width: 40%;
+  margin: 0;
+  padding: 2em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .explanation {
+      width: 66.666%;
+      margin: 0;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .explanation {
+      background: #0d2c40;
+      width: 100%;
+      margin: 0;
+      padding: 1em;
+    }
+  }
+.main .explanation h3 {
+  position: absolute;
+  color: #ffffff;
+  font-size: 150%;
+  line-height: 2em;
+  top: 6em;
+  left: -4.5em;
+  margin: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .main .explanation h3 {
+      position: relative;
+      font-size: 150%;
+      top: 0;
+      left: 0;
+      padding: 0;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.main .explanation p {
+  width: 60%;
+  padding-left: 15%;
+}
+  @media (max-width: 70em) {
+    .main .explanation p {
+      width: 66%;
+      padding-left: 15%;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .explanation p {
+      width: 100%;
+      padding-left: 0;
+    }
+  }
+.main .participation {
+  background: #f6efe5;
+  position: absolute;
+  right: 40%;
+  z-index: 2;
+  margin-top: 14em;
+  width: 40%;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .participation {
+      margin-top: 20em;
+      width: 66.866%;
+      right: 33.200%;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .participation {
+      position: relative;
+      margin-top: 0;
+      width: 100%;
+      right: 0;
+    }
+  }
+.main .participation h3 {
+  font-size: 150%;
+}
+.main .benefits {
+  background: rgba(0, 188, 217, 0.8) url(../img/icon-circles.svg) no-repeat left top;
+  background-size: 100%;
+  position: absolute;
+  right: 20%;
+  z-index: 2;
+  margin-top: 3em;
+  margin-left: 0;
+  width: 20%;
+  padding: 22em 1em 25em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .benefits {
+      right: 0;
+      width: 33.250%;
+      margin-top: 12em;
+      padding: 21em 1em 24em 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .benefits {
+      background: rgba(0, 188, 217, 0.8) url(../img/icon-circles.svg) no-repeat center top;
+      background-size: 33%;
+      position: relative;
+      right: 0;
+      width: 100%;
+      margin-top: 0;
+      padding: 11em 1em 1em 1em;
+    }
+  }
+  @media (max-width: 33em) {
+    .main .benefits {
+      background: rgba(0, 188, 217, 0.8) url(../img/icon-circles.svg) no-repeat center top;
+      background-size: 33%;
+      position: relative;
+      right: 0;
+      width: 100%;
+      margin-top: 0;
+      padding: 7em 1em 1em 1em;
+    }
+  }
+.main .benefits h3 {
+  font-size: 150%;
+}
+.main .requirements {
+  position: absolute;
+  -moz-column-count: 2;
+  -moz-column-gap: 2em;
+  -webkit-column-count: 2;
+  -webkit-column-gap: 2em;
+  right: 0;
+  z-index: 2;
+  margin: 60em 0 0 0;
+  width: 60%;
+  padding: 1em 0 0 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .requirements {
+      position: absolute;
+      margin: 65em 0 0 0;
+      width: 75%;
+      -moz-column-count: 1;
+      -moz-column-gap: 1em;
+      -webkit-column-count: 1;
+      -webkit-column-gap: 1em;
+    }
+  }
+  @media (max-width: 53em) {
+    .main .requirements {
+      position: relative;
+      width: 100%;
+      margin: 0;
+      padding: 1em;
+    }
+  }
+.main .requirements h3 {
+  position: absolute;
+  z-index: 3;
+  font-size: 300%;
+  line-height: 2em;
+  top: 0em;
+  left: -6em;
+  margin: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .main .requirements h3 {
+      position: relative;
+      font-size: 150%;
+      left: 0em;
+      padding: 0;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.main .requirements p {
+  margin: 0 1em 1em 1em;
+}
+  @media (max-width: 53em) {
+    .main .requirements p {
+      margin: 0 0 1em 0;
+    }
+  }
+.main .requirements::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -60%;
+  background: url(../img/mid-century-2.jpg) no-repeat left center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  z-index: 2;
+  width: 60%;
+  height: 40em;
+  margin-top: 0;
+  padding: 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .main .requirements::before {
+      left: -66.666%;
+      width: 66.6666%;
+      height: 45em;
+    }
+  }
+/* 
+==========================================================================
+Sidebar
+==========================================================================
+*/
+.sidebar {
+  margin-top: 55em;
+  padding-top: 20em;
+  background: #c879b2;
+  overflow: hidden;
+}
+  @media (max-width: 70em) {
+    .sidebar {
+      margin-top: 65em;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar {
+      margin-top: 2em;
+      padding-top: 2em;
+    }
+  }
+.sidebar .design-selection h3 {
+  color: #ffffff;
+  font-size: 150%;
+  line-height: 1em;
+  width: 20%;
+  float: left;
+  padding: 5em 1em;
+  text-align: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-selection h3 {
+      width: 100%;
+      padding: 0 1em;
+      text-align: right;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .design-selection h3 {
+      text-align: left;
+    }
+  }
+.sidebar .design-selection nav {
+  width: 80%;
+  margin-left: 20%;
+  padding: 1em 0 2em 0;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-selection nav {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+.sidebar .design-selection nav ul {
+  padding: 0;
+}
+.sidebar .design-selection nav ul li {
+  display: inline-block;
+  list-style: none;
+  color: #ffffff;
+  width: 25%;
+  float: left;
+  padding: 10em 1em 2em 1em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li {
+      width: 100%;
+      padding: 5em 1em 2em 1em;
+    }
+  }
+.sidebar .design-selection nav ul li a {
+  color: #ffffff;
+  text-decoration: none;
+  display: block;
+  border-bottom: 0 solid transparent;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li a {
+      display: inline;
+    }
+  }
+.sidebar .design-selection nav ul li a:hover {
+  color: rgba(0, 0, 0, 0.4);
+  border-bottom: 0 solid transparent;
+}
+.sidebar .design-selection nav ul li:nth-child(1) {
+  background: #0d2c40;
+  margin-top: -29em;
+  padding: 39em 1em 2em 1em;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(1) {
+      margin-top: 0;
+      padding: 5em 1em 2em 1em;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(2) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(3) {
+  background: #31c5da;
+}
+.sidebar .design-selection nav ul li:nth-child(4) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(5) {
+  background: #0d2c40;
+}
+.sidebar .design-selection nav ul li:nth-child(6) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(7) {
+  background: #31c5da;
+}
+.sidebar .design-selection nav ul li:nth-child(8) {
+  background: #f15a30;
+}
+.sidebar .design-selection nav ul li:nth-child(1)::before {
+  content: "1";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(1)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(2)::before {
+  content: "2";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(2)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(3)::before {
+  content: "3";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(3)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(4)::before {
+  content: "4";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(4)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(5)::before {
+  content: "5";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(5)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(6)::before {
+  content: "6";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(6)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(7)::before {
+  content: "7";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(7)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-selection nav ul li:nth-child(8)::before {
+  content: "8";
+  font-size: 700%;
+}
+  @media (max-width: 53em) {
+    .sidebar .design-selection nav ul li:nth-child(8)::before {
+      font-size: 300%;
+      display: block;
+      padding: 0 0 0.25em 0;
+    }
+  }
+.sidebar .design-archives {
+  background: #31c5da;
+  position: relative;
+  width: 20%;
+  margin: 0 20% 0 60%;
+  padding: 10em 1em 3em 1em;
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .design-archives {
+      width: 25%;
+      margin: 0 25% 0 50%;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .design-archives {
+      background: #31c5da;
+      width: 100%;
+      margin: 0;
+      padding: 4em 1em 1em 1em;
+    }
+  }
+.sidebar .design-archives h3 {
+  position: absolute;
+  color: #ffffff;
+  z-index: 3;
+  font-size: 150%;
+  line-height: 2em;
+  top: 8.5em;
+  left: -4em;
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .sidebar .design-archives h3 {
+      top: 0;
+      left: 0;
+      position: relative;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.sidebar .design-archives nav {
+  overflow: hidden;
+  width: 100%;
+}
+.sidebar .design-archives ul {
+  padding: 0;
+  overflow: hidden;
+}
+.sidebar .design-archives ul li {
+  display: inline-block;
+  list-style: none;
+  width: 100%;
+  float: left;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}
+.sidebar .zen-resources {
+  background: #31c5da url(../img/icon-circles.svg) no-repeat left bottom;
+  background-size: 100%;
+  position: relative;
+  z-index: 2;
+  width: 20%;
+  margin: 0 20% 0 60%;
+  padding: 8em 1em 22em 1em;
+  float: right;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+  @media (max-width: 70em) {
+    .sidebar .zen-resources {
+      width: 25%;
+      margin: 0 25% 0 50%;
+    }
+  }
+  @media (max-width: 53em) {
+    .sidebar .zen-resources {
+      background: #31c5da url(../img/icon-circles.svg) no-repeat center bottom;
+      background-size: 35%;
+      width: 100%;
+      margin: 0;
+      padding: 2em 1em 10em 1em;
+    }
+  }
+.sidebar .zen-resources h3 {
+  position: absolute;
+  color: #ffffff;
+  z-index: 3;
+  font-size: 150%;
+  line-height: 2em;
+  top: 8em;
+  left: -4.5em;
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+  @media (max-width: 53em) {
+    .sidebar .zen-resources h3 {
+      top: 0;
+      left: 0;
+      position: relative;
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+    }
+  }
+.sidebar .zen-resources ul {
+  padding: 0;
+  overflow: hidden;
+}
+.sidebar .zen-resources ul li {
+  display: inline-block;
+  list-style: none;
+  width: 100%;
+  float: left;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  text-align: left;
+}
diff --git a/mid-century-modern/img/circle-white.svg b/mid-century-modern/img/circle-white.svg
new file mode 100755
index 00000000..abd248ce
--- /dev/null
+++ b/mid-century-modern/img/circle-white.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="3000px" height="1000px" viewBox="0 0 3000 1000" enable-background="new 0 0 3000 1000" xml:space="preserve">
+<rect x="-1" fill="#F15B31" width="3002" height="1000"/>
+<rect x="1000.006" fill="#3AC2D8" width="1000" height="1000"/>
+<circle fill="#FFFFFF" cx="500" cy="500" r="387"/>
+<circle fill="#0B2C40" cx="1500" cy="501.001" r="387"/>
+<circle fill="#FFFFFF" cx="2501.6" cy="500" r="387"/>
+<g>
+	<path fill="#0B2C40" d="M2499.303,645.606L2499.303,645.606v-9.865l0,0c-75.609,0-137.122-61.512-137.122-137.124
+		c0-75.61,61.513-137.124,137.122-137.124l0,0v-9.865l0,0c-81.049,0-146.988,65.939-146.988,146.988
+		C2352.314,579.668,2418.254,645.606,2499.303,645.606z"/>
+	<path fill="#0B2C40" d="M2372.291,498.617c0,70.036,56.979,127.013,127.012,127.013v-9.865
+		c-64.593,0-117.146-52.553-117.146-117.147s52.554-117.146,117.146-117.146v-9.865
+		C2429.27,371.606,2372.291,428.583,2372.291,498.617z"/>
+	<path fill="#0B2C40" d="M2498.921,351.63L2498.921,351.63v9.864l0,0c75.61,0,137.122,61.513,137.122,137.125
+		c0,75.611-61.512,137.124-137.122,137.124l0,0v9.865l0,0c81.049,0,146.988-65.939,146.988-146.989
+		C2645.909,417.568,2579.97,351.63,2498.921,351.63z"/>
+	<path fill="#0B2C40" d="M2625.933,498.619c0-70.036-56.979-127.013-127.012-127.013v9.865c64.594,0,117.146,52.552,117.146,117.147
+		s-52.553,117.147-117.146,117.147v9.864C2568.955,625.63,2625.933,568.653,2625.933,498.619z"/>
+	<g>
+		<path fill="#0B2C40" d="M2392.269,498.617c0,59.021,48.016,107.035,107.034,107.035v-9.863c-53.579,0-97.169-43.592-97.169-97.172
+			c0-53.58,43.59-97.17,97.169-97.17v-9.865C2440.284,391.583,2392.269,439.599,2392.269,498.617z"/>
+		<path fill="#0B2C40" d="M2605.956,498.619c0-59.02-48.018-107.035-107.035-107.035v9.864c53.579,0,97.169,43.592,97.169,97.171
+			s-43.59,97.17-97.169,97.17v9.864C2557.939,605.653,2605.956,557.638,2605.956,498.619z"/>
+	</g>
+</g>
+<polygon fill="none" stroke="#0B2C40" stroke-width="10" stroke-miterlimit="10" points="360,639 495,504 634.5,639 "/>
+<polygon fill="none" stroke="#0B2C40" stroke-width="10" stroke-miterlimit="10" points="634.5,360 495,504 360,360 "/>
+<g>
+	<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1500.489" cy="389.511" r="60.489"/>
+	<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1600.011" cy="495.041" r="60.489"/>
+	<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1396.989" cy="496.655" r="60.489"/>
+	<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1500.489" cy="600.489" r="60.489"/>
+</g>
+</svg>
diff --git a/mid-century-modern/img/icon-circles.svg b/mid-century-modern/img/icon-circles.svg
new file mode 100755
index 00000000..2f0cef7b
--- /dev/null
+++ b/mid-century-modern/img/icon-circles.svg
@@ -0,0 +1,115 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
+	 height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g id="Layer_1" display="none">
+</g>
+<g id="Layer_3">
+	<circle fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+<g id="Layer_9" display="none">
+	<rect x="351.507" y="350.097" display="inline" fill="#C157A1" width="296.985" height="296.985"/>
+</g>
+<g id="Layer_10">
+</g>
+<g id="Layer_11" display="none">
+	<rect x="245.763" y="245.763" display="inline" fill="#C157A1" width="508.475" height="508.475"/>
+</g>
+<g id="Layer_12" display="none">
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="645.583" x2="647.083" y2="348.598"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="348.598" x2="647.083" y2="645.583"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="498.591" y1="707.091" x2="498.591" y2="287.091"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="288.59" y1="497.09" x2="708.59" y2="497.09"/>
+</g>
+<g id="Layer_16" display="none">
+	<polygon display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" points="647.083,645.583 
+		350.098,348.598 647.083,348.598 350.098,645.583 	"/>
+</g>
+<g id="Layer_13" display="none">
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="210"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="189"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="168.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+</g>
+<g id="Layer_15">
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="344.97" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="647.206" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="417.03" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="569.149" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="417.03" r="59.21"/>
+	<circle fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="569.149" r="59.21"/>
+</g>
+<g id="Layer_14" display="none">
+</g>
+<g id="Layer_6" display="none">
+	<path display="inline" fill="#C879B2" d="M999.709,1000V0.459c-273.653,2.772-494.637,225.46-494.637,499.77
+		C505.072,774.538,726.056,997.229,999.709,1000z"/>
+	<path display="inline" fill="#FFFFFF" d="M1000,678.914L1000,678.914V666l0,0c-98.985,0-179.515-80.53-179.515-179.517
+		c0-98.986,80.529-179.516,179.515-179.516l0,0v-12.915l0,0c-106.105,0-192.431,86.325-192.431,192.431
+		C807.569,592.591,893.895,678.914,1000,678.914z"/>
+	<path display="inline" fill="#FFFFFF" d="M833.722,486.483c0,91.687,74.594,166.279,166.278,166.279v-12.915
+		c-84.563,0-153.363-68.799-153.363-153.364S915.438,333.12,1000,333.12v-12.914C908.315,320.206,833.722,394.797,833.722,486.483z"
+		/>
+	<path display="inline" fill="#FFFFFF" d="M859.875,486.483c0,77.266,62.86,140.125,140.125,140.125v-12.913
+		c-70.144,0-127.21-57.068-127.21-127.212S929.856,359.272,1000,359.272v-12.914C922.735,346.358,859.875,409.218,859.875,486.483z"
+		/>
+</g>
+<g id="Layer_8" display="none">
+	<g display="inline">
+		<path fill="#072B3F" d="M501.742,645.606L501.742,645.606v-9.865l0,0c-75.61,0-137.123-61.512-137.123-137.124
+			c0-75.61,61.513-137.124,137.123-137.124l0,0v-9.865l0,0c-81.049,0-146.988,65.939-146.988,146.988
+			C354.754,579.668,420.693,645.606,501.742,645.606z"/>
+		<path fill="#072B3F" d="M374.73,498.617c0,70.036,56.979,127.013,127.012,127.013v-9.865
+			c-64.593,0-117.147-52.553-117.147-117.147s52.554-117.146,117.147-117.146v-9.865C431.709,371.606,374.73,428.583,374.73,498.617
+			z"/>
+		<path fill="#072B3F" d="M501.36,351.63L501.36,351.63v9.864l0,0c75.61,0,137.122,61.513,137.122,137.125
+			c0,75.611-61.512,137.124-137.122,137.124l0,0v9.865l0,0c81.049,0,146.988-65.939,146.988-146.989
+			C648.349,417.568,582.409,351.63,501.36,351.63z"/>
+		<path fill="#072B3F" d="M628.372,498.619c0-70.036-56.979-127.013-127.012-127.013v9.865c64.594,0,117.146,52.552,117.146,117.147
+			S565.954,615.766,501.36,615.766v9.864C571.395,625.63,628.372,568.653,628.372,498.619z"/>
+		<g>
+			<path fill="#072B3F" d="M394.708,498.617c0,59.021,48.016,107.035,107.035,107.035v-9.863c-53.579,0-97.169-43.592-97.169-97.172
+				c0-53.58,43.59-97.17,97.169-97.17v-9.865C442.724,391.583,394.708,439.599,394.708,498.617z"/>
+			<path fill="#072B3F" d="M608.396,498.619c0-59.02-48.018-107.035-107.035-107.035v9.864c53.579,0,97.169,43.592,97.169,97.171
+				s-43.59,97.17-97.169,97.17v9.864C560.379,605.653,608.396,557.638,608.396,498.619z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_7" display="none">
+</g>
+<g id="Layer_5" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_4" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_2" display="none">
+	<circle display="inline" fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+</svg>
diff --git a/mid-century-modern/img/icon-half.svg b/mid-century-modern/img/icon-half.svg
new file mode 100755
index 00000000..3df2cd67
--- /dev/null
+++ b/mid-century-modern/img/icon-half.svg
@@ -0,0 +1,138 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
+	 height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g id="Layer_1" display="none">
+</g>
+<g id="Layer_3" display="none">
+	<circle display="inline" fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+<g id="Layer_9" display="none">
+	<rect x="351.507" y="350.097" display="inline" fill="#C157A1" width="296.985" height="296.985"/>
+</g>
+<g id="Layer_10" display="none">
+</g>
+<g id="Layer_11" display="none">
+	<rect x="245.763" y="245.763" display="inline" fill="#C157A1" width="508.475" height="508.475"/>
+</g>
+<g id="Layer_12" display="none">
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="645.583" x2="647.083" y2="348.598"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="348.598" x2="647.083" y2="645.583"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="498.591" y1="707.091" x2="498.591" y2="287.091"/>
+	
+		<line display="inline" fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="288.59" y1="497.09" x2="708.59" y2="497.09"/>
+</g>
+<g id="Layer_16" display="none">
+	<polygon display="inline" fill="none" stroke="#3BC2D7" stroke-width="10" stroke-miterlimit="10" points="647.083,645.583 
+		350.098,348.598 647.083,348.598 350.098,645.583 	"/>
+</g>
+<g id="Layer_13" display="none">
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="210"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="189"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="168.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+</g>
+<g id="Layer_15" display="none">
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="344.97" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="647.206" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="417.03" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="569.149" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="417.03" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="569.149" r="59.21"/>
+</g>
+<g id="Layer_14" display="none">
+</g>
+<g id="Layer_6">
+	<path fill="#3BC2D7" d="M999.709,1000V0.459c-273.653,2.772-494.637,225.46-494.637,499.77
+		C505.072,774.538,726.056,997.229,999.709,1000z"/>
+</g>
+<g id="Layer_17">
+	<path fill="none" d="M1001.161,650.115c-0.485,0-0.968-0.014-1.452-0.019v10.186c0.484,0.005,0.967,0.019,1.452,0.019"/>
+	<path fill="none" d="M1001.161,333.881c-0.485,0-0.968,0.014-1.452,0.019v10.185c0.484-0.004,0.967-0.019,1.452-0.019"/>
+	<path fill="none" d="M1001.161,313.091c-0.485,0-0.968,0.015-1.452,0.019v10.79c0.484-0.004,0.967-0.019,1.452-0.019"/>
+	<path fill="none" d="M1001.161,670.301c-0.485,0-0.968-0.015-1.452-0.019v10.79c0.484,0.004,0.967,0.019,1.452,0.019"/>
+	<path fill="none" d="M1001.161,354.066c-0.485,0-0.968,0.014-1.452,0.019v286.012c0.484,0.005,0.967,0.019,1.452,0.019"/>
+	<path fill="none" d="M1001.161,691.091c-0.485,0-0.968-0.015-1.452-0.019v11c0.484,0.004,0.967,0.019,1.452,0.019"/>
+	<path fill="none" d="M1001.161,292.091c-0.485,0-0.968,0.015-1.452,0.019v11c0.484-0.004,0.967-0.019,1.452-0.019"/>
+	<path fill="#FFFFFF" d="M1001.161,282.091c-0.485,0-0.968,0.015-1.452,0.018c-56.886,0.375-110.311,22.689-150.576,62.955
+		c-40.607,40.608-62.972,94.599-62.972,152.028s22.364,111.42,62.972,152.027c40.266,40.266,93.69,62.581,150.576,62.955
+		c0.484,0.003,0.967,0.018,1.452,0.018 M1001.161,702.091c-0.485,0-0.968-0.015-1.452-0.019
+		c-112.37-0.785-203.548-92.43-203.548-204.981c0-112.552,91.178-204.196,203.548-204.981c0.484-0.003,0.967-0.019,1.452-0.019"/>
+	<path fill="#FFFFFF" d="M1001.161,303.091c-0.485,0-0.968,0.015-1.452,0.019c-106.305,0.785-192.548,87.495-192.548,193.981
+		c0,106.486,86.243,193.196,192.548,193.981c0.484,0.004,0.967,0.019,1.452,0.019 M1001.161,681.091
+		c-0.485,0-0.968-0.015-1.452-0.019c-100.791-0.784-182.548-83.009-182.548-183.981s81.757-183.197,182.548-183.981
+		c0.484-0.004,0.967-0.019,1.452-0.019"/>
+	<path fill="#FFFFFF" d="M1001.161,323.881c-0.485,0-0.968,0.015-1.452,0.019c-94.841,0.784-171.758,78.168-171.758,173.191
+		c0,95.022,76.917,172.407,171.758,173.191c0.484,0.004,0.967,0.019,1.452,0.019 M1001.161,660.301
+		c-0.485,0-0.968-0.014-1.452-0.019c-89.327-0.784-161.758-73.683-161.758-163.191s72.431-162.408,161.758-163.191
+		c0.484-0.004,0.967-0.019,1.452-0.019"/>
+	<path fill="#FFFFFF" d="M1001.161,344.066c-0.485,0-0.968,0.014-1.452,0.019c-83.711,0.784-151.572,69.113-151.572,153.006
+		c0,83.893,67.861,152.223,151.572,153.006c0.484,0.005,0.967,0.019,1.452,0.019 M1001.161,640.115
+		c-0.485,0-0.968-0.014-1.452-0.019c-78.197-0.783-141.572-64.627-141.572-143.006s63.375-142.223,141.572-143.006
+		c0.484-0.005,0.967-0.019,1.452-0.019"/>
+</g>
+<g id="Layer_8" display="none">
+	<g display="inline">
+		<path fill="#072B3F" d="M501.742,645.606L501.742,645.606v-9.865l0,0c-75.61,0-137.123-61.512-137.123-137.124
+			c0-75.61,61.513-137.124,137.123-137.124l0,0v-9.865l0,0c-81.049,0-146.988,65.939-146.988,146.988
+			C354.754,579.668,420.693,645.606,501.742,645.606z"/>
+		<path fill="#072B3F" d="M374.73,498.617c0,70.036,56.979,127.013,127.012,127.013v-9.865
+			c-64.593,0-117.147-52.553-117.147-117.147s52.554-117.146,117.147-117.146v-9.865C431.709,371.606,374.73,428.583,374.73,498.617
+			z"/>
+		<path fill="#072B3F" d="M501.36,351.63L501.36,351.63v9.864l0,0c75.61,0,137.122,61.513,137.122,137.125
+			c0,75.611-61.512,137.124-137.122,137.124l0,0v9.865l0,0c81.049,0,146.988-65.939,146.988-146.989
+			C648.349,417.568,582.409,351.63,501.36,351.63z"/>
+		<path fill="#072B3F" d="M628.372,498.619c0-70.036-56.979-127.013-127.012-127.013v9.865c64.594,0,117.146,52.552,117.146,117.147
+			S565.954,615.766,501.36,615.766v9.864C571.395,625.63,628.372,568.653,628.372,498.619z"/>
+		<g>
+			<path fill="#072B3F" d="M394.708,498.617c0,59.021,48.016,107.035,107.035,107.035v-9.863c-53.579,0-97.169-43.592-97.169-97.172
+				c0-53.58,43.59-97.17,97.169-97.17v-9.865C442.724,391.583,394.708,439.599,394.708,498.617z"/>
+			<path fill="#072B3F" d="M608.396,498.619c0-59.02-48.018-107.035-107.035-107.035v9.864c53.579,0,97.169,43.592,97.169,97.171
+				s-43.59,97.17-97.169,97.17v9.864C560.379,605.653,608.396,557.638,608.396,498.619z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_7" display="none">
+</g>
+<g id="Layer_5" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_4" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_2" display="none">
+	<circle display="inline" fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+</svg>
diff --git a/mid-century-modern/img/icon-star.svg b/mid-century-modern/img/icon-star.svg
new file mode 100755
index 00000000..b605ee84
--- /dev/null
+++ b/mid-century-modern/img/icon-star.svg
@@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
+	 height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<g id="Layer_1" display="none">
+</g>
+<g id="Layer_3">
+	<circle fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+<g id="Layer_9" display="none">
+	<rect x="351.507" y="350.097" display="inline" fill="#C157A1" width="296.985" height="296.985"/>
+</g>
+<g id="Layer_10">
+</g>
+<g id="Layer_11" display="none">
+	<rect x="245.763" y="245.763" display="inline" fill="#C157A1" width="508.475" height="508.475"/>
+</g>
+<g id="Layer_12">
+	
+		<line fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="645.583" x2="647.083" y2="348.598"/>
+	
+		<line fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="350.098" y1="348.598" x2="647.083" y2="645.583"/>
+	
+		<line fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="498.591" y1="707.091" x2="498.591" y2="287.091"/>
+	<line fill="none" stroke="#F15B30" stroke-width="10" stroke-miterlimit="10" x1="288.59" y1="497.09" x2="708.59" y2="497.09"/>
+</g>
+<g id="Layer_16" display="none">
+	<polygon display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" points="647.083,645.583 
+		350.098,348.598 647.083,348.598 350.098,645.583 	"/>
+</g>
+<g id="Layer_13" display="none">
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="210"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="189"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.601" cy="497.091" r="168.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="148.025"/>
+</g>
+<g id="Layer_15" display="none">
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="497.091" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="344.97" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="498.602" cy="647.206" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="417.03" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="348.482" cy="569.149" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="417.03" r="59.21"/>
+	
+		<circle display="inline" fill="none" stroke="#072B3F" stroke-width="10" stroke-miterlimit="10" cx="648.717" cy="569.149" r="59.21"/>
+</g>
+<g id="Layer_14" display="none">
+</g>
+<g id="Layer_6" display="none">
+	<path display="inline" fill="#C879B2" d="M999.709,1000V0.459c-273.653,2.772-494.637,225.46-494.637,499.77
+		C505.072,774.538,726.056,997.229,999.709,1000z"/>
+	<path display="inline" fill="#FFFFFF" d="M1000,678.914L1000,678.914V666l0,0c-98.985,0-179.515-80.53-179.515-179.517
+		c0-98.986,80.529-179.516,179.515-179.516l0,0v-12.915l0,0c-106.105,0-192.431,86.325-192.431,192.431
+		C807.569,592.591,893.895,678.914,1000,678.914z"/>
+	<path display="inline" fill="#FFFFFF" d="M833.722,486.483c0,91.687,74.594,166.279,166.278,166.279v-12.915
+		c-84.563,0-153.363-68.799-153.363-153.364S915.438,333.12,1000,333.12v-12.914C908.315,320.206,833.722,394.797,833.722,486.483z"
+		/>
+	<path display="inline" fill="#FFFFFF" d="M859.875,486.483c0,77.266,62.86,140.125,140.125,140.125v-12.913
+		c-70.144,0-127.21-57.068-127.21-127.212S929.856,359.272,1000,359.272v-12.914C922.735,346.358,859.875,409.218,859.875,486.483z"
+		/>
+</g>
+<g id="Layer_8" display="none">
+	<g display="inline">
+		<path fill="#072B3F" d="M501.742,645.606L501.742,645.606v-9.865l0,0c-75.61,0-137.123-61.512-137.123-137.124
+			c0-75.61,61.513-137.124,137.123-137.124l0,0v-9.865l0,0c-81.049,0-146.988,65.939-146.988,146.988
+			C354.754,579.668,420.693,645.606,501.742,645.606z"/>
+		<path fill="#072B3F" d="M374.73,498.617c0,70.036,56.979,127.013,127.012,127.013v-9.865
+			c-64.593,0-117.147-52.553-117.147-117.147s52.554-117.146,117.147-117.146v-9.865C431.709,371.606,374.73,428.583,374.73,498.617
+			z"/>
+		<path fill="#072B3F" d="M501.36,351.63L501.36,351.63v9.864l0,0c75.61,0,137.122,61.513,137.122,137.125
+			c0,75.611-61.512,137.124-137.122,137.124l0,0v9.865l0,0c81.049,0,146.988-65.939,146.988-146.989
+			C648.349,417.568,582.409,351.63,501.36,351.63z"/>
+		<path fill="#072B3F" d="M628.372,498.619c0-70.036-56.979-127.013-127.012-127.013v9.865c64.594,0,117.146,52.552,117.146,117.147
+			S565.954,615.766,501.36,615.766v9.864C571.395,625.63,628.372,568.653,628.372,498.619z"/>
+		<g>
+			<path fill="#072B3F" d="M394.708,498.617c0,59.021,48.016,107.035,107.035,107.035v-9.863c-53.579,0-97.169-43.592-97.169-97.172
+				c0-53.58,43.59-97.17,97.169-97.17v-9.865C442.724,391.583,394.708,439.599,394.708,498.617z"/>
+			<path fill="#072B3F" d="M608.396,498.619c0-59.02-48.018-107.035-107.035-107.035v9.864c53.579,0,97.169,43.592,97.169,97.171
+				s-43.59,97.17-97.169,97.17v9.864C560.379,605.653,608.396,557.638,608.396,498.619z"/>
+		</g>
+	</g>
+</g>
+<g id="Layer_7" display="none">
+</g>
+<g id="Layer_5" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#02BCD9" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_4" display="none">
+	<g display="inline">
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="353.75" y1="500" x2="646.25" y2="500"/>
+		<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="500" y1="353.75" x2="500" y2="646.25"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="396.585" y1="396.585" x2="603.414" y2="603.414"/>
+		
+			<line fill="none" stroke="#5C1C1F" stroke-width="10" stroke-miterlimit="10" x1="603.414" y1="396.586" x2="396.585" y2="603.414"/>
+	</g>
+</g>
+<g id="Layer_2" display="none">
+	<circle display="inline" fill="#FFFFFF" cx="500" cy="500" r="387"/>
+</g>
+</svg>
diff --git a/mid-century-modern/img/icons-3-pack.svg b/mid-century-modern/img/icons-3-pack.svg
new file mode 100755
index 00000000..2fe9d155
--- /dev/null
+++ b/mid-century-modern/img/icons-3-pack.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="3000px" height="1000px" viewBox="0 0 3000 1000" enable-background="new 0 0 3000 1000" xml:space="preserve">
+<rect x="-1" fill="#F15B31" width="3002" height="1000"/>
+<rect x="1000.006" fill="#3AC2D8" width="1000" height="1000"/>
+<circle fill="#FFFFFF" cx="500" cy="500" r="387"/>
+<circle fill="#0B2C40" cx="1500" cy="501.001" r="387"/>
+<circle fill="#FFFFFF" cx="2501.6" cy="500" r="387"/>
+<polygon fill="none" stroke="#3AC2D8" stroke-width="10" stroke-miterlimit="10" points="647.083,648 350.098,351.016 
+	647.083,351.016 350.098,648 "/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1500.675" cy="497.091" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1500.675" cy="344.97" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1500.675" cy="647.206" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1350.556" cy="417.03" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1350.556" cy="569.149" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1650.79" cy="417.03" r="59.21"/>
+<circle fill="none" stroke="#FFFFFF" stroke-width="10" stroke-miterlimit="10" cx="1650.79" cy="569.149" r="59.21"/>
+<circle fill="none" stroke="#3AC2D8" stroke-width="10" stroke-miterlimit="10" cx="2496" cy="497.091" r="210"/>
+<circle fill="none" stroke="#3AC2D8" stroke-width="10" stroke-miterlimit="10" cx="2496" cy="497.091" r="189"/>
+<circle fill="none" stroke="#3AC2D8" stroke-width="10" stroke-miterlimit="10" cx="2496" cy="497.091" r="168.21"/>
+<circle fill="none" stroke="#3AC2D8" stroke-width="10" stroke-miterlimit="10" cx="2496" cy="497.091" r="148.025"/>
+</svg>
diff --git a/mid-century-modern/img/mid-century-1.jpg b/mid-century-modern/img/mid-century-1.jpg
new file mode 100755
index 00000000..a9d85f20
Binary files /dev/null and b/mid-century-modern/img/mid-century-1.jpg differ
diff --git a/mid-century-modern/img/mid-century-2.jpg b/mid-century-modern/img/mid-century-2.jpg
new file mode 100755
index 00000000..966477b2
Binary files /dev/null and b/mid-century-modern/img/mid-century-2.jpg differ
diff --git a/mid-century-modern/index.html b/mid-century-modern/index.html
new file mode 100755
index 00000000..426c97fe
--- /dev/null
+++ b/mid-century-modern/index.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>CSS Zen Garden: The Beauty of CSS Design</title>
+
+	<link rel="stylesheet" media="screen" href="css/style.css">
+	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="author" content="Dave Shea">
+	<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
+	<meta name="robots" content="all">
+
+	<!-- Typekit fonts -->
+	<script type="text/javascript" src="//use.typekit.net/rwn5lgb.js"></script>
+	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+
+
+	<!--[if lt IE 9]>
+	<script src="script/html5shiv.js"></script>
+	<![endif]-->
+</head>
+
+<!--
+
+
+
+	View source is a feature, not a bug. Thanks for your curiosity and
+	interest in participating!
+
+	Here are the submission guidelines for the new and improved csszengarden.com:
+
+	- CSS3? Of course! Prefix for ALL browsers where necessary.
+	- go responsive; test your layout at multiple screen sizes.
+	- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
+	- Graceful degradation is acceptable, and in fact highly encouraged.
+	- use classes for styling. Don't use ids.
+	- web fonts are cool, just make sure you have a license to share the files. Hosted 
+	  services that are applied via the CSS file (ie. Google Fonts) will work fine, but
+	  most that require custom HTML won't. TypeKit is supported, see the readme on this
+	  page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
+
+	And a few tips on building your CSS file:
+
+	- use :first-child, :last-child and :nth-child to get at non-classed elements
+	- use ::before and ::after to create pseudo-elements for extra styling
+	- use multiple background images to apply as many as you need to any element
+	- use the Kellum Method for image replacement, if still needed. http://goo.gl/GXxdI
+	- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
+
+		
+-->
+
+<body id="css-zen-garden">
+<div class="page-wrapper">
+
+	<section class="intro" id="zen-intro">
+		<header role="banner">
+			<h1>CSS Zen Garden</h1>
+			<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
+		</header>
+
+		<div class="summary" id="zen-summary" role="article">
+			<p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
+			<p>Download the example <a href="/examples/index" title="This page's source HTML code, not to be modified.">html file</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">css file</a></p>
+		</div>
+
+		<div class="preamble" id="zen-preamble" role="article">
+			<h3>The Road to Enlightenment</h3>
+			<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
+			<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
+			<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
+		</div>
+	</section>
+
+	<div class="main supporting" id="zen-supporting" role="main">
+		<div class="explanation" id="zen-explanation" role="article">
+			<h3>So What is This About?</h3>
+			<p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p>
+			<p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
+		</div>
+
+		<div class="participation" id="zen-participation" role="article">
+			<h3>Participation</h3>
+			<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
+			<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you&#8217;ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
+			<p>Download the sample <a href="/examples/index" title="This page's source HTML code, not to be modified.">HTML</a> and <a href="/examples/style.css" title="This page's sample CSS, the file you may modify.">CSS</a> to work on a copy locally. Once you have completed your masterpiece (and please, don&#8217;t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/" title="Use the contact form to send us your CSS file">Send us a link</a> to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
+		</div>
+
+		<div class="benefits" id="zen-benefits" role="article">
+			<h3>Benefits</h3>
+			<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
+		</div>
+
+		<div class="requirements" id="zen-requirements" role="article">
+			<h3>Requirements</h3>
+			<p>Where possible, we would like to see mostly <abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 &amp; 2</abbr> usage. <abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 &amp; 4</abbr> should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</p>
+			<p>Luckily, designing this way shows how well various browsers have implemented <abbr title="Cascading Style Sheets">CSS</abbr> by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days &#8212; especially when you factor in mobile &#8212; pixel-perfect layouts may not be possible across every platform. That&#8217;s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
+			<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We&#8217;re well past the point of needing another garden-related design.</p>
+			<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see <a href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Zen Garden's license information.">one on this site</a> so that others may learn from your work.</p>
+			<p role="contentinfo">By <a href="http://www.mezzoblue.com/">Dave Shea</a>. Bandwidth graciously donated by <a href="http://www.mediatemple.net/">mediatemple</a>. Now available: <a href="http://www.amazon.com/exec/obidos/ASIN/0321303474/mezzoblue-20/">Zen Garden, the book</a>.</p>
+		</div>
+
+		<footer>
+			<a href="http://validator.w3.org/check/referer" title="Check the validity of this site&#8217;s HTML" class="zen-validate-html">HTML</a>
+			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check the validity of this site&#8217;s CSS" class="zen-validate-css">CSS</a>
+			<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/" title="View the Creative Commons license of this site: Attribution-NonCommercial-ShareAlike." class="zen-license">CC</a>
+			<a href="http://mezzoblue.com/zengarden/faq/#aaa" title="Read about the accessibility of this site" class="zen-accessibility">A11y</a>
+			<a href="https://github.com/mezzoblue/csszengarden.com" title="Fork this site on Github" class="zen-github">GH</a>
+		</footer>
+
+	</div>
+
+
+	<aside class="sidebar" role="complementary">
+		<div class="wrapper">
+
+			<div class="design-selection" id="design-selection">
+				<h3 class="select">Select a Design:</h3>
+				<nav role="navigation">
+					<ul>
+					<li>
+						<a href="/220/" class="design-name">Garments</a> by						<a href="http://danielmall.com/" class="designer-name">Dan Mall</a>
+					</li>					<li>
+						<a href="/219/" class="design-name">Steel</a> by						<a href="http://steffen-knoeller.de" class="designer-name">Steffen Knoeller</a>
+					</li>					<li>
+						<a href="/218/" class="design-name">Apothecary</a> by						<a href="http://trentwalton.com" class="designer-name">Trent Walton</a>
+					</li>					<li>
+						<a href="/217/" class="design-name">Screen Filler</a> by						<a href="http://elliotjaystocks.com/" class="designer-name">Elliot Jay Stocks</a>
+					</li>					<li>
+						<a href="/216/" class="design-name">Fountain Kiss</a> by						<a href="http://jeremycarlson.com." class="designer-name">Jeremy Carlson</a>
+					</li>					<li>
+						<a href="/215/" class="design-name">A Robot Named Jimmy</a> by						<a href="http://meltmedia.com/" class="designer-name">meltmedia</a>
+					</li>					<li>
+						<a href="/214/" class="design-name">Verde Moderna</a> by						<a href="http://www.mezzoblue.com/" class="designer-name">Dave Shea</a>
+					</li>					<li>
+						<a href="/213/" class="design-name">Under the Sea!</a> by						<a href="http://www.ericstoltz.com/" class="designer-name">Eric Stoltz</a>
+					</li>					</ul>
+				</nav>
+			</div>
+
+			<div class="design-archives" id="design-archives">
+				<h3 class="archives">Archives:</h3>
+				<nav role="navigation">
+					<ul>
+						<li class="next">
+							<a href="/214/page1">
+								Next Designs <span class="indicator">&rsaquo;</span>
+							</a>
+						</li>
+						<li class="viewall">
+							<a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden.">
+								View All Designs							</a>
+						</li>
+					</ul>
+				</nav>
+			</div>
+
+			<div class="zen-resources" id="zen-resources">
+				<h3 class="resources">Resources:</h3>
+				<ul>
+					<li class="view-css">
+						<a href="/214/214.css" title="View the source CSS file of the currently-viewed design.">
+							View This Design&#8217;s <abbr title="Cascading Style Sheets">CSS</abbr>						</a>
+					</li>
+					<li class="css-resources">
+						<a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS.">
+							<abbr title="Cascading Style Sheets">CSS</abbr> Resources						</a>
+					</li>
+					<li class="zen-faq">
+						<a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden.">
+							<abbr title="Frequently Asked Questions">FAQ</abbr>						</a>
+					</li>
+					<li class="zen-submit">
+						<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
+							Submit a Design						</a>
+					</li>
+					<li class="zen-translations">
+						<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page.">
+							Translations						</a>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</aside>
+
+
+</div>
+
+<!--
+
+	These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
+	These days we have full ::before and ::after support, favour using those instead.
+	These only remain for historical design compatibility. They might go away one day.
+		
+-->
+<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
+<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/zengarden.xml b/zengarden.xml
index 0a73ae4c..f1b8a34b 100755
--- a/zengarden.xml
+++ b/zengarden.xml
@@ -14,11 +14,17 @@
 <lastBuildDate>Tues, 12 Dec 2013 08:00:00 PST</lastBuildDate>
 
 <item>
-  <title>#220 - 12 Dec 2013</title>
+  <title>#221 - 12 Dec 2013</title>
   <description>'Garments' by Dan Mall</description>
   <link>http://www.csszengarden.com/220/</link>
 </item>
 
+<item>
+  <title>#220 - 23 Jun 2014</title>
+  <description>'Mid Century Modern' by Andrew Lohman</description>
+  <link>http://www.csszengarden.com/221/</link>
+</item>
+
 <item>
   <title>#219 - 5 Dec 2013</title>
   <description>'Steel' by Steffen Knoeller</description>