va_common 0.1.0

data/app/assets/stylesheets/_va.scss

@@ -0,0 +1,2377 @@
+// Vets.gov
+
+
+// Other Colors
+$polar:#E8F5FA;
+$wild-sand:#f6f6f6;
+$green-white:#eff0e6;
+$olso-gray:#849097;
+
+// VA Fonts
+$roboto-slab: 'Roboto Slab', serif;
+
+
+
+// General
+html, body {
+  padding: 0;
+  margin: 0;
+  font-size: 16px;
+  font-family: $font-sans;
+  font-weight: 500;
+  color: $color-gray-dark;
+}
+
+body, body.home {
+  background: $color-primary-darkest image-url("design/background/thread.png") top left no-repeat;
+  background-size: contain;
+  color: #fff;
+}
+
+
+// row
+body .row.full {
+  width: 100%;
+  max-width: 100%;
+}
+
+body.home .row {
+/* max-width: 62.5em; */
+}
+
+// Screen Readers
+
+.sr-only {
+  position: absolute;
+  left: -9999em;
+  float: left;
+}
+
+// Abbr
+
+abbr, a abbr, abbr[title] {
+  border-bottom: none;
+  text-decoration: none;
+  font-weight: inherit;
+  font-style: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+
+a {
+background: rgba(0,0,0,0.05);
+text-decoration: none;
+&:hover {text-decoration: none;}
+-webkit-transition: all 0.3s ease-in-out;
+-moz-transition: all 0.3s ease-in-out;
+-o-transition: all 0.3s ease-in-out;
+-ms-transition: all 0.3s ease-in-out;
+transition: all 0.3s ease-in-out;
+color: $color-gray-dark;
+&:hover {
+  color: $color-gray-dark;
+}
+
+
+}
+
+/*
+a[href*="//"]:not([href*="http://department-of-veterans-affairs.github.io/vets-website"]) {
+  background: url(../images/icons/icon-exit-white.png);
+  -webkit-background-size: 18px 15.38px;
+  background-size: 18px 15.38px;
+  background-position: right center!important;
+  background-repeat: no-repeat;
+  padding-right: 2em;
+  position: relative;
+  &:hover {
+    background:rgba(0,0,0,0.2) url(../images/icons/icon-exit-gold.png)!important;
+    -webkit-background-size: 18px 15.38px!important;
+    background-size: 18px 15.38px!important;
+    background-position: right center!important;
+    background-repeat: no-repeat!important;
+  }
+}
+*/
+
+
+
+// Logo and Header
+
+.header {
+  clear: both;
+  padding: 0 0 .5em 0;
+  margin: 0;
+
+  h1 {margin: 0; line-height: 1em; @media #{$small} {margin: .25em 0 0 0;} }
+  color: #fff;
+}
+
+h1 {
+  a {
+    text-indent: 180%;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    background: image-url("design/logo/logo.png") top left no-repeat;
+    width: 180px;
+    height: 30px;
+    background-size: contain;
+    border-bottom: none;
+    text-decoration: none;
+    &:hover, &:active, &:focus {background: image-url("design/logo/logo-hover.png") top left no-repeat; background-size: contain;}
+  @media #{$small} {
+    background: image-url("design/logo/logo.png") top left no-repeat;
+    width: 263px;
+    height: 50px;
+    background-size: contain;
+    &:hover {
+      background: image-url("design/logo/logo-hover.png") top left no-repeat;
+      background-size: contain;
+    }
+  }
+}
+}
+
+
+// Type
+
+h1, h2 {
+font-family: $font-sans;
+font-weight: 600;
+}
+h3, h4, h5, h6 {
+color:$color-primary-darkest;
+font-family:$roboto-slab;
+font-weight: 400;
+  &.alternate{
+    font-family: $font-sans;
+  }
+}
+
+// Header
+
+
+// Links
+
+a {text-decoration: underline; background: rgba(0,0,0,.05);}
+a:hover {text-decoration: underline; background: rgba(0,0,0,.1);}
+
+// Banner
+
+#content {margin: 0; padding: 0; color: $color-gray-dark;}
+
+#content .splash {
+padding: .5em 0;
+margin: 0;
+p {color: #fff; font-family: $font-sans;}
+
+&.home {
+  background: #ccc;
+  background: rgba(0,0,0,.1);
+}
+
+&.app {
+  padding: 0;
+  p {color: #fff; font-family: $font-sans;}
+  ul.breadcrumbs {
+    display: inline-block;
+    margin: 0 0 .5em 0; padding: 0;
+    @media #{$small} {margin-right: 1em;}
+    h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
+    li {overflow: hidden; padding: 0;}
+  }
+  p {margin: .5em 0 1em 0;}
+}
+
+@media #{$small} {padding: 1em 0;}
+@media #{$medium} {padding: 2em 0;}
+@media #{$large} {padding: 2.5em 0;}
+span, h2 {
+  padding: 0;
+  display: inline;
+  line-height: 1.3em;
+  margin: .5em 0 0 0;
+    white-space: pre-wrap;
+  color: #333;
+  a {background: $color-gold; color: #444;}
+}
+
+h2 span {clear: both; padding: .1em; display: inline-block; background: $color-gold; font-weight: normal;}
+h2, h3, p {/*padding: .35em; */ margin: 0; display: inline-block; font-family: $roboto-slab;}
+h2 {
+  font-size: 1em;
+  display: inline-block;
+  @media #{$small} {font-size: 2em;}
+}
+h3 {font-weight: 500; font-size: 1.4em; color: #555;}
+
+&.alternate {
+  li a {
+    color: $color-primary-darkest;
+    border-bottom: 2px solid $secondary-color;
+  }
+
+  li.parent:after {color: #ccc;}
+}
+
+}
+
+.pitch {
+@media #{$small} {padding: .5em 0;}
+h2, h3 {color: $color-primary-darkest; font-weight: 400; padding: .75em; line-height: 1.3em; display: inline-block; margin: 0;}
+}
+
+#experience .splash {padding: 0; margin: 0;}
+
+#experience .splash h2 {
+margin: .5em 0; padding: 0;
+a {
+  margin: 0;
+  color: #444;
+  background: $color-gold;
+  line-height: 1.4em;
+  font-size: .9em;
+}
+}
+
+.feature-list ul {
+margin: 0; padding: 0;
+li {
+a {font-weight: bold;}
+list-style-position: outside;
+list-style-type: none;
+border-bottom: 1px solid #ccc;
+padding: 1em 0;
+&:last-of-type {border-bottom: none;}
+}
+}
+
+.primary {
+
+@media #{$small} {padding: 1em 0;}
+@media #{$small} {padding: 2em 0;}
+@media #{$medium} {padding: 2em 0;}
+h3 {
+  padding: 0 0 .5em 0;
+}
+}
+
+html.no-touch .banner {
+background: image-url("design/banner.jpg") 50% 60% no-repeat;
+background-size: cover;
+}
+
+// Headings
+
+h1 {}
+h2 {}
+h3 {color: $color-primary-darkest; font-size: 1.8em; padding: 0 0 1em 0;}
+h4 {font-size: 1.5em;}
+h5 {font-size: 1em; font-weight: bold;}
+h6 {}
+
+// tagline
+
+#content .tagline-content {
+p {
+  font-size: 2.15em;
+  border-bottom: 2px solid white;
+  padding: 0 0 1em 0;
+  margin: 0 0 2em 0;
+  color: rgba(255,255,255,.7);
+  line-height: 1.2em;
+}
+}
+
+body.home, body.fourohfour {
+.main {background: none;}
+}
+
+// Content Callouts
+
+#content .main .section.one {
+
+  ul {
+  margin: 0 0 1em 1.2em;
+    padding: 0;
+    list-style-position: outside;
+    li {
+      list-style: square;
+    }
+  }
+
+  ul.plain {
+    margin: 0 0 1em 0;
+  }
+
+  ul[class*="block-grid-"] {
+    display: block;
+    padding: 0;
+    margin: 0 -0.625rem;
+  }
+}
+
+.call-out {
+  background: $color-primary-alt-lightest;
+  padding: 1em;
+  clear: both;
+  margin: 0 0 1.5em 0;
+  h3 {font-size: 1.5em;}
+  ul {
+    margin: 0 0 .5em 1.5em; padding: 0;
+    li {
+      list-style: square;
+      padding: 0 .25em;
+      margin: 0;
+    }
+  }
+}
+
+// Content lead paragraphs
+
+#content.interior .primary {
+  li p:first-of-type,
+  ul+p
+   {
+    font-weight: normal;
+  }
+  p:nth-child(1) {
+    font-size: 1.1em;
+    letter-spacing: normal;
+    font-weight: 600;
+    padding-bottom: 1em;
+  }
+
+}
+
+#content .main.interior {
+background: #fff;
+a {
+  text-decoration: underline;
+
+  // padding: .2em .3em .1em .3em;
+  // display: inline-block;
+  // margin-bottom: .2em;
+}
+
+// First Paragraph
+
+
+
+}
+
+// Home page specific
+
+.home #content {
+h2, h3, h4, h5, h6, p, ul, li, ol, a {color: #fff;}
+color: #fff;
+
+.post-date {font-size: .5em; color: $color-gold;}
+
+h3 {border-bottom: 1px solid #fff; border-bottom: 6px solid $primary-color; font-size: 1.65em; margin: 0 0 2em 0; padding: 0 0 .2em 0;}
+
+h4 a {
+  text-decoration: none;
+  &:hover {
+    border-bottom: 1px solid #fff;
+    color: $color-gold;
+  }
+}
+
+.read-more {
+  font-size: .5em;
+  display: inline-block;
+  border-bottom: 1px solid $secondary-color;
+  color: $secondary-color;
+  &:hover {
+    background: none;
+    color: $color-primary-darkest;
+    background: rgba(1,1,1,.1);
+    border-bottom: 1px solid $secondary-color;
+  }
+}
+
+ul.plain {
+  margin: 0;
+  padding: 0;
+  li {list-style: none; border-bottom: none;}
+  /*a {background: none;}*/
+}
+
+.section {
+  padding: 4em 0 2em 0;
+  text-align: left;
+}
+
+.section.main-menu {
+  padding: .5em .5em 3.35em .5em;
+  @media #{$small} {padding: 0 0 3em 0;}
+  background: transparent;
+  .navigation {
+    padding: 1.5em 0 0 0;
+    background: none;
+    ul li a {
+      h3 {border-bottom: none;}
+      -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
+    }
+  }
+}
+
+
+.section.one, .section.two {
+  background: none;
+  a {
+    &:hover {
+      color: $color-gold;
+      background: rgba(0,0,0,.2);
+    }
+  }
+}
+
+.section.one {
+  padding: 0 0 1.5em 0;
+    @media #{$small} {padding: 2em 0 4em 0;}
+}
+
+.section.two {
+  padding: 2em 0;
+  a, h3 {color: #fff;}
+  h3 {border-bottom: none;}
+  background: rgba(0,0,0,.1);
+}
+
+.section.three {
+  background: #fff;
+  padding: 5em 0;
+  h2, h3, h4, h5, h6, p, li {color: #444;}
+  h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
+  a {color: $color-primary-darkest;}
+}
+}
+
+#content .section.primary {
+background: none;
+padding: 2em 0;
+background: $color-primary;
+h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
+p {color: rgba(255,255,255,1);}
+a {color: #fff;}
+}
+
+#content .section.secondary {
+background: rgba(255,255,255,.85);
+}
+
+#content .section.tertiary {
+background: $polar;
+/*background: rgba(0,0,0,.05);*/
+}
+
+#content .section.quaternary {
+/*background: rgba($color-green, .83);*/
+background: #dcddde;
+h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
+h4 {
+  font-weight: 700;
+}
+.cards {
+  a {
+    height:12em;
+  }
+}
+.feature {
+  background: none;
+}
+}
+
+#content .section.coda {
+background: $color-primary-darker;
+color: #fff;
+h2, h3, h4, h5, h6, a {color: #fff;}
+h4 {font-size: 1.5em;}
+}
+
+#content .section {
+h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
+h2 {line-height: 1.2em;}
+}
+
+#content .section .feature {
+min-height: 11em;
+
+}
+
+#content .panel {
+background: $color-gray-lightest;
+padding: 1em;
+margin-bottom: 1.5em;
+clear: both;
+}
+
+#content .actions {padding: 1em 0;}
+
+#content .section.do {
+background: #efefef;
+padding: 2em 0;
+
+h2, h3, h4, h5, h6, p, li {color: #444;}
+h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
+a {color: #fff;}
+a.usa-button-primary {background: $color-green;}
+}
+
+#content .main {
+a.usa-button-primary.start {background: $color-green; text-decoration: none;}
+}
+
+#content .section.secondary,
+#content .section.tertiary,
+#content .section.quaternary,
+#content .section.coda {
+padding: 3em 0;
+h3 {font-size: 2.2em;}
+}
+
+#content .section.start {
+background: $color-green-lightest;
+padding: 3em 0;
+border-bottom: 3px solid #fff;
+}
+
+// Sections
+
+.section {
+background: #fff;
+&.one {
+  padding: 2em 0 0 0;
+}
+&.two {
+  padding: 0 0 4em 0;
+  h3 {color: darken($color-green, 10);}
+  clear: both;
+}
+&.three {clear: both; padding: 2em 0;}
+}
+
+
+// Action
+
+.action {
+margin: 0 auto;
+text-align: left;
+.button {
+  font-size: 1.25em;
+  padding: 1em 3.5em;
+}
+}
+
+
+// Iconic SVG icons
+
+.icon {
+display: inline-block;
+margin: 10px;
+width: 16px;
+height: 16px;
+}
+
+.icon-account-login {
+fill: #f00;
+}
+
+.icon {
+color: red;
+fill: red;
+}
+
+
+// Breadcrumbs
+
+#content ul.breadcrumbs {
+background: none;
+border: none;
+h2 {font-size: 1em;}
+display: block;
+padding: 0;
+@media #{$small} {margin: 0 0 1em 0;}
+border-radius: 0;
+border-radius: none;
+-webkit-border-radius: 0;
+
+
+li {
+  text-transform: none;
+  display: block;
+  margin: .25em 0;
+  padding: .1em;
+  display: inline-block;
+  line-height: 1.15em;
+  height: auto;
+  vertical-align: middle;
+  font-size: .85em;
+  @media #{$small} {font-size: 1.35em;}
+  &:hover  {border-bottom: none; text-decoration: none;}
+  &.parent {
+    a {background: none;}
+    display: block;
+    padding-top: .5em;
+    margin: 0 0 .75em 0;
+    @media #{$small} {display: inline-block;}
+
+    &:before {content: none; vertical-align: middle;}
+    &:after {content:" › "; display: inline-block; color: #fff; padding: 0 .5em;}
+
+  }
+
+  &.active {
+    background: $color-gold;
+    color: #000;
+    font-family: $roboto-slab;
+    font-weight: 400;
+    margin: .5em 0;
+    padding: .2em;
+    font-size: 1.35em;
+    @media #{$medium} {font-size: 1.8em;}
+    &:before {content: ""; padding: 0; margin: 0;}
+  }
+
+
+}
+a {
+  border-bottom: 3px solid #fff;
+  background: none;
+  text-decoration: none !important;
+  color: #fff;
+  &:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
+}
+}
+
+// General List Styles
+
+ul {
+  li {
+  list-style: inside;
+  }
+}
+
+ol {
+  margin: 0 0 0 1.25em;
+li {
+    list-style-position: outside;
+  }
+}
+
+li {
+  span.meta {
+    display: inline-block;
+    padding: .5em;
+    color: $color-primary-darkest;
+    background: rgba($color-primary-darkest,.05);
+    font-weight: bold;
+    float: right;
+    margin: .5em 0 1em 1em;
+  }
+}
+.inline-list {
+  > li {
+    float: left;
+  }
+  > * {
+    display: block;
+  }
+}
+
+// Tables
+table {
+  border: 0;
+  text-align: left;
+  @media #{$small-only} {
+    font-size: .5em;
+  }
+}
+td,th {
+  padding-top:.8em;
+  padding-bottom: .8em;
+  padding-left: .8em;
+}
+
+th{
+  &[colspan] {
+    background: #E8F5FA;
+    font-size: 1.19rem;
+    padding-top:.8em;
+    padding-bottom: .8em;
+    padding-left: .8em;
+    color:$color-primary-darkest;
+  }
+  span {
+    font-weight: normal;
+  }
+}
+  tr {
+  background: #fff!important;
+  }
+
+// Definition lists
+
+dl.simple {
+  margin: 0;
+  padding: 0 0 1em 0;
+  &.feature {padding: .25em .5em;}
+  dd {padding: 0; margin: 0; border-bottom: 1px solid #eee; &:last-of-type {border-bottom: none;}}
+}
+
+// Checklists
+
+ul.checklist, ol.checklist {
+margin: 0 0 0 1.35em; padding: 0;
+li {
+  font-weight: 500;
+  span {font-weight: normal; font-size: 1em; display: block; margin-left: 2.25em; color: #555;}
+  padding: 1em 0;
+  border-bottom: 1px solid #ccc;
+  &:last-of-type {border-bottom: none;}
+  h5 {font-size: 1.35em;}
+  ul li {
+    border-bottom: none;
+    padding: .5em 0;
+    span {background: rgba(0,0,0,.1); display: block; padding: 1em .5em; text-align: center;}
+  }
+
+  ul {
+    margin: 0 !important;
+    padding: 0;
+    text-align: center;
+    svg {display: block; margin: .25em auto;}
+
+    li {padding: 0; margin: 0;}
+    &:before {margin: 0; padding: 0;}
+    span.type {margin: .25em .25em 1em .25em; color: $color-primary-darkest;  @media #{$small} {padding: 2.5em 1em;}  background: rgba($secondary-color, .15);}
+    }
+  }
+}
+
+// Informational Content
+
+.informational-content, .introductory-content {
+  padding: 2em 0 2em 0;
+  background: rgba(0,0,0,.05);
+}
+
+.introductory-content {
+  padding: 1em  0;
+  @media #{$small} {/*padding: 3em 0.9375em;*/ padding: 3em 0;}
+  background: #efefef;
+  margin: 0 auto;
+  p {
+    font-size: 1em;}
+    @media #{$small} {font-size: 1.35em;}
+}
+
+// Navigation
+
+#content.interior .section-nav {
+  padding: 1em 0 2em 0;
+  ul.small-block-grid-1 {
+    h2, h3, h4, h5, h6 {
+    }
+  }
+}
+
+#content.interior .navigation,
+#content #playbook .navigation {
+  padding: 1em  0;
+  @media #{$small} {padding: 1em 0 3em 0;}
+  background: $color-gray-lightest;
+  color: $color-primary-darkest;
+  border-bottom: 2px solid #fff;
+  margin: 0 auto;
+
+  ul.small-block-grid-1 {
+    margin: 0;
+    padding: 0;
+    li {
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      h4, h5 {font-size: 1em; }
+      span {color: $color-gray-dark;}
+    }
+  }
+
+  ul.cards li {
+    margin: 0;
+    height: auto;
+    h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 600; font-family: $font-sans; font-size: 1.35em;}
+    h4 {font-size: 1.3em;}
+    border-bottom: 1px solid rgba(0,0,0,.2);
+    &:last-of-type { border-bottom: none;}
+    a {
+    color: $color-primary-darkest;
+    -webkit-box-shadow: none;
+    border-bottom: none;
+    box-shadow: none;
+    text-decoration: none;
+    border-radius: none;
+    border-radius: 0;
+    padding: 1em .5em;
+    height: auto;
+    margin: 0;
+    background: none;
+    &:hover {padding-left: .5em; background: rgba(0,0,0,.1); border-left: 4px solid $color-primary;}
+    }
+  }
+}
+
+
+body.home .navigation, body.fourohfour .navigation {
+  background: none;
+  padding: 3em 0;
+}
+
+body.fourohfour #content {
+  h3 {margin-top: 1em; font-size: 1.4em;}
+}
+
+body.home .main-navigation {
+  padding: 2em 0;
+  background: rgba(0,0,0,.2);
+  ul.cards li {
+    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.7);
+  }
+}
+
+.draft {
+  position: absolute;
+  top: -3.5em;
+  right: -5em;
+  z-index: 1000;
+  background: rgba(#a91d28, .9);
+  color: #fff;
+  font-size: .85em;
+  position: fixed;
+  padding: 2.5em 4em 1em 4em;
+  -ms-transform: rotate(45deg); /* IE 9 */
+  -ms-transform-origin: 20% 40%; /* IE 9 */
+  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
+  -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
+  transform: rotate(45deg);
+  transform-origin: 20% 40%;
+
+}
+
+// Cards
+
+
+ul.large-block-grid-3 >li {
+
+}
+
+[class*="block-grid-"]>li {
+  padding: .1em 0;
+  @media #{$small} {padding: 0 0.625rem 1.25rem;}
+}
+
+
+#content  .cards {
+-webkit-backface-visibility: hidden;
+backface-visibility: hidden;
+
+a, .coming-soon {
+  padding: .2em .5em;
+  margin: 0 0 .4em 0;
+  @media #{$small} {padding: .75em; margin: 0 0 .25em 0}
+  @media #{$medium} {height: 9em;}
+  border-radius: .2em;
+  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
+  @media #{$small} {padding: .45em .75em; text-align: left;}
+  width: 100%;
+  color: #fff;
+  display: block;
+  font-weight: normal;
+  text-decoration: none;
+  h3 {
+    text-decoration: none;
+    margin: 0 0 .25em 0;
+    @media #{$small} {margin: 0 0 1em 0;}
+  }
+  border-bottom: 4px solid rgba(255,255,255,0);
+  background: $color-primary-darker;
+
+  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
+  h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
+
+p {
+  /*  display: -webkit-inline-flex;
+    display: inline-flex;
+    */
+    @media #{$small} {padding: 0m 0 1em 0;}
+    line-height: 1.5em;
+
+    @media #{$small} {margin: 0;}
+    /*
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    */
+  }
+
+  &:hover, &:active, &:focus {
+    background: $color-primary;
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
+  }
+
+  h2, h3, h4, h5, h6 {padding: 0 0 .25em 0; margin: 0; color: #fff; display: block; clear: both; width: 100%;}
+
+  &:hover div {
+    a {color: $color-gold; p {color: $color-gold;}}
+  }
+}
+
+.coming-soon {
+  background: rgba(255,255,255,.05);
+  color: #fff;
+  border-bottom: 2px solid rgba(0,0,0,0);
+
+  h3 {color: #fff; color: rgba(255,255,255,.7);}
+
+  &:hover, &:active, &:focus {
+    background: rgba(255,255,255,.05);
+    color: #fff;
+    p {color: #fff;}
+    border-bottom: 2px solid rgba(0,0,0,0);
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+}
+}
+
+// Telephone numbers
+
+span.tel {
+background: rgba(0,0,0,.05);
+padding: .2em;
+display: inline-block;
+}
+
+// Information Grid
+
+ul.information-grid {
+
+li {
+
+  strong {
+    font-size: 1.3em;
+    color: $color-primary-darkest;
+  }
+
+  p {
+    font-size: .9em;
+  }
+
+  div {
+    padding: .75em;
+    margin: 0 0 .5em 0;
+    @media #{$small} {min-height: 12em;}
+    background: #eee;
+    background: rgba(0,0,0,.05);
+    &:hover, &:focus, &:active {background: rgba(0,0,0,.1);}
+  }
+  a {
+
+    text-decoration: none;
+    border-bottom: 2px solid $color-primary-darkest;
+
+  }
+}
+
+}
+
+
+// Blog / Playbook
+
+body.index, body.post-single, body.page-playbook {
+background:#fff image-url("design/background/thread.png") top left no-repeat;
+background-size: contain;
+
+h1 a {
+  text-indent: 180%;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  border-bottom: none;
+  text-decoration: none;
+  width: 180px;
+  height: 30px;
+  background: image-url("design/logo/logo-alt.png") top left no-repeat;
+  background-size: contain;
+  &:hover, &:active, &:focus {
+    background: image-url("design/logo/logo-alt-hover.png") top left no-repeat;
+    border-bottom: none;
+    background-size: contain;
+    text-decoration: none;}
+
+    @media #{$small} {
+      width: 263px;
+      height: 50px;
+      background: image-url("design/logo/logo-alt.png") top left no-repeat;
+      background-size: contain;
+      &:hover {
+        background: image-url("design/logo/logo-alt-hover.png") top left no-repeat;
+        background-size: contain;
+      }
+    }
+  }
+  .main {
+    background: white;
+  }
+
+}
+
+.post-date, .post-author {
+  color: #444;
+}
+
+.post-date {
+  margin-bottom: 2.5em;
+  font-size: .85em;
+}
+
+
+
+.blog-navigation {
+  padding: 2em 0;
+}
+
+
+span.next {
+  float: right;
+  display: inline-block;
+}
+
+
+body.posts,
+body.post-single,
+body.index,
+body.page-playbook {
+  .primary {padding: 0; margin: 0;}
+  .splash {
+    margin: 0;
+    @media #{$small} {margin: .5em 0 0 0;}
+    h2 {
+      &.tagline {padding: 0;}
+      padding: 0; margin: 0 0 2em 0; background: none; color: $color-primary-darkest;
+      a {text-decoration: none; margin: 0; color: $color-primary-darkest; background: none; border-bottom: none; padding: .5em .5em; &:hover {padding: .5em .65em;}}
+      @media #{$medium} {position: fixed; margin: .75em 0 0 0;}
+    }
+  }
+
+  .post-preview {
+    border-bottom: 1px solid rgba(0,0,0,.2);
+    padding: 0 0 3em 0;
+    margin: 0 0 3em 0;
+    &:last-of-type{border-bottom: none;}
+  }
+
+  .related-posts {
+    border-top: 1px solid $color-gold;
+    padding: 2em 0 1em 0;
+    margin: 2em 0 0 0;
+    h6 {line-height: 1.2em; margin: 0; padding: 0; font-size: 1.15em;}
+    ul.plain.posts {
+      margin: 0; padding: 0;
+      li {
+        margin: 0;
+        padding: 0;
+        a {
+          padding: 0; margin: 0;
+          .post-title {color: $color-primary-darkest; font-size: 1em; margin: 0; padding: 0;}
+          .post-date {color: #444; margin: 0; padding: 0 0 1em 0;}
+        }
+      }
+    }
+  }
+
+  .post {
+    a, p, li, h1, h2, h3, h4, h5, h6, dl, dd, dt, caption, figure, blockquote {color: #444; line-height: 1.65em;}
+    a {
+      text-decoration: none;
+      border-bottom: 1px solid $color-gold;
+      &:hover {border-bottom: 1px solid $secondary-color;}
+    }
+
+    .page-number {
+      color: #444;
+    }
+
+    span.previous {
+      float: left;
+      display: inline-block;
+    }
+
+    h3 {
+      text-decoration: none;
+      background: none;
+      padding: 0;
+      font-size: 1.35em;
+      margin: 0 0 .5em 0;
+      display: block;
+      a.title {
+        font-size: 1.65rem;
+        border: 2px solid $secondary-color;
+        padding: .75em;
+        color: $color-primary-darkest;
+        background: none;
+        display: block;
+        text-decoration: none;
+        &:hover {
+          -webkit-transition: all 0.3s ease-in-out;
+          -moz-transition: all 0.3s ease-in-out;
+          -o-transition: all 0.3s ease-in-out;
+          -ms-transition: all 0.3s ease-in-out;
+          transition: all 0.3s ease-in-out;
+          border: 2px solid $secondary-color;
+        }
+      }
+    }
+
+    &.full {
+      h3.title {
+        border: 2px solid $secondary-color;
+        padding: .75em;
+        color: $color-primary-darkest;
+        background: none;
+        font-size: 1.65rem;
+        display: block;
+        text-decoration: none;
+      }
+    }
+  }
+
+  h3 {margin-top: 1em; margin-bottom: 0; padding-bottom: .5em; font-size: 1.5em; color: $color-primary-darkest;}
+}
+
+// Footer
+
+.footer {
+  color:#fff;
+  padding: 0 !important;
+  margin: 0;
+  background: darken($color-primary-darkest, 02);
+
+
+    .small-block-grid-1 {
+      li {padding: 0; margin: 0;}
+    }
+
+  .usa-social-links a {
+    border-bottom: none;
+    display: inline-block;
+    &:hover {
+      border-bottom: none;
+    }
+  }
+  ul {
+    margin: 0;
+    padding: .5em 0;
+    border-bottom: 1px solid $color-primary;
+    @media #{$small} {
+      border-bottom: none;
+      padding: 0;
+      margin: 1.5em 0 2em 0;
+    }
+  }
+  padding: 0;
+  li, p, a {
+    color: #fff;
+    font-size: 1em;
+    &:before {
+      content: none;
+    }
+  }
+
+a {
+  text-decoration: underline;
+  display: block;
+  background: none;
+  padding: 0;
+  font-weight: 400;
+  @media #{$small} {display: inline-block; margin: .25em 0;}
+  &:hover {color:#fff;}
+  &.contact, &.blog {
+    padding: .65em; font-size: 1em;  text-align: center; border: 2px solid $secondary-color;
+    @media #{$small} {margin: 1.5em auto; display: inline-block;}
+    &:hover, &:focus, &:active {
+      background: $secondary-color; color: #fff;
+    }
+  }
+
+  &.contact {
+    @media #{$small} {margin: 0 0 0 1em;}
+  }
+  &.blog {border: none; &:hover {background: none; color: $color-primary-alt;}}
+}
+.footer-logo a {
+  display: none;
+  @media #{$medium} {padding: 0; display: block;}
+  @media #{$medium} {background:image-url("design/logo/logo.png") 102% 102% no-repeat!important;border-bottom:0!important;width: 112px; height:32px; display: block;background-size: 160px!important; text-indent:180%; overflow:hidden}
+}
+.newsletter {
+  label {
+    color:#fff;
+    font-size:1.15rem;
+    font-family: 'Roboto Slab', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    margin:.3em 0 .5em;
+  }
+  input {
+    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+  }
+}
+.footer-address {
+  background: rgba(0,0,0,.055);
+}
+.footer-seal {
+        background:image-url("design/seal/seal-footer.png") no-repeat;
+        text-indent:-325px;
+        overflow: hidden;
+
+      @media #{$small-up} {
+        background-size:50px;
+        // background-position: 4% 15%;
+      }
+      @media #{$small-up} {
+        background-size: 206px;
+        background-position: center 14px;
+        padding: 1.75em 0 1.5em;
+      }
+
+      @media #{$large-up} {
+        background-size: 206px;
+        background-position: 0 14px;
+        padding: 1.75em 0;
+      }
+}
+.footer-crisis {
+  background:$color-gold;
+  margin: 1.625rem 0;
+  padding: .25rem 0;
+  color: $color-gray-dark;
+  font-size: .85em;
+  text-align: center;
+  span {
+    font-weight: bold;
+  }
+  a {
+    display:inline;
+    text-decoration: none!important;
+    color:rgb(0,0,0);
+    &:hover {
+      border-bottom: 2px solid $color-gold;
+    }
+    @media #{$small-only} {
+      padding: .25em 0;
+    }
+    @media #{$medium-only} {
+      display:block
+    }
+  }
+}
+ul.final-list {
+  text-align: center;
+  font-size: .8em;
+  padding: 1.5em 0 0 0;
+  width: 100%;
+  border-bottom: none !important;
+  display: block;
+  margin: 0 auto;
+  @media #{$medium} {font-size: .9em;}
+
+  &:after {
+     visibility: hidden;
+     display: block;
+     font-size: 0;
+     content: " ";
+     clear: both;
+     height: 0;
+     }
+
+
+  li {
+      padding: 0;
+      display: inline-block;
+      text-align: center;
+      &:last-child {
+        margin-right: 0;
+      }
+      &:after {
+        content:"|";
+        padding: 0 .15em;
+        display: inline;
+      }
+      &:last-of-type:after {
+        padding:0;
+        content: "";
+      }
+    a {
+        display:inline-block;
+        padding: .35em;
+    }
+  }
+}
+
+li {
+  list-style: none;
+  padding: .5em 0;
+  font-weight: 300;
+  font-size: .95em;
+  @media #{$small}
+  {} margin: 0 auto; text-align: left; display: block;}
+  padding: 2em 0 0 0;
+  dl.vcard {
+    padding: 1.2em 0 0 0;
+    margin: 0;
+    @media #{$small} {padding: 1.625rem 0.75rem;}
+    display: block;
+    background-size: 50px;
+    text-align: center;
+    @media #{$small} {text-align: left;}
+    border: none;
+    font-size: .85em;
+    color: #fff;
+    @media #{$small-up} {
+      margin: 0 0 0 11%;
+    }
+    @media #{$medium-only} {
+      margin:4% 0 0 11%;
+    }
+  }
+  dd, dt {
+    padding: 0; margin: 0; text-align: center;
+    @media #{$small} {
+      &:after {
+        content: " | ";
+      }
+
+      &:last-of-type:after {
+        content: "";
+      }
+    }
+    @media #{$small} {display: inline;}
+  }
+  .fn {
+    font-size: 1em;
+    @media #{$small-only} {
+      font-size: .9em;
+
+    }
+  }
+  dd.locality, dd.postal-code {display: inline;}
+  dt {@media #{$small} {text-align: left;}}
+
+  .post-script {
+    font-size: .85em;
+    margin: 0;
+    padding: 0 0 1em 0;
+    background: darken($color-primary-darkest, 5);
+  }
+
+  blockquote {
+    border-left: 0;
+    padding: 1em 1em 0 1em;
+    color: #fff;
+    text-align: center;
+    margin: 0 auto;
+    font-style: italic;
+  }
+
+  span.source {
+    color: #fff;
+    color: rgba(255,255,255,.8);
+    text-align: center;
+    margin: 0 auto;
+    display: block;
+  }
+}
+
+body.index, body.page-playbook {
+  .footer {
+    // background: $color-primary-darkest url(../img/design/seal/seal.png) bottom center no-repeat;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#003f72+21,003159+100 */
+    background: #003f72; /* Old browsers */
+    padding: 0;
+    margin: 0;
+
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMSUiIHN0b3AtY29sb3I9IiMwMDNmNzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMTU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+    background: -moz-linear-gradient(top,  #003f72 21%, #003159 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(21%,#003f72), color-stop(100%,#003159)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #003f72 21%,#003159 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #003f72 21%,#003159 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #003f72 21%,#003159 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #003f72 21%,#003159 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f72', endColorstr='#003159',GradientType=0 ); /* IE6-8 */
+  }
+}
+
+.footer .content {
+  @media #{$small} {padding: 2em 0 0 0;}
+  margin: 0;
+
+}
+
+.footer li b {font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;}
+
+// Newsletter
+
+.icon {
+display: inline-block;
+width: 1.75em;
+height: 1.75em;
+margin: 0 0 1em 0;
+fill: $color-primary-darkest;
+}
+
+.glyph {
+font-size: 16px;
+width: 17em;
+margin-right: 1.5em;
+float: left;
+overflow: hidden;
+}
+svg {
+color: #444444;
+}
+
+// Alerts
+
+.alert-box {
+border-bottom: none;
+margin: 0;
+padding: 1.25em .4em 0 0;
+
+&:after {
+   visibility: hidden;
+   display: block;
+   font-size: 0;
+   content: " ";
+   clear: both;
+   height: 0;
+   }
+
+@media #{$small-up} {padding: 1em .4em 0 .4em;}
+margin-bottom: 0;
+a {color: #fff; background: none;}
+
+&.notice {
+  font-size: .9em;
+  font-weight: 700;
+  clear: both;
+  padding: .5em;
+  @media #{$small} {padding: .5em .85em;}
+  margin-bottom: .75em;
+  -webkit-box-shadow: 0 0 6px rgba(0,0,0,.2);
+  box-shadow: 0 0 6px rgba(0,0,0,.2);
+  background: $color-primary-darker;
+  &:after {
+     visibility: hidden;
+     display: block;
+     font-size: 0;
+     content: " ";
+     clear: both;
+     height: 0;
+     }
+}
+
+&.coda {
+  font-size: .9em;
+  font-weight: 500;
+  clear: both;
+  padding: 1.25em 0 1.5em 0;
+  border-top: none;
+  background: $color-primary-darker;
+
+  .usa-button {
+    font-size: .9em;
+  }
+}
+
+.feedback {
+  color: #fff;
+  @media #{$medium-up} {
+    text-align: right;
+  }
+  @media #{$medium-up} {
+    right:3em;
+    vertical-align: middle;
+    top: 2em;
+  }
+}
+.message {
+  font-size:.95rem;
+  font-weight: 700;
+  span {
+    background: image-url("design/icons/wrench.png") center left no-repeat;
+    background-position: 0 4px;
+    background-repeat: no-repeat;
+    background-size: 16px 14px;
+    display:inline-block;
+    padding-left: 1.5em;
+
+  }
+  p {
+    font-size: .9rem;
+    font-weight: 300;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 0;
+  }
+}
+
+.text-right {
+  padding: 0 .5em 0 0;
+  line-height: 1em;
+  margin: 0;
+  text-align: right !important;
+  a.usa-button {margin-top: 0; margin-bottom: .75em;}
+  }
+}
+
+// Search
+
+#search_form {
+  padding: 1.1em 0;
+  text-align: right;
+  label {
+    position: absolute;
+    left: -9999em;
+    font-size: 1px;
+    overflow: hidden;
+    float: left;
+  }
+  input[type="text"] {
+    height: 3em;
+    margin: 0;
+    width: 100%;
+    color: $color-gray-dark;
+    padding: .2em;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  input[type="submit"] {
+    margin: 0;
+    height: 3em;
+    text-align: center !important;
+    width: 100%;
+    padding: 0;
+    border-radius: 0px 3px 3px 0px;
+    -moz-border-radius: 0px 3px 3px 0px;
+    -webkit-border-radius: 0px 3px 3px 0px;
+  }
+
+}
+
+.search-button {
+  margin: 0.1em .5em 0 0;
+  padding: 0;
+  float: right;
+  a {
+    line-height: 1em;
+    display: inline-block;
+    padding: .41em;
+    font-size: .85em;
+    border-radius: .2em;
+    text-decoration: none;
+    background: $color-primary;
+    color: #fff;
+  }
+}
+
+.reveal-modal #search_form {
+  margin-bottom: 1em;
+}
+
+.reveal-modal .close-reveal-modal {
+  font-size: 1em;
+  clear: both;
+  text-decoration: none;
+  color: $color-gray-dark;
+  text-align: center;
+  margin: 1em 0;
+  position: relative;
+  top: auto;
+  display: block;
+  padding: 1em 0;
+  right: auto;
+  width: 100%;
+  bottom: auto;
+}
+
+// Plain lists
+
+ul.plain {
+margin: 0 0 1.5em 0;
+padding: 0;
+li {
+  list-style: none;
+  display: block;
+  .post-date {padding: 0; margin: 0; color: $secondary-color;}
+  padding: .5em 0;
+  border-bottom: 1px solid rgba(255,255,255,.2);
+  &:last-of-type {border-bottom: none;}
+}
+&.posts {
+  font-size: 1.65em;
+  a {
+    text-decoration: none;
+    background: none;
+    color: #fff;
+    .post-date {font-size: .65em;}
+    &:hover {
+      background: rgba(255,255,255,.2);
+    }
+  }
+}
+}
+
+// byline
+
+p.byline {font-size: .8em; color: #fff; color: rgba(255,255,255,.9);}
+
+
+
+// Simple List
+
+ul.simple-list, ol.simple-list {
+margin: 0 0 1em 1.25em;
+padding: 0;
+display: block;
+li {
+  padding: .35em 0;
+  list-style: square;
+
+}
+}
+
+// Info cards
+
+.card {
+position: relative;
+margin: 0 0 1.5em 0;
+padding: 1em;
+border: 1px solid #eee;
+dt {font-weight: 700;}
+dd {
+  padding: 0;
+  margin: 0;
+}
+&.templates {
+  height: 338px;
+}
+&:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+span {
+  display: block;
+}
+
+.number {
+  font-size: 3.25em;
+  font-weight: 700;
+  float: left;
+  margin: 0;
+  color: #003E73;
+  line-height: .65em;
+  display: inline-block;
+  padding: 0 .125em 0 0;
+}
+
+.heading, .description {
+  display: block;
+}
+
+.heading {
+  color:#006699;
+  font-size: .8em;
+  padding: 0;
+}
+
+.description {
+  font-size: 1.25em;
+  font-weight: 400;
+  padding: .2em 0;
+  text-align: left;
+  display: inline-block;
+  width: 100%;
+  text-transform:uppercase;
+}
+
+&.information {
+  background: none;
+}
+
+&.info-graphic {
+  border: 1px solid #fff;
+  background: none;
+  padding: 1em 1em 0;
+  line-height: 2.5;
+  span.number {
+    color: #fff;
+    display: inline-block;
+  }
+}
+
+
+
+}
+
+
+#playbook {
+h2 {background: none; font-size: 2.5em;}
+/*a {text-decoration: none; background: none;}*/
+
+.card a {
+  border-bottom: 2px solid $secondary-color;
+  display: inline-block;
+  background: rgba(0,0,0,.03);
+  &:hover {background: rgba(0,0,0,.1);}
+}
+}
+
+// Dividers
+
+.divider {
+&.margin {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+&.top {
+  border-top: 1px solid #f0f0f0;
+}
+&.bottom {
+  border-bottom: 1px solid #f0f0f0;
+}
+}
+
+// Steps
+
+.feature {
+background: $polar;
+padding: 1em;
+margin: 0;
+}
+
+// Process line
+
+.process {
+  padding: 0;
+  position: relative;
+  h2, h3, h4, h5, h6 {padding: .2em 0 0 0;}
+  h5 {font-size: 1.3em; margin: 0; padding: 0;}
+  h6 {font-size: 1.1em; margin: 0; padding: 0;}
+  list-style: none;
+  li {
+      list-style-type: none;
+      list-style: none;
+      ol {
+        margin: 0 0 1em 1.5em;
+        padding: 0;
+        li {list-style: decimal; padding: .25em 0;}
+      }
+      ul {
+        margin: 0 0 1em 1.25em !important;
+        padding: 0;
+        li {list-style: square;}
+      }
+  &.step {
+    border-left: 8px solid #ccc;
+    padding: 0 0 2em 2em;
+    margin: 0 !important;
+  &.last {
+    border-left: 0;
+  }
+      a {
+        /*background-color: #D9C799;*/
+      }
+  }
+  &.step.three.last,
+  &.step.four.last,
+  &.step.five.last,
+  &.step.six.last,
+  &.step.seven.last
+   {
+    &:before {
+    margin-left: -2.4em
+    }
+  }
+
+
+  /*&.va {border-left: 8px dashed #ccc;}*/
+
+  ul {
+    margin: .25em 0 1em 0;
+    padding: 0;
+    li {
+      margin: 0;
+      padding: .1em 0;
+
+    }
+  }
+  ol {
+    margin-top: .25em;
+    margin-bottom: 1em;
+    li {
+      margin-left: .2em;
+    }
+  }
+
+  &:before {
+    color:#fff;
+    float: left;
+    font-size: 1.3em;
+    font-weight: 700;
+    text-align: center;
+    width: 2em;
+    top: -.2em;
+    margin-left: -2.7em;
+    display: block;
+    border: 4px solid #fff;
+    background: $olso-gray;
+    border-radius: 4em;
+    position: relative;
+  }
+}
+
+li.one:before {content: "1";}
+li.two:before {content: "2";}
+li.three:before {content: "3";}
+li.four:before {content: "4";}
+li.five:before {content: "5";}
+li.six:before {content: "6";}
+li.seven:before {content: "7";}
+li.eight:before {content: "8";}
+li.nine:before {content: "9";}
+li.ten:before {content: "10";}
+li.eleven:before {content: "11";}
+li.twelve:before {content: "12";}
+li.thirteen:before {content: "13";}
+li.fourteen:before {content: "14";}
+li.fifteen:before {content: "15";}
+li.sixteen:before {content: "16";}
+li.seventeen:before {content: "17";}
+li.eighteen:before {content: "18";}
+li.nineteen:before {content: "19";}
+li.twenty:before {content: "20";}
+}
+.methodology {
+.medium-3 {
+  padding-top: 1.5em;
+  @media #{$small-only} {
+    padding-left: 1.5em;
+    h4 {
+      font-size: 1.4em;
+    }
+  }
+
+  ul {
+    margin: 0 0 1.5em 0; padding: 0;
+    li {
+    margin: 0;
+    padding: 0;
+    }
+  }
+
+  &.hcd {
+    h4 {
+      color: $secondary-color;
+    }
+  }
+
+}
+.medium-9 {
+  background: white;
+}
+ol:nth-child(n+2) {
+  li {
+    list-style-type:decimal;
+  }
+}
+li {
+  &.step {
+    padding-top: 1.5em;
+    border-left:4px solid $olso-gray;
+  }
+  h4 {
+    display: inline-block;
+    span {
+      font-family: $font-sans;
+    }
+  }
+  .interactive {
+    display: inline-block;
+    background: rgba(0,0,0,0.05);
+    padding: .2em .6em;
+    border-radius: 3px;
+    margin-left: 1.25em;
+    text-transform: uppercase;
+    font-size: .85em;
+    vertical-align: 15%;
+    letter-spacing: .05em;
+    @media #{$small-only} {
+      margin-left: 0;
+      margin-bottom: 1em;
+    }
+    @media #{$medium-only} {
+      margin-left: 0;
+      margin-bottom: 1em;
+    }
+  }
+  &:before {
+    background:white;
+    border: 4px solid $olso-gray;
+    color:$olso-gray;
+    font-size: 1.3em;
+    font-weight:700;
+    position: relative;
+    padding: 0;
+    margin-left: -2.6em;
+    top: -.1em;
+    width: 2em;
+  }
+
+  &.step.four,
+  &.step.five,
+  &.step.seven,
+  &.step.nine
+   {
+    &:before {
+      background:white image-url("icons/SVG/loop2.svg")center center no-repeat;
+      display:inline-block;
+      width:3.4em;
+      height:2.2em;
+      background-size:contain;
+      border:none;
+      margin-left: -3.3em;
+      padding-top: .25em;
+    }
+  }
+}
+
+&.page {
+  .discover {
+    background: none;
+  }
+  .medium-3 {
+    padding-top: 0;
+    ul {
+      margin-left: 0;
+    }
+  }
+  .medium-9 {
+      li {
+          list-style-type: disc;
+      }
+  }
+}
+}
+
+.human-centered {
+.discover,
+.design,
+.deliver {
+  border-top: 4px solid #fff;
+  border-bottom:4px solid #fff;
+  div:nth-child(1) {
+    border-right:8px solid #fff;
+    @media #{$small-only} {
+      border-right: 0;
+    }
+  }
+  div:nth-child(2) {
+    /*border-left:4px solid #fff;*/
+    padding: 1.5em 1.5em .2em;
+  }
+  .graphic {
+    -webkit-background-size: 138px 138px;
+    background-size: 165px 165px;
+    padding: 0;
+    height: 209px;
+    @media #{$medium-only} {
+      background-position: 0 center;
+    }
+  }
+}
+}
+.discover {
+  background:$polar;
+  li {
+    &.step.one {
+      @media #{$small-only} {
+        margin-top: 1.3em!important;
+      }
+      @media #{$medium-up} {
+        margin-top: -2.7em!important;
+      }
+      padding-top: 0;
+    }
+  }
+  .graphic {
+    background: image-url("design/playbook/discover-process.svg") 40% center no-repeat;
+  }
+}
+.has-tip {
+  background: none!important;
+  border-bottom: none!important;
+  i {
+    background: image-url("icons/info-circle.png"); /* IE svg fallback */
+    background-image: image-url("icons/SVG/info-circle.svg");
+    display: inline-block;
+    -webkit-background-size: 20px 20px;
+    background-size: 20px 20px;
+    width: 20px;
+    height: 20px;
+    position: relative;
+    top:.3em
+  }
+}
+.tooltip {
+  background: #000044;
+  &>.nub {
+    border-color: transparent transparent #000044 transparent!important;
+    @media #{$small-only} {
+        border:none!important
+    }
+  }
+  @media #{$small-only} {
+    left:auto!important;
+    max-width: 100%!important;
+  }
+}
+.tap-to-close {
+  color:$color-gold!important;
+  font-size: .8em!important;
+  padding-top: .75em!important;
+}
+.design {
+  background:$wild-sand;
+  li {
+    &.step.four {
+      @media #{$small-only} {
+        padding-top: 0;
+        margin-top: 1em!important;
+      }
+    }
+  }
+  .graphic {
+    background :image-url("design/playbook/design-process.svg") 40% center no-repeat;
+  }
+}
+.deliver {
+  background:$green-white;
+    li {
+    &.step.six {
+      @media #{$small-only} {
+        padding-top: 0;
+        margin-top: 1em!important;
+      }
+    }
+    &.step.nine {
+      padding-top:0;
+      &:before {
+        margin-left: -3.1em;
+      }
+    }
+  }
+  .graphic {
+    background: image-url("design/playbook/deliver-process.svg") 40% center no-repeat;
+  }
+}
+
+
+// Visual Guide
+
+span.color-chip {
+height: 3em;
+width: 3em;
+margin: .5em 1em .5em 0;
+border-radius: 10em;
+vertical-align: middle;
+display: inline-block;
+
+&.primary-color {background: $color-primary;}
+&.color-primary-darker {background: $color-primary-darker;}
+&.color-primary-darkest {background: $color-primary-darkest;}
+&.color-gray-dark {background: $color-gray-dark;}
+&.color-gray-lightest {background: $color-gray-lightest;}
+&.color-gold {background: $color-gold;}
+&.color-green {background: $color-green;}
+&.color-green-lightest {background: $color-green-lightest;}
+}
+
+
+// Icons
+
+.icon-images {width: 1.125em;}
+.icon-connection {width: 1.25em;}
+.icon-books {width: 1.125em;}
+.icon-library {width: 1.0625em;}
+.icon-price-tags {width: 1.25em;}
+.icon-history {width: 1.0625em;}
+.icon-keyboard {width: 1.125em;}
+.icon-bubbles {width: 1.125em;}
+.icon-bubbles2 {width: 1.125em;}
+.icon-bubbles3 {width: 1.125em;}
+.icon-bubbles4 {width: 1.125em;}
+.icon-users {width: 1.125em;}
+.icon-menu2 {width: 1.375em;}
+.icon-menu3 {width: 1.375em;}
+.icon-menu4 {width: 1.375em;}
+.icon-volume-high {width: 1.0625em;}
+.icon-embed2 {width: 1.25em;}
+.icon-youtube4 {width: 2.5087890625em;}
+
+// Citation
+
+.citation {
+border-top: 1px solid #eee;
+padding: 1em 0 0 0;
+h5, h6 {font-size: .85em; font-family: $font-sans; color: $color-gray-dark;}
+p, ul, li {font-size: .7em;}
+font-style: italic;
+}
+
+// Panel list
+
+.panel-list {
+background: #F4F4F5;
+padding: 1em;
+position: relative;
+min-height: 12em;
+dt {color: $color-primary-darkest; padding: 0; font-weight: 700; font-size: 1.2em;}
+dd {padding: 0; margin: 0;}
+a {
+  @extend .usa-button-primary;
+  margin: .5em 0;
+}
+&.plain {
+  height: auto;
+  dt {font-size: 1.45em;}
+  background: none;
+  margin: 0;
+  padding: 0 0 1em 0;
+  min-height: 0;
+}
+}
+
+// Buttons
+
+#content .usa-button,
+#content .usa-button-primary,
+#content .usa-button-outline
+{text-decoration: none;}
+
+#content .usa-button-primary.expand {
+  width: 100%;
+}
+
+
+// Highlight headings
+
+h4.highlight {
+background: $color-gray-lightest;
+padding: .5em !important;
+display: block;
+font-weight: 700;
+line-heighgt: 1.2em;
+margin-bottom: .75em;
+font-famiy: $font-sans;
+}
+
+// bumps text down to align with panel or highlighted text
+#content .section h4.bump {
+  margin-top: 0.7rem;
+}
+
+// Action banner
+
+.action-bar {
+text-align: right;
+background: $color-gray-lightest;
+padding: .5em 0;
+a.usa-button-primary {
+  background: $color-green;
+}
+}
+
+// USDS component styles
+// Accordion
+.usa-accordion-content[aria-hidden=true] {
+    display: none !important;
+}
+button[class*="usa-button-"] {
+  font-weight:500;
+  span {
+    font-weight:700
+  }
+}
+
+// Disclaimer
+
+.disclaimer {
+  padding: 1em 0;
+  border-top: 1px solid #ddd;
+  font-size: .8em;
+  color: #444;
+  background: #fff;
+}
+
+body.home .disclaimer, body.page-playbook .disclaimer {
+  display: none;
+}
+
+
+// Mobile menu
+
+/* Overlay style */
+.overlay {
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+  z-index: 800;
+	background: rgba($color-primary-darkest, .95);
+}
+
+/* Overlay closing cross */
+.overlay .overlay-close {
+	border: none;
+	outline: none;
+	z-index: 100;
+}
+
+
+button#trigger-overlay {
+  padding: .5em;
+  margin-top: 0;
+  border-radius: .15em;
+}
+
+/* Effects */
+.overlay-fullscreen {
+	opacity: 0;
+	visibility: hidden;
+	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
+	transition: opacity 0.5s, visibility 0s 0.5s;
+
+  button {
+    border-radius: 0;
+    display: block;
+    width: 100% !important;
+    margin: 0;
+    width: auto;
+    background: $color-primary;
+
+  }
+
+  input[type="text"] {
+    border-radius: 3px 0 0 3px;
+    -moz-border-radius: 3px 0 0 3px;
+    -webkit-border-radius: 3px 0 0 3px;
+    -webkit-appearance: none;
+  }
+
+}
+
+.overlay-fullscreen.open {
+	opacity: 1;
+	visibility: visible;
+	-webkit-transition: opacity 0.5s;
+	transition: opacity 0.5s;
+}
+
+.overlay-fullscreen .menu {
+	-webkit-perspective: 1200px;
+	perspective: 1200px;
+  padding: 1em 1em;
+}
+
+.overlay-fullscreen form {
+	opacity: 0.4;
+	-webkit-transform: translateY(-25%) rotateX(35deg);
+	transform: translateY(-25%) rotateX(35deg);
+	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
+	transition: transform 0.5s, opacity 0.5s;
+}
+
+.overlay-fullscreen.open form {
+	opacity: 1;
+	-webkit-transform: rotateX(0deg);
+	transform: rotateX(0deg);
+}
+
+.overlay-fullscreen.close form {
+	-webkit-transform: translateY(25%) rotateX(-35deg);
+	transform: translateY(25%) rotateX(-35deg);
+}
+
+@media screen and (max-height: 30.5em) {
+	.overlay form {
+		height: 70%;
+	}
+
+}
+
+// List overrides
+
+ul li p {
+  margin: 0;
+  padding: 0;
+}
+
+// vets.gov branded apps
+
+a.vets-app {
+  border-left: 3px solid $color-gold;
+  display: inline-block;
+  padding: 0 0 0 .5em !important;
+}
+
+// Tooltips
+
+.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
+  .tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
+
+  /* Rounded corners */
+  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
+
+  /* Uncomment for shadow */
+  /*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
+
+  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
+
+  /* Rules to colour arrows */
+  .tipsy-arrow-n { border-bottom-color: #000; }
+  .tipsy-arrow-s { border-top-color: #000; }
+  .tipsy-arrow-e { border-left-color: #000; }
+  .tipsy-arrow-w { border-right-color: #000; }
+
+	.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
+    .tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
+  .tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
+    .tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
+  .tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
+  .tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }