va_common 0.3.2 → 0.3.3

data/app/assets/stylesheets/_va.scss

@@ -1,5 +1,22 @@
 // Vets.gov
 
+// Skip link
+
+.show-on-focus {
+  position: absolute;
+  top: -10em;
+  background: #fff;
+  padding: 1em;
+  color: $color-primary-darkest;
+  display: block;
+  font-weight: 600;
+  &:hover {background: #fff;}
+  &:focus {
+    position: inherit;
+    top: auto;
+    outline: 2px solid $color-gold;
+  }
+}
 
 // Other Colors
 $polar:#E8F5FA;
@@ -11,7 +28,6 @@ $olso-gray:#849097;
 $roboto-slab: 'Roboto Slab', serif;
 
 
-
 // General
 html, body {
   padding: 0;
@@ -29,6 +45,49 @@ body, body.home {
 }
 
 
+// Gem Specific css
+ul li:before {
+  content:none;  
+}
+
+#content ul.breadcrumbs li.active {
+  margin: 0em;
+}
+
+
+// Search
+
+.overlay {
+  z-index: 10000;
+}
+
+.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;
+}
+
+#search_form input[type="submit"] {
+  font-size: 1em;
+  max-height: 2.65em;
+}
+
+// end gem specific 
+
 // row
 body .row.full {
   width: 100%;
@@ -76,26 +135,6 @@ 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
 
@@ -138,21 +177,14 @@ h1 {
 // Type
 
 h1, h2 {
-font-family: $font-sans;
-font-weight: 600;
+  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;
-  }
+  color:$color-primary-darkest;
+  font-weight: 600;
 }
 
-// Header
-
-
 // Links
 
 a {text-decoration: underline; background: rgba(0,0,0,.05);}
@@ -163,114 +195,107 @@ a:hover {text-decoration: underline; background: rgba(0,0,0,.1);}
 #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);
-}
+  padding: 0 0 .5em 0;
+  margin: 0;
+  @media #{$small} {padding: .5em 0;}
 
-&.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;}
-}
+  &.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;}
+  }
 
-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;}
+  @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;}
+  }
 
-&.alternate {
-  li a {
-    color: $color-primary-darkest;
-    border-bottom: 2px solid $secondary-color;
+  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;}
 
-  li.parent:after {color: #ccc;}
-}
+  &.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;}
+  @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;
-}
+  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;}
-}
+  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;
-}
+  @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;
+  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
 
