//Mixins
@import "global";

//Foundation Libraries
@import
  "foundation/settings",
  "foundation";

//Marketing Site Common Library
@import
  "code",
  "marketing-off-canvas",
  "footer",
  "foundation-forum",
  "footer-banner";



/* Banner for announcements */
a#notice {
  display:block;
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  width:100%;
  // background: #FF6908; /* Old browsers */
  // background: -moz-linear-gradient(left,  #C9025C 0%, #DB0A5B 100%); /* FF3.6+ */
  // background: -webkit-gradient(linear, left top, right top, color-stop(0%,#81CFE0), color-stop(100%,#DB0A5B)); /* Chrome,Safari4+ */
  // background: -webkit-linear-gradient(left,  #C9025C 0%,#DB0A5B 100%); /* Chrome10+,Safari5.1+ */
  // background: -o-linear-gradient(left,  #C9025C 0%,#DB0A5B 100%); /* Opera 11.10+ */
  // background: -ms-linear-gradient(left,  #C9025C 0%,#DB0A5B 100%); /* IE10+ */
  // background: linear-gradient(to right,  #C9025C 0%,#DB0A5B 100%); /* W3C */
  // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9025C', endColorstr='#DB0A5B',GradientType=1 ); /* IE6-9 */
  background: rgba(15,28,33,1);
  background: -moz-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15,28,33,1)), color-stop(45%, rgba(38,54,62,1)), color-stop(76%, rgba(79,88,99,1)), color-stop(100%, rgba(198,134,127,1)));
  background: -webkit-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
  background: -o-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
  background: -ms-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
  background: linear-gradient(to bottom, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f1c21', endColorstr='#c6867f', GradientType=0 );
  // span {
  //   border-bottom: #fff 4px dashed;
  //   width: 36%;
  //   position: absolute;
  //   bottom: 25px;
  //   &.left-side { left: 0; }
  //   &.right-side { right: 0; }
  //   @media only screen and (max-width: 1000px) { width: 30%; }
  //   @media only screen and (max-width: 675px) { width: 16%; }
  // }

  .countdown {
    display: inline;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    margin-left: 3px;
  }

  .timer-colon {
    margin: 0px -2px 0px -4px;
    padding: 0;
  }

  .timer-hour, .timer-minute, .timer-second {
    letter-spacing: 2px;
  }

  .info {
    left: 0;
    right: 0;
    // top: 15px;
    z-index: 20;
    // width: 75%;
    margin-left: auto;
    margin-right: auto;
    // position: absolute;
    h5 { color: #ffffff; }
    text-align: center;
    @media only screen and (max-width: 675px) { width: 100%; padding: 0 15px 0px 15px; position: relative; }
  }
}


.spaced-divider hr {
  margin: 0.5rem;
  border: 1px solid #4e4e4e;
}

.top-bar-section .dropdown li.title{
  color: rgba(255,255,255,0.5);
  padding-top: 10px;
  padding-left: 15px;
  font-size: 0.8em;
//  text-transform: uppercase;
//  letter-spacing: 2px;
}

.top-bar-section .divider, .top-bar-section [role="separator"]{
  border-top: solid 1px #484848;
}

.row {
  max-width: rem-calc(1440);
  &.display {
    background: #eee;
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 2rem;
    border: solid 1px #c6c6c6;
    margin-#{$default-float}: 0 !important;
    margin-#{$opposite-direction}: 0 !important;
    .columns {
      &:nth-child(2),
      &.small-centered,
      &.large-centered {
        background: darken(#eee, 5%);
      }
      &.color-end {
        background: darken(#eee, 10%)
      }
    }
  }
}

.row {
  max-width: rem-calc(1440);
  &.display-end {
    background: #fff;
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 2rem;
    border: solid 1px #c6c6c6;
    margin-#{$default-float}: 0 !important;
    margin-#{$opposite-direction}: 0 !important;
    .columns {
      background: darken(#eee, 5%);
      border-left: 1px solid #c6c6c6;
      &.color-end {
        background: darken(#eee, 10%)
      }
    }
  }
}

.top-bar-section ul li > a{ font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;font-size: 0.8125rem !important; }
h1 { margin-top: 20px; }
// h2, h3 { margin: 1rem 0 0.15rem; }
h2.subheader { margin: 0 0 20px 0; font-size: 1.25rem; }
h3.subheader { margin: 0 0 20px 0; font-size: 1.25rem; }
h4 { font-size: 0.75rem; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: 900; }


.top30 { margin-top: 30px; }
.top20 { margin-top: 20px; }
.bottom30 { margin-top: 30px; }
.bottom20 { margin-top: 20px; }

hr { margin: 2.5rem 0 2rem;}
hr.dashed { border-style: dashed; }

// Docs Components
@import
  "syntax-highlighting",
  "sidebar",
  "zurb-footer";

.custom-block-grid {
  @include block-grid(3);
}

// Auto complete styles
.autocomplete-suggestions {
  border: 1px solid $secondary-color;
  background: #FFF;
  overflow: auto;
}
.autocomplete-suggestion {
  padding: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
}
.autocomplete-selected {
  background-color: lighten($primary-color, 5%);
  @include single-transition($property:all, $speed:100ms, $ease:ease-in-out);
  color: #fff;
  strong {
    color: #fff !important;
  }
}
.autocomplete-suggestions {
  strong {
    font-weight: bold;
    color: $primary-color;
    // text-shadow: 0px 0px 1px lighten($primary-color, 20%);
  }
}

// Docs Styles
.section-header {
  h1 { border-bottom: 1px solid #ddd; }
  ul.inline-list {
    display: inline-block;
    position: absolute;
    top: 47px;
    right: 0.9375rem;
  }
}

table.plugin-options {
  width: 100%;
  border: none;
  td[rowspan] {
    background: #f9f9f9;
    vertical-align: top;
  }
  tbody {
    td:not([rowspan]) {
      font-family: Consolas, 'Liberation Mono', Courier, monospace;
    }
  }
  thead {
    td:first-child {
      width: 20%;
    }
  }
}

// Modified Panel
.easel {
  @include panel($bg: $panel-bg-color);
  @include radius();
  border: 1px solid darken($panel-bg-color, 6%);
}

// 12 column grid mixin (would be cool to implement with mixins where possible)
.full-grid {
  @include grid-column($columns:12);
  .panel {
    @extend .easel;
  }
}


.half-grid {
  @include grid-column($columns:6);

}

.code {
  @include grid-column($columns:7);
  padding-right: 0;
}

.options { @include grid-column($columns:5); }

.options-bg {
  padding: 18px;
  background-color: darken($panel-bg-color, 0%);
  border: 1px solid darken($panel-bg-color, 4%);
  border-radius: 4px;
  ul {
    margin-#{$default-float}: 20px;
  }
  dt { color: #008080; }
}

pre { margin-bottom: 15px;
  code {
    .code-container {
      margin: 10px 0px;
      padding: 5px;
      overflow-x: auto;
      line-height: 1.3rem;
      font-weight: normal;
    }
  }
}

#masthead { @include grid-row; @include panel; max-width: none;
  hgroup { @include grid-column(4); }
  section { @include grid-column(8); }
}

footer { margin-top: 45px; }

#appHeader { background: $primary-color; }

#appHeader a.sidebar-button span {
  @include box-shadow(-15px 0 2px #fff, -6px 0 2px #fff, 3px 0 2px #fff);
}

// Examples
.magellan-container {
  padding: 0 !important;
  background: #fff;
}
.example-orbit {}
.example-orbit-content li div {
  color:white;
  background:#2ba6cb;
  padding:30px 40px;
  h1,h2,h3 {color:white;}
}

// Typgraphy Overrides

.type-demo {

  /* Typography resets */
  div,
  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  pre,
  form,
  p,
  blockquote,
  th,
  td {
    margin:0;
    padding:0;
  }

  /* Default Link Styles */
  a {
    color: $anchor-font-color;
    text-decoration: $anchor-text-decoration;
    line-height: inherit;

    &:hover,
    &:focus { color: $anchor-font-color-hover; }

    img { border:none; }
  }

  /* Default paragraph styles */
  p {
    font-family: $paragraph-font-family;
    font-weight: $paragraph-font-weight;
    font-size: $paragraph-font-size;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    text-rendering: $paragraph-text-rendering;

    &.lead { @include lead; }

    & aside {
      font-size: $paragraph-aside-font-size;
      line-height: $paragraph-aside-line-height;
      font-style: $paragraph-aside-font-style;
    }
  }

  /* Default header styles */
  h1, h2, h3, h4, h5, h6 {
    font-family: $header-font-family;
    font-weight: $header-font-weight;
    font-style: $header-font-style;
    color: $header-font-color;
    text-rendering: $header-text-rendering;
    margin-top: $header-top-margin;
    margin-bottom: $header-bottom-margin;
    line-height: $header-line-height;
    text-transform: none;

    small {
      font-size: $small-font-size;
      color: $small-font-color;
      line-height: 0;
    }

    &.subheader { @include subheader; text-transform: none; }
  }

  h1 { font-size: $h1-font-size - rem-calc(10); }
  h2 { font-size: $h2-font-size - rem-calc(10); }
  h3 { font-size: $h3-font-size - rem-calc(5); }
  h4 { font-size: $h4-font-size - rem-calc(5); }
  h5 { font-size: $h5-font-size; }
  h6 { font-size: $h6-font-size; }

  hr {
    border: $hr-border-style $hr-border-color;
    border-width: $hr-border-width 0 0;
    clear: both;
    margin: $hr-margin 0 ($hr-margin - rem-calc(1));
    height: 0;
  }

  /* Helpful Typography Defaults */
  em,
  i {
    font-style: italic;
    line-height: inherit;
  }

  strong,
  b {
    font-weight: bold;
    line-height: inherit;
  }

  small {
    font-size: $small-font-size;
    line-height: inherit;
  }

  code {
    font-family: $code-font-family;
    font-weight: $code-font-weight;
    color: $code-color;
  }

  /* Lists */
  ul,
  ol,
  dl {
    font-size: $paragraph-font-size;
    line-height: $paragraph-line-height;
    margin-bottom: $paragraph-margin-bottom;
    list-style-position: $list-style-position;
    font-family: $paragraph-font-family;
  }

  ul {
    margin-#{$default-float}: $list-side-margin;
    &.no-bullet {
      margin-#{$default-float}: $list-side-margin-no-bullet;
      li {
        ul,
        ol {
          margin-#{$default-float}: $list-nested-margin;
          margin-bottom: 0;
          list-style: none;
        }
      }
    }
  }

  /* Unordered Lists */
  ul {
    li {
      ul,
      ol {
        margin-#{$default-float}: $list-nested-margin;
        margin-bottom: 0;
        font-size: 1rem; /* Override nested font-size change */
      }
    }
    &.square,
    &.circle,
    &.disc {
      li ul { list-style: inherit; }
    }

    &.square { list-style-type: square; margin-#{$default-float}: $list-side-margin;}
    &.circle { list-style-type: circle; margin-#{$default-float}: $list-side-margin;}
    &.disc { list-style-type: disc; margin-#{$default-float}: $list-side-margin;}
    &.no-bullet { list-style: none; }
  }

  /* Ordered Lists */
  ol {
    margin-#{$default-float}: $list-ordered-side-margin;
    li {
      ul,
      ol {
        margin-#{$default-float}: $list-nested-margin;
        margin-bottom: 0;
      }
    }
  }

  /* Definition Lists */
  dl {
    dt {
      margin-bottom: $definition-list-header-margin-bottom;
      font-weight: $definition-list-header-weight;
    }
    dd { margin-bottom: $definition-list-margin-bottom; }
  }

  /* Abbreviations */
  abbr,
  acronym {
    text-transform: uppercase;
    color: $body-font-color;
    border-bottom: $acronym-underline;
    cursor: $cursor-help-value;
  }
  abbr {
    text-transform: none;
  }

  /* Blockquotes */
  blockquote {
    margin: 0 0 $paragraph-margin-bottom;
    padding: $blockquote-padding;
    border-#{$default-float}: $blockquote-border;

    cite {
      display: block;
      font-size: $blockquote-cite-font-size;
      color: $blockquote-cite-font-color;
      &:before {
        content: "\2014 \0020";
      }

      a,
      a:visited {
        color: $blockquote-cite-link-color;
      }
    }
  }
  blockquote,
  blockquote p {
    line-height: $paragraph-line-height;
    color: $blockquote-font-color;
  }

  /* Microformats */
  .vcard {
    display: inline-block;
    margin: $microformat-margin;
    border: $microformat-border-width $microformat-border-style $microformat-border-color;
    padding: $microformat-padding;

    li {
      margin: 0;
      display: block;
    }
    .fn {
      font-weight: $microformat-fullname-font-weight;
      font-size: $microformat-fullname-font-size;
    }
  }

  .vevent {
    .summary { font-weight: $microformat-summary-font-weight; }

    abbr {
      cursor: $cursor-default-value;
      text-decoration: $microformat-abbr-font-decoration;
      font-weight: $microformat-abbr-font-weight;
      border: none;
      padding: $microformat-abbr-padding;
    }
  }


  @media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
  }

}

// Alert Styles

.custom-bg {
  @include alert(#ff6c3c);
}

.alert-base {
  @include alert-base();
}

.alert-background {
  @include alert-base();
  @include alert-style();
}

.close {
  @include alert-close();
}

.alert-radius {
  @include alert-base();
  @include alert-style();
  @include radius()
}

// Thumbnail Styles
.th-custom {
  @include thumb(10px,0 0 0 2px black, 0 0 10px 2px rgba(orange,0.5));
  @include radius(6);
  @include single-transition(all,400ms,ease-in);
}

$custom-link-color: #FF6908;
$custom-divider-color: lighten($custom-link-color, 40%);
.custom-sidenav-class {
  @include side-nav(
            $divider-color:$custom-divider-color,
            $font-size:1.2rem,
            $link-color:$custom-link-color);
}

.basic-subnav-class {
  @include sub-nav();
}

$custom-font-color:$custom-link-color;
$custom-active-bg:darken($custom-link-color, 5%);
.custom-subnav-class {
  @include sub-nav(
    $font-color:$custom-font-color,
    $font-size:1.2rem,
    $active-bg:$custom-active-bg);
}

// custom off-canvas styles
// .docs-wrap { margin-top: 30px; }
.docs-wrap .inner-wrap { background: #efefef; }
.docs-wrap .main-section { padding: 0 20px 0 20px; }
.main-section { @include kill-flicker; }
.doc-oc-list { background: $off-canvas-bg; }

// Make sure topbar dropdowns are above tab bar.
.docs-bar ul.dropdown { z-index: 1003; }

// Side nav custom active style
.sidebar .side-nav li.active > a:first-child {
  font-weight: bold;
  color: lighten(#004054,20%);
  position: relative;
  margin: 0 -20px;
  padding-#{$default-float}:20px;
  padding-#{$opposite-direction}: 20px;
  background: rgba(#004054, 0.05);

  // &::before {
  //   content:"";
  //   @include css-triangle(6px, darken(#008cba, 10%), left);
  //   position: absolute;
  //   left:0;
  //   top:50%;
  //   margin-top:-6px;
  // }
 }
.sidebar .side-nav li:hover > a:first-child {
    color: lighten(#004054,10%);
    position: relative;
    margin: 0 -20px;
    padding-#{$default-float}:20px;
    padding-#{$opposite-direction}: 20px;
    background: rgba(#004054, 0.03);
  }

// Compatibility
.row.support { padding: 9px 0; margin-#{$default-float}:0; margin-#{$opposite-direction}:0; }
.row.support:nth-child(2n) { background: #f4f4f4; }

.support .win { color: #4ea600; font-weight: bold; }
.support .meh { color: #888; font-weight: bold; }
.support .fail { color: #cc0000; font-weight: bold; }

.docs-bar .top-bar-section .has-dropdown > a:after { display: none; }
.docs-bar .top-bar-section .has-dropdown a { padding-#{$opposite-direction}: 15px !important; }


// Fix for Google Maps
div#interchangeMarkup img {
  max-width: none;
}

/*------------------------------------
you will need
------------------------------------*/
.circle-list {
  a {
    margin-bottom: 0px;
  }
  img {
    width: 160px;
    margin-top: 15px;
    margin-bottom: 20px;
  }
  h4 {
    font-size: 1.3rem;
    font-weight: normal;
    text-transform: capitalize;
  }
}


/*------------------------------------
images
------------------------------------*/
.others {
  max-height: 180px;
  display: block;
  margin: 10px auto;
}


.flow-chart {
  margin: 10px 10px 15px 0;
  @media #{$small-only} {
    margin:20px;
  }
}

.command-line {
  @media #{$small-only} {
    margin:20px;
  }
}

/*------------------------------------
padding
------------------------------------*/
.recommended {
  padding-top:10px;
}

.path-container code {
  color:$primary-color;
}

.sub-nav {
  background-color: $panel-bg;
  padding: 10px 10px 10px 0;
}

.above-magellan {
  margin-bottom: 30px
}

.otherapps {
  margin-bottom: 20px !important;
}

/*------------------------------------
 timeline styles
------------------------------------*/
.two-paths {
  margin-top: 20px;
}

.path-container {
  .path-item {
    margin-top: 10px;
    margin-bottom: 25px;
  }
  h4 {
    font-size: 1.3rem;
    font-weight: normal;
    text-transform: capitalize;
    padding-bottom: 10px;

  }
}


/*------------------------------------
circles
------------------------------------*/
.circlenumber {
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #0b4f69;
  width: 35px;
  height: 35px;
  position: relative;
  margin-top: -5px;
  margin-right: 18px;
  margin-bottom: 5px;
  margin-left: 0.83333rem;
  z-index: 2;
  h3 {
    color: #0b4f69;
    position: relative;
    text-align: center;
    top: 2.5%;
    font-weight: bold;
    font-size: 16px;
  }
}


@media only screen and (min-width: 0) and (max-width: 64.063em){
  .path-item {
    padding-left: 0.83333rem;
    .circlenumber {
      left: -12px;
    }
  }
}

@media #{$large-up} {
  .path-item {
    padding-left: 65px;
    position: relative;
    .circlenumber {
    position: absolute;
    left: 0;
    }
  }
}

/*------------------------------------
 mobile timeline styles
------------------------------------*/
@media only screen and (max-width: 1800px) {
  .path-container {
    .circle {
    top: 0;
    right: 0;
    left: 0;
    float: none;
    padding-top: 0px;
    margin-right: auto;
    }
  .panel {
    border: none;
    font-family: Consolas, 'Liberation Mono', Courier, monospace;
    font-weight: normal;
    padding-left:20px;
    }
  }
}

/*------------------------------------
misc
------------------------------------*/
p.note  {
  font-size: 16px;
}

@media #{$small-only} {
   .other-uses {
    .button {
      display: block !important;
    }
  }
}

.path-item:last-child, .path-item p:last-child, .nocli ul:last-child, .other-uses .button:last-child, .path-container p:last-child{
  margin-bottom: 0;
}

.dashed {
  border-style: dashed;
}

/*------------------------------------
what you get
------------------------------------*/
.header-container {
  padding: 15px 30px 10px 30px;
  background: #0b4f69;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  h3 {
    color:#fff;
  }
}

.info-list {
  font-size: .95rem;
  background: #fafafa;
  list-style: none;
  margin: 0 0 20px 0;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  li {
    padding: 20px 30px;
    pre {
      margin-bottom: 0;
      code {
        background: #fff;
      }
    }
  }
  li:nth-child(even) {
    background: #f5f5f5;
  }
}

.file-list {
  ul {
    list-style: none;
    margin-bottom: 12px;
  }

  img {
    border-radius: 5px;
    padding-bottom: 20px;
  }

  hr {
    margin-bottom: 4px;
    margin-top: 2px;
    width: 30%;
  }

  .fi-folder {
    color: #0b4f69;
  }

  .fi-page{
    color: #6f6f6f;
  }

  &.resources {
    ul {
      margin-left: 0;
    }
    .button {
      margin-top: 1rem;
    }
  }
}

.whatis {
  margin-top: 30px !important;
  @media only screen and (min-width: 0) and (max-width: 64.063em) {
    img {
      margin-bottom: 15px;
    }
  }
}

.setting_sass {
  padding-top: 23px;
}

.app-image {
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.arrow-list {
  margin-bottom: 0;
  li {
    padding-left: 20px;
    list-style: none;
    position:relative;
    i {
      position: absolute;
      left: 0;
    }
  }
}

.using-sass {
  pre:last-child {
    margin-bottom: 0;
  }
}

.minus {
  margin-top: 30px;
}

// Styling for Skill Level with Icon fonts on Index page

.skill-list h4 {
  margin-bottom: 0;
}

.skill-level {
  font-size: 0.77778rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  margin-top: 0;
  i {
    font-size: 120%;
    color: #FDC441;
  }
}

.gs-example {
  .row {
    border: 1px solid #c6c6c6;
    margin: 0.3rem !important;
    .row {
      margin: 0;
    }
  }
  .border-none {
    border-right: none !important;
  }
  .columns {
    padding-left: inherit;
    padding-right: inherit;
    border: 3px solid #fff;
    background: #eee;
  }
  .columns:nth-child(2) {
    background: #e1e1e1;
  }
  p {
    padding: 10px;
    margin-bottom: 0;
    text-align: center;
  }
}

.off-canvas-example {
  background: #efefef;
  .main-section {
    padding: 0 20px;
  }
}

.tabs-example {
  border: 1px solid #ccc;
  margin-bottom: 1.3rem;
  .tab-title.active a {
    background: #eee;
  }
  .tab-title > a {
    background: #e1e1e1;
    &:hover {
      background: scale-color(#eee, $lightness: -14%);
    }
  }
  .tabs-content {
    border-top: 1px solid #ccc;
    margin: 0;
    padding: 1rem;
  }
  .tabs-content > .content {
    padding: 0;
  }
}

.button-title {
  margin-top: -7px;
}

// Styles Codepen on Index Page

.codepen-demo {
  margin-top: 20px;
  .tabs-content {
    padding: 5px 15px;
    background: #f3f3f3;
  }
  .tab-title > a {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background: #333;
    color: #fff;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-right: 5px;
    &:hover {
      background: scale-color(#333, $lightness: 15%);
    }
  }
  .tab-title.active a {
    background: #f3f3f3;
    color: #333;
  }
}

// Stlyings for Getting Started Examples

.what-comes-with {
  hr {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
  .pagination {
    margin-bottom: 0;
  }
  .grid-example {
    margin-top: 10px;
  }

  .gs-buttongroup {
    text-align: center;
    .button-group {
      min-width: 100%;
      li {
        min-width: 50%;
        a {
          min-width: 100%;
        }
      }
    }
  }

  // Adds stylings to Index page

  .gs-iconbar {
    margin-bottom: 10px;
    i {
      color: #dadada;
    }
    a &:hover {
      color: #fff;
    }
  }

  .gs-topbar {
    margin-bottom: 15px;
  }

  .gs-hoverbutton {
    .button {
      margin-bottom: 0;
    }
  }
}

.gs-resources {
  h4 {
    margin-top: 20px;
  }
  .bottom-link {
    margin-bottom: 0;
    margin-top: 10px;
  }
}
.gs-modal {
  .reveal-modal {
    z-index: 1002;
  }
  .reveal-modal-bg {
    z-index: 1000;
  }
}


// Used on CSS Page to add rounded corners and padding to images
img.round-margin {
  border-radius: 5px;
  margin-bottom: 20px;
}

.panel.callout-warning {
background: #fff;
border: 5px solid red;
}

.button.floor {
  position:relative;
  margin-top:20%;
}

.left-off-canvas-menu {
  transform: translate3d(-100.5%, 0, 0);
}

.newsletter-foundation {
  border: 2px solid #085a78;
  h5 { font-size: 20px;font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
  font-weight: 400; margin-bottom: 0px; margin-top: 10px; color: #222; line-height: 24px; }
  p { clear: both; font-size: 13px; padding-top: 2px; color: #222; }
  a { color: #222; }
  .margintop-20px{
    margin-top:20px;
  }
  .row.collapse form {
    input[type="text"] { font-size: 17px; font-weight: 200; color: #999; border: 0; }
    .button { border: 0; box-shadow: none; background: #257696; }
    .button:hover { background: #1b566d; }
  }
}

.row.collapse.margintop-20px{
  margin-top:20px;
}

// building blocks styles

.building-blocks-section {
  padding: 0.75rem 0 3rem 0;

  .building-blocks-header {
    margin-bottom: 2.5rem;
  }
}

.building-block-item {
  padding: 0.5rem 0;
  text-align: center;
  border: 3px solid $secondary-color;
  min-height: 14rem;
  overflow: hidden;
  margin-bottom: 1rem;

  .building-block-item-header {
    margin-bottom: 2rem;
  }
}


.top-bar.docs-bar { height: 45px !important; }

.top-bar.docs-bar .name h1 {
  padding: 0;
  margin-left: 20px;
}
.top-bar.docs-bar .name h1 img {
  margin-top: -2px;
  display: inline-block !important;
  vertical-align: middle !important;
}
.top-bar.docs-bar .name h1 a {
  opacity: 0.75;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  font-family: "Proxima Nova", "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: bold;
  font-size: 22px !important;
  line-height: 45px;
  padding: 0;
  text-rendering: auto;
  span { font-size: 17px !important; line-height: 0 !important; margin-left: 0px; }
}
.top-bar.docs-bar .name h1 a:hover {
  opacity: 1;
}

.top-bar.docs-bar .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
  border-right: solid 1px #4e4e4e;
  border-bottom: none;
  border-top: none;
  clear: none;
  height: 45px;
  width: 0;
}
.top-bar.docs-bar .top-bar-section ul li > a:not(.button) {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !important;
  font-weight: bold;
  padding: 0 15px;
  line-height: 45px;
}

.top-bar.docs-bar .top-bar-section .dropdown li a {
  font-weight: normal !important;
}
.top-bar.docs-bar .top-bar-section .has-form {
  padding: 0 15px !important;
  height: 45px;
  line-height: 45px;
  a { line-height: 47px; }
}

.top-bar.docs-bar .top-bar-section ul li > a.button {
  font-size: 0.8125rem;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 20px;
  border-bottom: 2px solid;
  background-color: #008CBA;
  border-color: #007095;
  color: #FFFFFF;
  border-style: solid;
  border-radius: 3px;
  cursor: pointer;
  font-weight: bold;
  line-height: normal;
  margin: 0 0 1.25rem;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  border-color: #007095;
  transition: background-color 300ms ease-out;
}