@@ -282,16 +307,22 @@ p {
   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 {
+  ol {
+    margin: 0;
+    list-style-position: outside;
+    li {
+      margin: 0 0 1em 0;
+    }
+    ul, ol {
+      margin: .5em 0 .5em 1.2em;
+    }
+  }
 
   ul {
   margin: 0 0 1em 1.2em;
@@ -318,12 +349,17 @@ body.home, body.fourohfour {
   padding: 1em;
   clear: both;
   margin: 0 0 1.5em 0;
+  p {margin-bottom: 0; padding-bottom: .5em}
+  p:nth-child(1) {
+    font-size: 1em;
+    color: #333;
+    padding-bottom: inherit;
+  }
   h3 {font-size: 1.5em;}
   ul {
     margin: 0 0 .5em 1.5em; padding: 0;
     li {
       list-style: square;
-      padding: 0 .25em;
       margin: 0;
     }
   }
@@ -335,129 +371,129 @@ body.home, body.fourohfour {
   li p:first-of-type,
   ul+p
    {
-    font-weight: normal;
+    font-weight: normal !important;
+    color: #333;
+    font-size: 1em;
+    padding-bottom: 0;
   }
   p:nth-child(1) {
-    font-size: 1.1em;
+    font-size: 1.25em;
+    color: $color-primary-darker;
     letter-spacing: normal;
-    font-weight: 600;
+    font-weight: normal;
     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
-
-
-
+  background: #fff;
+  a {text-decoration: underline;}
 }
 
 // Home page specific
 
 .home #content {
-h2, h3, h4, h5, h6, p, ul, li, ol, a {color: #fff;}
-color: #fff;
+  h2, h3, h4, h5, h6, p, ul, li, ol, a {color: $color-gray-dark;}
+  .post-date {font-size: .5em; color: $color-gold;}
+  h3 {
+    border-bottom: 1px solid #fff;
+    line-height: 1.2em;
+    border-bottom: 6px solid $color-primary-darker;
+    font-size: 1.65em;
+    color: $color-primary;
+    margin: 0 0 2.5em 0;
+    padding: 0 0 .2em 0;
+  }
 
-.post-date {font-size: .5em; color: $color-gold;}
+  h4 a {
+    text-decoration: none;
+    &:hover {
+      border-bottom: 1px solid #fff;
+      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;}
+  .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;
+    }
+  }
 
-h4 a {
-  text-decoration: none;
-  &:hover {
-    border-bottom: 1px solid #fff;
-    color: $color-gold;
+  ul.plain {
+    margin: 0;
+    padding: 0;
+    li {list-style: none; border-bottom: none;}
+    /*a {background: none;}*/
   }
-}
 
-.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;
+  .section {
+    padding: 4em 0 2em 0;
+    text-align: left;
   }
-}
 
-ul.plain {
-  margin: 0;
-  padding: 0;
-  li {list-style: none; border-bottom: none;}
-  /*a {background: none;}*/
-}
+  .section.main-menu {
+    padding: .5em .5em 2.35em .5em;
+    @media #{$small} {padding: 1em 0 1.5em 0;}
+    .navigation {
+      padding: 1.5em 0 0 0;
+      background: none;
+      ul li a {
+        h3 {border-bottom: 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 {
+    a {
+      color: $color-gray-dark;
+      &:hover {
+        color: $color-primary-darkest;
+        background: rgba(0,0,0,.15);
+      }
     }
   }
-}
 
+  .home #content .section h3.alternate {
+    margin: 0 0 2em 0 !important; padding: 0;
+  }
 
-.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.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.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;}
+  }
 }
 
-.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;}
+  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 {
@@ -470,20 +506,15 @@ background: $polar;
 }
 
 #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;
+  background: #dcddde;
+  h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
+  h4 {font-weight: 700;}
+  .cards {
+    a {
+      height:12em;
+    }
   }
-}
-.feature {
-  background: none;
-}
+  .feature {background: none;}
 }
 
 #content .section.coda {
@@ -498,10 +529,7 @@ h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
 h2 {line-height: 1.2em;}
 }
 
-#content .section .feature {
-min-height: 11em;
-
-}
+#content .section .feature { min-height: 11em;}
 
 #content .panel {
 background: $color-gray-lightest;
@@ -510,20 +538,17 @@ 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;}
+  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 {
+  a.usa-button-primary.start {background: $color-green; text-decoration: none;}
 }
 
 #content .section.secondary,
@@ -568,42 +593,21 @@ text-align: left;
 }
 
 
-// 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;
-
+  background: none;
+  border: none;
+  margin: 0 0 1em 0;
+  h2 {font-size: 1em;}
+  padding: 0;
+  @media #{$small} {margin: 0 0 1em 0;}
+  border-radius: 0;
+  border-radius: none;
+  -webkit-border-radius: 0;
 
-li {
+  li {
   text-transform: none;
-  display: block;
   margin: .25em 0;
   padding: .1em;
   display: inline-block;
@@ -615,37 +619,33 @@ li {
   &: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;}
   }
-
-  &.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
@@ -685,6 +685,13 @@ li {
 
 // Tables
 table {
+
+  caption {
+    text-align: left;
+    padding: 0 0 .25em 0;
+    font-weight: bold;
+    font-size: 1.25em;
+  }
   border: 0;
   text-align: left;
   @media #{$small-only} {
@@ -772,14 +779,6 @@ li {
 
 // 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;
@@ -804,7 +803,7 @@ li {
   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;}
+    h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 700; 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;}
@@ -825,7 +824,6 @@ li {
   }
 }
 
-
 body.home .navigation, body.fourohfour .navigation {
   background: none;
   padding: 3em 0;
@@ -858,75 +856,61 @@ body.home .main-navigation {
   -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 {
+  transform-origin: 20% 40%;
 
 }
 
+// Cards
+
 [class*="block-grid-"]>li {
-  padding: .1em 0;
-  @media #{$small} {padding: 0 0.625rem 1.25rem;}
+  padding: 0;
+  @media #{$small} {padding: 0 0.625rem 1.25rem 0.625rem;}
 }
 
-
 #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 {
+  a, .coming-soon {
+    padding: 1em 1.15em;
+    margin: 0 -0.9375rem;
+    border-bottom: 2px solid rgba(255,255,255,.3);
+    color: #fff;
+    display: block;
+    font-weight: normal;
     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;
+    background: $color-primary-darker;
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
+    @media #{$small} {padding: .45em .75em; border-bottom: none; text-align: left; border-radius: .2em; margin: 0 0 .25em 0}
+    @media #{$medium} {height: 10em;}
+
+    h3 {
+      text-decoration: none;
+      margin: 0;
+      padding: 0;
+      @media #{$small} {margin: 0 0 1em 0;}
+    }
 
-  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
-  h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
+    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;
+    h4 {margin: 0; padding: 0;}
 
-    @media #{$small} {margin: 0;}
-    /*
-    -webkit-align-self: flex-start;
-    align-self: flex-start;
-    */
-  }
+    p {
+      @media #{$small} {padding: 0m 0 1em 0;}
+      line-height: 1.5em;
+      @media #{$small} {margin: 0;}
+    }
 
-  &:hover, &:active, &:focus {
-    background: $color-primary;
-    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
-  }
+    &: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%;}
+    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;}}
-  }
+    &:hover div {
+      a {color: $color-gold; p {color: $color-gold;}}
+    }
 }
 
 .coming-soon {
@@ -1160,10 +1144,15 @@ body.page-playbook {
   margin: 0;
   background: darken($color-primary-darkest, 02);
 
+  .text-right {
+    text-align: right;
+  }
 
-    .small-block-grid-1 {
-      li {padding: 0; margin: 0;}
-    }
+  .small-block-grid-1 {
+    li {padding: 0; margin: 0;}
+  }
+  
+  a.usa-button {text-decoration: none; margin-bottom: 1em;}
 
   .usa-social-links a {
     border-bottom: none;
@@ -1172,6 +1161,7 @@ body.page-playbook {
       border-bottom: none;
     }
   }
+
   ul {
     margin: 0;
     padding: .5em 0;
@@ -1186,19 +1176,15 @@ body.page-playbook {
   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;}
+  &:hover {color: $color-gold;}
   &.contact, &.blog {
     padding: .65em; font-size: 1em;  text-align: center; border: 2px solid $secondary-color;
     @media #{$small} {margin: 1.5em auto; display: inline-block;}
@@ -1234,7 +1220,7 @@ a {
   background: rgba(0,0,0,.055);
 }
 .footer-seal {
-        background:image-url("design/seal/seal-footer.png") no-repeat;
+        background: image-url("design/seal/seal-footer.png") no-repeat;
         text-indent:-325px;
         overflow: hidden;
 
@@ -1254,6 +1240,7 @@ a {
         padding: 1.75em 0;
       }
 }
+
 .footer-crisis {
   background:$color-gold;
   margin: 1.625rem 0;
@@ -1281,13 +1268,13 @@ a {
 }
 ul.final-list {
   text-align: center;
-  font-size: .8em;
+  @media #{$large} {text-align: left;}
+  font-size: 1em;
   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;
@@ -1308,8 +1295,8 @@ ul.final-list {
       }
       &:after {
         content:"|";
-        padding: 0 .15em;
-        display: inline;
+        padding: 0 .2em;
+        opacity: .5;
       }
       &:last-of-type:after {
         padding:0;
@@ -1317,7 +1304,10 @@ ul.final-list {
       }
     a {
         display:inline-block;
-        padding: .35em;
+        padding: .2em;
+        &:hover {
+          color: $color-gold;
+        }
     }
   }
 }
@@ -1396,6 +1386,15 @@ li {
   }
 }
 
+.primary blockquote {
+  margin: 0 0 1em 0;
+  padding: 0 0 0 1em;
+  border-left: 2px solid $color-gray-lighter;
+  p {
+  color: $color-primary-darker;
+  }
+}
+
 body.index, body.page-playbook {
   .footer {
     // background: $color-primary-darkest url(../img/design/seal/seal.png) bottom center no-repeat;
@@ -1492,10 +1491,6 @@ a {color: #fff; background: none;}
   padding: 1.25em 0 1.5em 0;
   border-top: none;
   background: $color-primary-darker;
-
-  .usa-button {
-    font-size: .9em;
-  }
 }
 
 .feedback {
@@ -1506,21 +1501,14 @@ a {color: #fff; background: none;}
   @media #{$medium-up} {
     right:3em;
     vertical-align: middle;
-    top: 2em;
+  }
+  a {
+    opacity: 0.6;
   }
 }
 .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;
@@ -1541,69 +1529,6 @@ a {color: #fff; background: none;}
 
 // Search
 
-#search_form {
-  input[type="submit"] {
-    font-size: 16px;
-  }
-}
-.reveal-modal {
-  padding: 0px;
-}
-#trigger-overlay-button button {
-  font-size: 16px;
-  padding: .5em;
-}
-
-button#overlay-close-button {
-  border-radius: 0;
-  display: block;
-  width: 100% !important;
-  margin: 0;
-  width: auto;
-  background: #0071bc;
-  color: #fff;
-}
-
-.overlay {
-  z-index: 10000;
-}
-.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;
-}
-
-
 #search_form {
   padding: 1.1em 0;
   text-align: right;
@@ -2019,7 +1944,7 @@ li {
   &.step.nine
    {
     &:before {
-      background:white image-url("icons/SVG/loop2.svg")center center no-repeat;
+      background:white url(../images/icons/SVG/loop2.svg)center center no-repeat;
       display:inline-block;
       width:3.4em;
       height:2.2em;
@@ -2093,34 +2018,7 @@ li {
     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;
@@ -2297,103 +2195,127 @@ button[class*="usa-button-"] {
   font-size: .8em;
   color: #444;
   background: #fff;
+  &.minimal {
+    border-top: none;
+    padding: .25em 0;
+  }
+}
+
+// Info block
+
+.info-block {
+  p {
+    padding: 0;
+    margin: 0;
+  }
 }
 
 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;
-}
+@media #{$small-only} {
 
+  .overlay {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 800;
+    background: rgba($color-primary-darkest, .95);
+  }
 
-button#trigger-overlay {
-  padding: .5em;
-  margin-top: 0;
-  border-radius: .15em;
-}
+  /* Overlay closing cross */
+  .overlay .overlay-close {
+    display: block;
+    border: none;
+    outline: none;
+    z-index: 100;
+  }
 
-/* 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;
+  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;
+    }
 
   }
 
-  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;
+    .columns {
+      padding: 0;
+    }
   }
 
-}
+  .overlay-fullscreen .menu {
+    -webkit-perspective: 1200px;
+    perspective: 1200px;
+    padding: 1em 1em;
+  }
 
-.overlay-fullscreen.open {
-	opacity: 1;
-	visibility: visible;
-	-webkit-transition: opacity 0.5s;
-	transition: opacity 0.5s;
-}
+  .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 .menu {
-	-webkit-perspective: 1200px;
-	perspective: 1200px;
-  padding: 1em 1em;
-}
+  .overlay-fullscreen.open form {
+    opacity: 1;
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+  }
 
-.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.close form {
+    -webkit-transform: translateY(25%) rotateX(-35deg);
+    transform: translateY(25%) rotateX(-35deg);
+  }
 
-.overlay-fullscreen.open form {
-	opacity: 1;
-	-webkit-transform: rotateX(0deg);
-	transform: rotateX(0deg);
-}
+  @media screen and (max-height: 30.5em) {
+    .overlay form {
+      height: 70%;
+    }
 
-.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%;
-	}
+}
 
+.overlay-close {
+  display: none;
 }
 
 // List overrides
@@ -2411,30 +2333,241 @@ a.vets-app {
   padding: 0 0 0 .5em !important;
 }
 
-// Tooltips
+// Tooltip
+button.js-simple-tooltip {
+  font-family: 'Courier New', 'Courier', serif;
+  font-weight:bold;
+  cursor: pointer;
+  display:inline-block;
+  padding: 0;
+  border-radius: 1.75em;
+  background: $color-gray-dark;
+  margin: 0 0 0 .5em;
+  color: white;
+  height: 1.75em;
+  font-size: .8em;
+  width: 1.75em;
+  text-align: center;
+  vertical-align: middle;
+}
+.simpletooltip[aria-hidden="true"] {
+  display: none;
+}
+.simpletooltip_container {
+  position: relative;
+}
+.simpletooltip {
+  position: absolute;
+  z-index: 777;
+  width: 11em;
+  border-radius: .3em;
+  background: $color-gray-dark;
+  color: $color-white;
+  padding: .6em;
+  text-align: left;
+  font-size: 1em;
+  font-weight: 300;
+  line-height: 1.3;
+}
+.simpletooltip {
+  right: auto;
+  left: 100%;
+  margin-left: .8em;
+}
+.simpletooltip:before {
+  border-bottom: 10px solid transparent;  /* left arrow slant */
+  border-top: 10px solid transparent; /* right arrow slant */
+  border-right: 10px solid $color-gray-dark;
+  content:"";
+  font-size: 0;
+  position: absolute;
+  top: 3px;
+  left: 0px;
+  line-height: 0;
+  margin-left: -10px;
+  width:0;
+  height:0
+}
+@media (max-width: 40.063em) {
+  .simpletooltip {
+    top: 100%;
+    left: 45%;
+    right: 0;
+    margin: 0;
+    margin-top: .7em;
+    margin-left: -5em;
+  }
+  .simpletooltip:before {
+    top: -10px;
+    right: auto;
+    left: 45%;
+    margin-left: -5px;
+    margin-top: -10px;
+    border: 10px solid transparent;
+    border-bottom: 10px solid rgba( 0, 0, 0, .9 );
+  }
+}
+
+// html.no-touchevents {
+//   .touch {display: none;}
+//   .no-touch {display: block;}
+// }
+
+// html.touchevents {
+//   .touch {display: block;}
+//   .no-touch {display: none;}
+// }
+
+// Animate CSS components
+
+
+.animated {
+  -webkit-animation-duration: 1.25s;
+  animation-duration: 1.25s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+
+  40% {
+    -webkit-transform: translateY(-30px);
+    -ms-transform: translateY(-30px);
+    transform: translateY(-30px);
+  }
+
+  60% {
+    -webkit-transform: translateY(-15px);
+    -ms-transform: translateY(-15px);
+    transform: translateY(-15px);
+  }
+}
+
+.bounce {
+  -webkit-animation-name: bounce;
+  animation-name: bounce;
+}
+
+@-webkit-keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+@keyframes flash {
+  0%, 50%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0;
+  }
+}
+
+
+
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
 
-.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; }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
 
-  /* Rounded corners */
-  .tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-20px);
+    -ms-transform: translateY(-20px);
+    transform: translateY(-20px);
+  }
 
-  /* 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; }*/
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    -ms-transform: translateY(0);
+    transform: translateY(0);
+  }
+}
 
-  .tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
+.fadeInDown {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
 
-  /* 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; }
+@-webkit-keyframes fadeInDownBig {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-2000px);
+    transform: translateY(-2000px);
+  }
 
-	.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; }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+}