.comments-container, .guest-books-form
  textarea
    margin-bottom: 0
  .submit-and-loader
    margin-top: 1rem
    float: right
    .submit-loader
      margin-right: 10px
      max-height: 34px
      display: none

.comment
  background-color: $white-smoke
  border: 1px solid $smoke
  border-radius: 3px
  padding: 10px
  margin-bottom: 2rem

  .comment-avatar
    img
      width: 100%

.comment-avatar
  img
    padding: 3px
    border-radius: 50%
    background-color: $white
    box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215,215,215,0.75)

.comment-author
  opacity: .8

.comment-destroy, .comment-not-signalled, .comment-signalled, .comment-reply
  text-decoration: underline
  font-size: 11px

.comment-destroy a
  color: $warning-color

.comment-signalled
  text-decoration: none

.auhtor-with-avatar
  text-align: center

.comment-highlight
  background-color: rgba($success-color, .3) !important

.comment-count
  display: inline !important

.nested_messages
  margin-left: 50px

.nested_messages .nested_messages .nested_messages
  margin-left: 0

Update background color of nested comments to symbolize parent / children relation

.comments-container, .guest-books-form
  textarea
    margin-bottom: 0
  .submit-and-loader
    margin-top: 1rem
    float: right
    .submit-loader
      margin-right: 10px
      max-height: 34px
      display: none

.comment
  background-color: $white-smoke
  border: 1px solid $smoke
  border-radius: 3px
  padding: 10px
  margin-bottom: 2rem

  .comment-avatar
    img
      width: 100%

.comment-avatar
  img
    padding: 3px
    border-radius: 50%
    background-color: $white
    box-shadow: 0 1px 9px #e0e0e0,inset 0 0 2px rgba(215,215,215,0.75)

.comment-author
  opacity: .8

.comment-destroy, .comment-not-signalled, .comment-signalled, .comment-reply
  text-decoration: underline
  font-size: 11px

.comment-destroy a
  color: $warning-color

.comment-signalled
  text-decoration: none

.auhtor-with-avatar
  text-align: center

.comment-highlight
  background-color: rgba($success-color, .3) !important

.comment-count
  display: inline !important

.nested_messages
  margin-left: 50px
  .comment
    background-color: rgba($primary-color, .05%)

.nested_messages .nested_messages .nested_messages
  margin-left: 0


@import "typography/typography"
@import "placeholder/container"
@import "typography/typeset"

.group,
.ex
  +typeset-block

.wrapper
  @extend %container
  margin: 0 auto 0
  max-width: 62em
  min-height: 100vh
  padding: 0 10em
  text-align: left
  overflow: hidden

Remove "width = 100%" from .ex for jigs.

@import "typography/typography"
@import "placeholder/container"
@import "typography/typeset"

.group,
.ex
  +typeset-block

.ex
  width: auto

.wrapper
  @extend %container
  margin: 0 auto 0
  max-width: 62em
  min-height: 100vh
  padding: 0 10em
  text-align: left
  overflow: hidden


@import mixins
@import variables
@import branding

.product-img
  border-bottom: 40px white solid
  border-top: 20px white solid
  border-left: 20px white solid
  border-right: 20px white solid
  outline: 1px solid #ccc
  @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25))

.hero-img
  background-color: #333
  width: 100%
  min-height: 160px
  height: inherit
  max-height: 260px
  overflow: hidden

.hero-img-small
  background-color: #333
  width: 100%
  // min-height: 60px
  height: inherit
  overflow: hidden
  margin: 0 0 1rem 0 !important

.producer-logo
  max-width: 220px

@media only screen and (max-width: 1024px)
  .product-img
    margin-top: 2em
    margin-bottom: 1em

Tweak the styling on producer modals so no grey background

@import mixins
@import variables
@import branding

.product-img
  border-bottom: 40px white solid
  border-top: 20px white solid
  border-left: 20px white solid
  border-right: 20px white solid
  outline: 1px solid #ccc
  @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.25))

.hero-img
  border-bottom: 1px solid $disabled-bright
  width: 100%
  min-height: 56px
  height: inherit
  max-height: 260px
  overflow: hidden

.hero-img-small
  background-color: #333
  width: 100%
  // min-height: 60px
  height: inherit
  overflow: hidden
  margin: 0 0 1rem 0 !important

.producer-logo
  max-width: 220px

@media only screen and (max-width: 1024px)
  .product-img
    margin-top: 2em
    margin-bottom: 1em


$clr-brick: #c1122b
$clr-brick-light: #f5e6e7
$clr-brick-light-trans: rgba(245, 230, 231, 0.9)
$clr-brick-ultra-light: #faf5f6
$clr-brick-bright: #eb4c46
$clr-brick-med-bright: #e5a2a0
$clr-brick-light-bright: #f5c4c9

$clr-turquoise: #0b8c61
$clr-turquoise-light: #ceefe4
$clr-turquoise-ultra-light: #e8f9f4
$clr-turquoise-bright: #23a877

$disabled-light: #e5e5e5
$disabled-bright: #ccc
$disabled-dark: #999
$med-grey: #666
$dark-grey: #333

Add in blues for use

$clr-brick: #c1122b
$clr-brick-light: #f5e6e7
$clr-brick-light-trans: rgba(245, 230, 231, 0.9)
$clr-brick-ultra-light: #faf5f6
$clr-brick-bright: #eb4c46
$clr-brick-med-bright: #e5a2a0
$clr-brick-light-bright: #f5c4c9

$clr-turquoise: #0b8c61
$clr-turquoise-light: #ceefe4
$clr-turquoise-ultra-light: #e8f9f4
$clr-turquoise-bright: #23a877

$clr-blue: #0096ad
$clr-blue-light: #85d9e5
$clr-blue-bright: #14b6cc

$disabled-light: #e5e5e5
$disabled-bright: #ccc
$disabled-dark: #999
$med-grey: #666
$dark-grey: #333


table
  width: 100%

thead
  text-align: left

td, th
  padding: quarter($spacing-unit)

.table-bordered
  > tr > th,
  > tr > td,
  > thead > tr > th,
  > tbody > tr > td
    border: 1px solid $color-ui

.table-zebra
  > tr:nth-child(odd) > td
  > tbody > tr:nth-child(odd) > td
    background-color: $table-zebra-background

.table-hover
  > tr:hover > td
  > tbody > tr:hover > td
    background-color: $table-hover-background

Fix missing styles for tables

table
  width: 100%

thead
  text-align: left

td, th
  padding: quarter($spacing-unit)

.table-bordered
  > tr > th,
  > tr > td,
  > thead > tr > th,
  > tbody > tr > td
    border: 1px solid $color-ui

.table-zebra
  > tr:nth-child(odd) > td,
  > tbody > tr:nth-child(odd) > td
    background-color: $table-zebra-background

.table-hover
  > tr:hover > td,
  > tbody > tr:hover > td
    background-color: $table-hover-background


body
  font-family: Lato
  margin: 0
  font-size: 0
  display: flex
  flex-flow: row wrap
  align-items: stretch
  min-height: 100vh
  > *
    flex: 1 100%

@media all and (min-width: 600px)
  nav
    flex: 1 25%
  main
    font-size: 1rem
    flex: 2 75%

Set the red of the page

body
  font-family: Lato
  margin: 0
  font-size: 0
  display: flex
  flex-flow: row wrap
  align-items: stretch
  min-height: 100vh
  > *
    flex: 1 100%

$red: #861818

@media all and (min-width: 600px)
  nav
    flex: 1 25%
  main
    font-size: 1rem
    flex: 2 75%


.pagination
  +leader()
  text-align: center

.pagination__cells
  +scut-list-inline(scut-rem(15 - 7))

.pagination__arrow
  display: inline-block
  fill: $yellow
  .start-page,
  .end-page
    height: scut-rem(23)
    width: scut-rem(30)
  .pre,
  .next
    height: scut-rem(23)
    width: scut-rem(20)

  &:hover
    fill: $yellow-dark

.pagination__cell
  +scut-hide-visually
  +susy($desktop)
    +reverse-hide-visually
    vertical-align: middle

  .link
    $size: scut-rem(36)
    display: block
    width: $size
    text-align: center
    border-radius: scut-rem(3)
    color: #fff
    +scut-vcenter-lh($size)
    +scut-color-swap($yellow, $yellow-dark, $bg: true)

  &.active
    +reverse-hide-visually
    vertical-align: middle

    .link
      background-color: $yellow-dark

Revert "change: pagination cell's margin"

.pagination
  +leader()
  text-align: center

.pagination__cells
  +scut-list-inline(scut-rem(15))

.pagination__arrow
  display: inline-block
  fill: $yellow
  .start-page,
  .end-page
    height: scut-rem(23)
    width: scut-rem(30)
  .pre,
  .next
    height: scut-rem(23)
    width: scut-rem(20)

  &:hover
    fill: $yellow-dark

.pagination__cell
  +scut-hide-visually
  +susy($desktop)
    +reverse-hide-visually
    vertical-align: middle

  .link
    $size: scut-rem(36)
    display: block
    width: $size
    text-align: center
    border-radius: scut-rem(3)
    color: #fff
    +scut-vcenter-lh($size)
    +scut-color-swap($yellow, $yellow-dark, $bg: true)

  &.active
    +reverse-hide-visually
    vertical-align: middle

    .link
      background-color: $yellow-dark


.import-container
  max-width: 100%
  min-height: auto
  overflow: hidden
  border-top: 1px solid #f2f2f2

  .content
    padding: 0
    margin: 0
    overflow-y: scroll
    max-height: 400px
    min-height: 350px
    margin-bottom: 5px
    display: none

    &.open
      display: block
      padding-bottom: 50px

    .selection-item
      display: table
      width: 100%
      color: #767676
      table-layout: fixed

      .title, .meta
        display: table-cell
        vertical-align: middle

      .title
        width: 80%

      .meta
        width: 20%
        text-align: right
        white-space: nowrap
        font-size: 14px

  .actions
    padding: 10px 15px
    background-color: #f2f2f2
    overflow: hidden
    position: absolute
    width: calc(100% - 30px)
    bottom: 0

    .notification
      line-height: 36px

Fix width of action bar

.import-container
  max-width: 100%
  min-height: auto
  overflow: hidden
  border-top: 1px solid #f2f2f2

  .content
    padding: 0
    margin: 0
    overflow-y: scroll
    max-height: 400px
    min-height: 350px
    margin-bottom: 5px
    display: none

    &.open
      display: block
      padding-bottom: 50px

    .selection-item
      display: table
      width: 100%
      color: #767676
      table-layout: fixed

      .title, .meta
        display: table-cell
        vertical-align: middle

      .title
        width: 80%

      .meta
        width: 20%
        text-align: right
        white-space: nowrap
        font-size: 14px

  .actions
    padding: 10px 15px
    background-color: #f2f2f2
    overflow: hidden
    position: absolute
    width: 100%
    bottom: 0

    .notification
      line-height: 36px


.upper-footer
  background-color: #2d2a2b
  p, span
    color: $white
    font-size: 12px

    a:link, a:hover, a:active, a:visited
      color: $white

  .letter-a
    color: #ed1c24
  .initials
    .letter-l
      color: $primary-color
    .letter-esperluette
      color: $secondary-color
    .letter-r
      color: $tercery-color

  .fix-padding-left
    padding-right: 20px
  .fix-padding-right
    padding-left: 20px

.lower-footer
  p
    font-size: 12px
    text-align: right
    margin-bottom: 0

Add white background for initials letters in mailer footer

.upper-footer
  background-color: #2d2a2b
  p, span
    color: $white
    font-size: 12px

    a:link, a:hover, a:active, a:visited
      color: $white

  .letter-a
    color: #ed1c24
  .initials
    background-color: $white
    padding: 5px 4px
    .letter-l
      color: $primary-color
      font-size: 8px
    .letter-esperluette
      color: $secondary-color
      font-size: 8px
    .letter-r
      color: $tercery-color
      font-size: 8px

  .fix-padding-left
    padding-right: 20px
  .fix-padding-right
    padding-left: 20px

.lower-footer
  p
    font-size: 12px
    text-align: right
    margin-bottom: 0


.rui-avatar
  width: 1em
  height: 1em
  border-radius: 2px
  text-align: center

  vertical-align: baseline
  margin: 0 .4em -0.05em

  &:first-child
    margin-left: 0

  &:last-child
    margin-right: 0

Adjust avatar margins to avoid enlarging text area

.rui-avatar
  width: 1.3em
  height: 1.3em
  border-radius: 2px
  text-align: center

  vertical-align: baseline
  margin: -0.3em .4em -0.2em

  &:first-child
    margin-left: 0

  &:last-child
    margin-right: 0


@import '~styles/base'

$radio-button-size: 20px

.RadioGroup

    .RadioGroup__field
        display: block
        color: color(text-disabled)

        &.RadioGroup__field--active
            color: color(text-primary)
            transition: color $key-animation-duration $key-bezier-animation-in

    .RadioGroup__label
        display: inline-block
        +clickable

    .Radio
        display: inline-block
        margin-right: 8px
        // position: relative
        // top: 100%
        // margin-top: -50%

        &.Radio--active .Radio__circle::after
            border: 2px solid color(primary)
            transform: scale(1)
            transition: transform $key-animation-duration $key-bezier-animation-in

        .Radio__circle
            +circle($radio-button-size)
            background: grey(9)
            position: relative
            border: 2px solid grey(9)

            &::after
                content: ''
                top: -2px
                left: -2px
                position: absolute
                border: 2px solid transparent
                +circle($radio-button-size - 2px)
                transform: scale(0)
                transition: transform $key-animation-duration $key-bezier-animation-out

Make active circle the same size as its parent

@import '~styles/base'

$radio-button-size: 20px

.RadioGroup

    .RadioGroup__field
        display: flex
        align-items: center
        color: color(text-disabled)

        &.RadioGroup__field--active
            color: color(text-primary)
            transition: color $key-animation-duration $key-bezier-animation-in

        &:hover .Radio__circle
            background: grey(7)
            border: 2px solid grey(8)

    .RadioGroup__label
        display: inline-block
        +clickable

    .Radio
        display: inline-block
        margin-right: 8px
        // position: relative
        // top: 100%
        // margin-top: -50%

        &.Radio--active .Radio__circle::after
            border: 2px solid color(primary)
            transform: scale(1)
            transition: transform $key-animation-duration $key-bezier-animation-in

        .Radio__circle
            +circle($radio-button-size)
            background: grey(9)
            position: relative
            border: 2px solid grey(9)
            transition: background-color $key-animation-duration ease-out

            &::after
                content: ''
                top: -2px
                left: -2px
                position: absolute
                border: 2px solid transparent
                +circle($radio-button-size - 4px)
                transform: scale(0)
                transition: transform $key-animation-duration $key-bezier-animation-out


@import "../../../colors"
@import "../../../variables"

.aae-breadcrumbs
  position: relative
  width: 100%
  padding: 13px 0 10px
  background-color: $black-opacity-3
  z-index: 20

  .aae-breadcrumbs-wrapper
    width: 100%
    max-width: 1400px
    margin: 0 auto

    .aae-breadcrumbs-content
      font-size: 14px
      text-transform: uppercase
      font-weight: 500
      position: relative
      left: -5px
      padding: 0 60px
      margin: 0
      color: $white
      display: flex
      justify-content: flex-start
      align-items: flex-start

      .aae-breadcrumbs-item
        margin: 0 5px

        a
          color: $primary-light
          text-decoration: none

          &:hover,
          &:active
            border-bottom: 1px solid $primary

        .aae-breadcrumbs-subname
          font-weight: 400

Edit hover color on main

@import "../../../colors"
@import "../../../variables"

.aae-breadcrumbs
  position: relative
  width: 100%
  padding: 13px 0 10px
  background-color: $black-opacity-3
  z-index: 20

  .aae-breadcrumbs-wrapper
    width: 100%
    max-width: 1400px
    margin: 0 auto

    .aae-breadcrumbs-content
      font-size: 14px
      text-transform: uppercase
      font-weight: 500
      position: relative
      left: -5px
      padding: 0 60px
      margin: 0
      color: $white
      display: flex
      justify-content: flex-start
      align-items: flex-start

      .aae-breadcrumbs-item
        margin: 0 5px

        a
          color: $primary-light
          text-decoration: none

          &:hover,
          &:active
            color: $white

        .aae-breadcrumbs-subname
          font-weight: 400


//-------------------------------------
//  Layout
//-------------------------------------

// ----- Rows ----- //

.l-row

// ----- Cells ----- //

%l-cell, .l-cell
  margin: 0 auto
  max-width: rem($l-maxWidth)
  padding: 0 rem(60px)

// ----- Grids ----- //

.l-grid

.l-grid-box

// ----- Cards ----- //

.l-card

// ----- Buckets ----- //

.l-bucket

// ----- Utilities ----- //

%l-block, .l-block
  display: block

%l-condense, .l-condense
  margin-bottom: rem($base-whitespace / 2)

%l-pullLeft, .l-pullLeft
  float: left

%l-pullRight, .l-pullRight
  float: right

%l-space, .l-space
  margin-bottom: rem($base-whitespace)

%l-xspace, .l-xspace
  margin-bottom: rem($base-whitespace * 2)

Adjust comment headers in Core Layout

//-------------------------------------
//  Layout
//-------------------------------------

// ----- Row ----- //

.l-row

// ----- Cell ----- //

%l-cell, .l-cell
  margin: 0 auto
  max-width: rem($l-maxWidth)
  padding: 0 rem(60px)

// ----- Grid ----- //

.l-grid

.l-grid-box

// ----- Card ----- //

.l-card

// ----- Bucket ----- //

.l-bucket

// ----- Utilities ----- //

%l-block, .l-block
  display: block

%l-condense, .l-condense
  margin-bottom: rem($base-whitespace / 2)

%l-pullLeft, .l-pullLeft
  float: left

%l-pullRight, .l-pullRight
  float: right

%l-space, .l-space
  margin-bottom: rem($base-whitespace)

%l-xspace, .l-xspace
  margin-bottom: rem($base-whitespace * 2)


+establish-baseline()

*,
*:after,
*:before
  box-sizing: border-box

html
  height: 100%

html,
body
  width: 100%
  min-height: 100%

body
  display: flex
  flex-direction: column

body > iframe
  height: 0
  position: absolute
  bottom: -1
  left: 0

#app
  display: flex
  flex: 1

a,
a:visited
  color: $blue
  text-decoration: none
  cursor: pointer

p
  margin-top: 0

html
  +adjust-leading-to(2)

body
  overflow-x: hidden

input:-webkit-autofill
  -webkit-box-shadow: 0 0 0px 1000px white inset

.Select.Select--multi > div:nth-last-child(1)
  position: relative

.full-page-dialog
  padding: 0 !important

  > div:first-child
    padding: 16px 0
    overflow-y: auto
    height: 100vh
    display: flex
    align-items: center

    .full-page-dialog__content
      margin: auto !important

      > div
        box-shadow: none !important

[style*="cursor: not-allowed"]
  cursor: default !important

  svg
    display: none !important

// Fix strange border on Safari
// https://github.com/callemall/material-ui/issues/5410
div
  -webkit-appearance: none !important

Move solution style before class selectors

+establish-baseline()

*,
*:after,
*:before
  box-sizing: border-box

html
  height: 100%

html,
body
  width: 100%
  min-height: 100%

body
  display: flex
  flex-direction: column

body > iframe
  height: 0
  position: absolute
  bottom: -1
  left: 0

#app
  display: flex
  flex: 1

a,
a:visited
  color: $blue
  text-decoration: none
  cursor: pointer

p
  margin-top: 0

html
  +adjust-leading-to(2)

body
  overflow-x: hidden

input:-webkit-autofill
  -webkit-box-shadow: 0 0 0px 1000px white inset

// Fix strange border on Safari
// https://github.com/callemall/material-ui/issues/5410
div
  -webkit-appearance: none !important

.Select.Select--multi > div:nth-last-child(1)
  position: relative

.full-page-dialog
  padding: 0 !important

  > div:first-child
    padding: 16px 0
    overflow-y: auto
    height: 100vh
    display: flex
    align-items: center

    .full-page-dialog__content
      margin: auto !important

      > div
        box-shadow: none !important

[style*="cursor: not-allowed"]
  cursor: default !important

  svg
    display: none !important


@import mixins

#active-table-search
  position: relative

  i.ofn-i_020-search
    position: absolute
    left: 26px
    top: 12px
    font-size: 1.6em
    z-index: 2
    color: #b2b2b2

  input[type="text"]
    font-size: 2em
    @include csstrans
    @include big-input
    padding-left: 44px

Add styling for filters block

@import mixins
@import branding

.filter-box
  border: 2px solid $clr-brick
  .tdhead
    background-color: white
    padding: 0.25rem 0.5rem
    margin-top: 0.9rem
  li a
    display: block
    line-height: 2
    background-color: rgba(0,0,0,0.25)
    color: #666

    &:hover, &:focus, &:active
      color: #333
      render-svg
        svg
          path
            fill: #333

    render-svg
      svg
        width: 2rem
        height: 2rem
        display: block
        float: left
        path
          fill: #666

#active-table-search
  position: relative

  i.ofn-i_020-search
    position: absolute
    left: 26px
    top: 12px
    font-size: 1.6em
    z-index: 2
    color: #b2b2b2

  input[type="text"]
    font-size: 2em
    @include csstrans
    @include big-input
    padding-left: 44px


// *************************************#
// [_modals.sass]
// *************************************#

.modal--pdf-preview .modal-body
  max-height: 700px
  overflow: scroll

  canvas
    display: block
    margin: 0 auto

Fix styling for PDF canvas to make it visible

// *************************************#
// [_modals.sass]
// *************************************#

.modal--pdf-preview .modal-body
  max-height: 700px
  overflow: scroll

  canvas
    left: 50% !important
    z-index: 1 !important
    display: block

    +transform(translateX(-50%))


$slider-shadow-color: rgba(0, 0, 0, .25)

.slider
  width: 100%
  flex-grow: 1
  position: relative

  // Inner layout
  display: flex
  justify-content: space-around
  align-items: center

  // Content

  .card
    // Positioning
    width: 60vw
    height: 60vh
    position: relative;
    // Appearance
    background-color: $white
    color: $dark-text-primary
    border-radius: 10px
    box-shadow: 15px 15px 20px 0 $slider-shadow-color

    h5
      margin: 0
      position: absolute
      top: 50%
      transform: translateY(-50%)
      width: 100%

  // Arrows

  .icon
    cursor: pointer
    user-select: none

    display: block
    font-size: 30px
    text-align: center
    transition: transform .1s, 'text-shadow' .1s
    width: 40px

    &.ion-chevron-left
      left: 5%

    &.ion-chevron-right
      right: 5%

    &:hover
      transform: scale(1.2, 1.2)
      text-shadow: 2px 2px 5px $slider-shadow-color

Remove stray semicolon from sass

$slider-shadow-color: rgba(0, 0, 0, .25)

.slider
  width: 100%
  flex-grow: 1
  position: relative

  // Inner layout
  display: flex
  justify-content: space-around
  align-items: center

  // Content

  .card
    // Positioning
    width: 60vw
    height: 60vh
    position: relative
    // Appearance
    background-color: $white
    color: $dark-text-primary
    border-radius: 10px
    box-shadow: 15px 15px 20px 0 $slider-shadow-color

    h5
      margin: 0
      position: absolute
      top: 50%
      transform: translateY(-50%)
      width: 100%

  // Arrows

  .icon
    cursor: pointer
    user-select: none

    display: block
    font-size: 30px
    text-align: center
    transition: transform .1s, 'text-shadow' .1s
    width: 40px

    &.ion-chevron-left
      left: 5%

    &.ion-chevron-right
      right: 5%

    &:hover
      transform: scale(1.2, 1.2)
      text-shadow: 2px 2px 5px $slider-shadow-color


// -----------------------------------------------------------------------------
//
//  Card layer module
//
// -----------------------------------------------------------------------------

.card--layer
  width: 800px
  margin: 0px auto
  .row--billboard
    width: 100%
    background: transparent
  .row--secondary
    padding-top: 20px
  .row__title--secondary
    max-width: 100%
    .place-title
      padding-left: 28px
      &:before
        +size(24px)
        top: 0px
        left: 0px

.card--layer__content
  @extend %clearfix
  @extend %rounded-corners
  position: relative
  margin-top: 50px
  padding: 25px 25px 0px 25px
  background-color: white

  .copy--h1
    width: 90%
    margin: 0 0 10px 0
    line-height: 1.1em

  .copy--feature
    +font-size(20)

  .related
    width: 800px
    margin-left: -25px
    .related_articles, .related_guides
      margin: 0px

  a > img
    width: 100%
    height: auto

.card--layer__close
  +size(30px)
  position: absolute
  top: 20px
  right: 20px

.card--layer__article
  padding-bottom: 10px

Fix the secondary nav on card layer pages

// -----------------------------------------------------------------------------
//
//  Card layer module
//
// -----------------------------------------------------------------------------

.card--layer
  width: 800px
  margin: 0px auto
  .row--billboard
    width: 100%
    background: transparent
  .row__title--secondary
    max-width: 100%
    .place-title
      padding-left: 28px
      &:before
        +size(24px)
        top: 0px
        left: 0px

.card--layer__content
  @extend %clearfix
  @extend %rounded-corners
  position: relative
  margin-top: 50px
  padding: 25px 25px 0px 25px
  background-color: white

  .copy--h1
    width: 90%
    margin: 0 0 10px 0
    line-height: 1.1em

  .copy--feature
    +font-size(20)

  .related
    width: 800px
    margin-left: -25px
    .related_articles, .related_guides
      margin: 0px

  a > img
    width: 100%
    height: auto

.card--layer__close
  +size(30px)
  position: absolute
  top: 20px
  right: 20px

.card--layer__article
  padding-bottom: 10px


#logo img
  +transition(all .1s ease-in-out)
  &:hover
    opacity: .7

.index-article
  &:hover
    .post-date
      color: $medium-gray

.post-title a,
.pagination-link,
.recent-posts a,
.recent-posts a
  &:hover
    text-shadow: 0 1px 0 rgba(255,255,255,0)

.post-title a
  &:hover
    color: $brand-color

.navigation a,
.recent-posts a,
.footer-tags a
  +transition(all .1s ease-in-out)
  &:hover
    color: lighten($brand-color, 60%)

.article-detail a,
.recent-posts a
  &:hover

.pagination-link
  &:hover
    background-color: $brand-color
    box-shadow: 0px 1px 2px rgba(shade($brand-color, 75%), .20)
  &:hover a
    color: white
  &:active a
    opacity: .7
    box-shadow: 0px 0px 0px rgba(shade($brand-color, 45%), .30)

Adjust hover color for text links

#logo img
  +transition(all .1s ease-in-out)
  &:hover
    opacity: .7

.index-article
  &:hover
    .post-date
      color: $light-gray

.post-title a,
.pagination-link,
.recent-posts a,
.recent-posts a
  &:hover
    text-shadow: 0 1px 0 rgba(255,255,255,0)

.post-title a
  &:hover
    color: $light-gray

.navigation a,
.recent-posts a,
.footer-tags a
  +transition(all .1s ease-in-out)
  &:hover
    color: $light-gray

.article-detail a,
.recent-posts a
  &:hover
    color: $medium-gray

.pagination-link
  &:hover
    background-color: $brand-color
    box-shadow: 0px 1px 2px rgba(shade($brand-color, 75%), .20)
  &:hover a
    color: white
  &:active a
    opacity: .7
    box-shadow: 0px 0px 0px rgba(shade($brand-color, 45%), .30)


.main
  flex: 5 0 0
  +y-scrollable

  .article
    +desktop
      width: 80%
      padding: 0 1.5rem

    +mobile
      padding: 0

    .content
      h1, h2, h3, h4, h5, h6
        text-transform: uppercase
        font-weight: 300

Add styling for hover widget

.main
  flex: 5 0 0
  +y-scrollable

  .article
    +desktop
      width: 80%
      padding: 0 1.5rem

    +mobile
      padding: 0

    .content
      h1, h2, h3, h4, h5, h6
        text-transform: uppercase
        font-weight: 300

    .doc-content
      .anchorjs-link:after
        color: $primary


body
  background: #fff
  font: 1em/1.5em "bree_serifregular", serif
  color: #393939
  text-size-adjust: 100%

Set HTML background (for overscroll)

html
  background: $theme-base-color

body
  background: #fff
  font: 1em/1.5em "bree_serifregular", serif
  color: #393939
  text-size-adjust: 100%


header
  +span-columns(12)
  margin-top: 30px
  height: 70px

.navigation
  float: right

.navigation a
  color: #777777
  &:hover
    border-bottom: 1px solid #555555
    color: #555555

.navigation li
  display: inline-block
  padding-top: 0.5em

.navigation li a
  display: block
  margin:
    top: 0.5em
    bottom: 0.5em
    right: 0.9em

#logo
  +shift(1.15)
  +span-columns(1)
  img
    height: 65px

Replace nav colors with variables

#logo
  +shift(1.15)
  +span-columns(1)
  img
    height: 65px
header
  +span-columns(12)
  height: 70px
  margin:
    top: 30px

.navigation
  float: right

.navigation a
  color: $dark-gray
  margin:
    top: 0.5em
    bottom: 0.5em
    right: 0.9em
  &:hover
    border-bottom: 1px solid $matcha-green
    color: $matcha-green

.navigation li
  display: inline-block
  padding:
    top: 0.5em


.feedback-info
  background: $light-grey
  border-radius: 2px
  overflow: hidden
  padding: 0.5em
  text-overflow: ellipsis
  white-space: nowrap

  +max-width($small)
    float: none
    margin: 0.5em auto
    width: 75%

  &__label
    display: inline-block
    font-size: $f-small
    font-weight: bold

  &__value
    color: $blue
    font-size: $f-small
    font-weight: bold

  &--destination,
  &--identityprovider,
  &--idp-hash,
  &--serviceprovider,
  &--serviceprovidername
    +min-width($small + 1)
      grid-column-end: span 2
      order: -1

  &--entityid,
  &--statusmessage
    +min-width($small + 1)
      grid-column-end: span 3
      order: -1

Increase the feedback info width on small devices

.feedback-info
  background: $light-grey
  border-radius: 2px
  overflow: hidden
  padding: 0.5em
  text-overflow: ellipsis
  white-space: nowrap

  +max-width($small)
    float: none
    margin: 0.5em auto
    width: 95%

  &__label
    display: inline-block
    font-size: $f-small
    font-weight: bold

  &__value
    color: $blue
    font-size: $f-small
    font-weight: bold

  &--identityprovider,
  &--idp-hash,
  &--serviceprovider,
  &--serviceprovidername
    +min-width($small + 1)
      grid-column-end: span 2
      order: -1

  &--destination,
  &--entityid,
  &--statusmessage
    +min-width($small + 1)
      grid-column-end: span 3
      order: -1


@mixin svg-background($svg, $inline: true, $width: '', $height: '', $dimensions: false)
    .svg &
        @if $inline == true
            background: inline-image($svg)
        @else
            background: image-url($svg)
        @include background-size($width $height)
        @if $dimensions == true
            @if $width != ''
                width: $width
            @if $height != ''
                height: $height

Add support for rem units

@mixin svg-background($svg, $inline: true, $width: '', $height: '', $dimensions: false, $rem: false)
    .svg &
        @if $inline == true
            background: inline-image($svg)
        @else
            background: image-url($svg)
        @if $rem == true
            @include background-size(rem($width) rem($height))
            @if $width != ''
                width: rem($width)
            @if $height != ''
                height: rem($height)
        @else
            @include background-size($width $height)
        @if $dimensions == true and $rem == false
            @if $width != ''
                width: $width
            @if $height != ''
                height: $height


// Main SASS file.

// Color palette
@import colors
// Fonts
@import fonts

// Helpful CSS classes
@import helper_classes
// Styles for individual sections
@import sections/header/main
@import sections/projects/main
@import sections/contact
// Top nav bar
@import top_bar

*
  box-sizing: border-box

  &::before,
  &::after
    box-sizing: border-box

body
  margin: 0
  font-family: 'Open Sans', sans-serif
  -webkit-font-smoothing: antialiased

h1,
h2,
h3,
h4,
h5,
h6
  font-family: 'PierSans', sans-serif
  font-weight: 700

h1,
h2
  font-size: 5vw

h3,
h4
  font-size: 4vw

h5,
h6
  font-size: 3.5vw

h1,
h5
  text-transform: uppercase

a
  color: $light-text-primary
  text-decoration: none

  &:visited
    color: $light-text-primary

section
  width: 100vw

  overflow: auto

  &.full
    // Account for height of top bar
    height: calc(100vh - 69px)

Remove horizontal scrollbars on windows

// Main SASS file.

// Color palette
@import colors
// Fonts
@import fonts

// Helpful CSS classes
@import helper_classes
// Styles for individual sections
@import sections/header/main
@import sections/projects/main
@import sections/contact
// Top nav bar
@import top_bar

*
  box-sizing: border-box

  &::before,
  &::after
    box-sizing: border-box

  overflow-x: hidden

body
  margin: 0
  font-family: 'Open Sans', sans-serif
  -webkit-font-smoothing: antialiased

h1,
h2,
h3,
h4,
h5,
h6
  font-family: 'PierSans', sans-serif
  font-weight: 700

h1,
h2
  font-size: 5vw

h3,
h4
  font-size: 4vw

h5,
h6
  font-size: 3.5vw

h1,
h5
  text-transform: uppercase

a
  color: $light-text-primary
  text-decoration: none

  &:visited
    color: $light-text-primary

section
  width: 100vw

  overflow: auto

  &.full
    // Account for height of top bar
    height: calc(100vh - 69px)


@import ../../styles/lib

.RegionTools
  position: absolute
  top: rem(5)
  right: rem(5)
  color: #aaa

.no-touch .RegionTools button:hover .SVGIcon > g
  stroke: black

.RegionTools .DragHandler
  transform: rotate(90deg)
  cursor: move
  display: none

.no-touch .RegionTools .DragHandler
  display: block

.editor-region[data-num-blocks="1"] .DragHandler
  display: none

.BlockPlaceholder + .RegionTools
  display: none

.editor:not(.hasContent) .BlockRemove
  display: none

@media(min-width: #{$break-2})
  .no-touch .BlockRemove > .DeleteIcon
    transform-origin: center center
    transition-duration: $speed, $speed, $speed2
  .no-touch .BlockRemove:hover > .DeleteIcon
    transition-delay: 0.5s, 0.5s, (0.5s + $speed)
    transform: rotate(360deg)

Fix issue with how the drag handler was displaying

@import ../../styles/lib

.RegionTools
  position: absolute
  top: rem(5)
  right: rem(5)
  color: #aaa

.no-touch .RegionTools button:hover .SVGIcon > g
  stroke: black

.RegionTools .DragHandler
  transform: rotate(90deg)
  cursor: move
  display: none

.no-touch .RegionTools .DragHandler
  display: inline-block

.editor-region[data-num-blocks="1"] .DragHandler
  display: none

.BlockPlaceholder + .RegionTools
  display: none

.editor:not(.hasContent) .BlockRemove
  display: none

@media(min-width: #{$break-2})
  .no-touch .BlockRemove > .DeleteIcon
    transform-origin: center center
    transition-duration: $speed, $speed, $speed2
  .no-touch .BlockRemove:hover > .DeleteIcon
    transition-delay: 0.5s, 0.5s, (0.5s + $speed)
    transform: rotate(360deg)


//-------------------------------------
//  Base
//-------------------------------------

html
  background: $l-background
  color: $c-color
  font-family: $c-fontFamily
  font-size: $c-fontSize
  line-height: $c-lineHeight

// ----- Block Content ----- //

// Paragraphs

p
  font-size: em($c-fontSize)

// ----- Inline Content ----- //

// Links

a
  color: $c--highlight-color
  text-decoration: none
  &:hover,
  &:focus
    text-decoration: underline

// Formatting

em
  font-style: italic
strong
  font-weight: bold

Clean up Core - Base

//-------------------------------------
//  Base
//-------------------------------------

html
  background: $l-background
  color: $c-color
  font-family: $c-fontFamily
  font-size: $c-fontSize
  line-height: $c-lineHeight

// ----- Block Content ----- //

p
  font-size: em($c-fontSize)

// ----- Inline Content ----- //

a
  color: $c--highlight-color
  text-decoration: none
  &:hover,
  &:focus
    text-decoration: underline


.footer
  width: 100%

.footer-buttons
  list-style: none
  background: $blue
  width: 100%
  border-radius: 0 0 5px 5px

  &__link
    border-right: 1px solid white
    display: inline-block
    padding: 1.5em 2em
    text-align: center
    width: 32%
    &:last-child
      border-right: none
.footer-button
  color: white
  cursor: pointer
  display: block
  height: 100%
  width: 100%
  &__text
    margin-top: 0.5em
  &__icon
    font-family: FontAwesome
    text-align: center
    font-size: $f-large
    font-weight: bold
  .fa-wikipedia-w
    background: white
    border-radius: 18px
    color: $blue
    display: inline-block
    font-size: $f-small
    height: 25px
    padding-top: 3px
    width: 25px

Remove the text decoration on footer links

.footer
  width: 100%

.footer-buttons
  list-style: none
  background: $blue
  width: 100%
  border-radius: 0 0 5px 5px

  &__link
    border-right: 1px solid white
    display: inline-block
    padding: 1.5em 2em
    text-align: center
    width: 32%
    &:last-child
      border-right: none
.footer-button
  color: white
  cursor: pointer
  display: block
  height: 100%
  width: 100%
  text-decoration: none
  &__text
    margin-top: 0.5em
  &__icon
    font-family: FontAwesome
    text-align: center
    font-size: $f-large
    font-weight: bold
  .fa-wikipedia-w
    background: white
    border-radius: 18px
    color: $blue
    display: inline-block
    font-size: $f-small
    height: 25px
    padding-top: 3px
    width: 25px


.grow
	-moz-osx-font-smoothing: grayscale
  backface-visibility: hidden
  transform: translateZ(0)
	transition: transform .2s ease-out
	&:hover,
	&:focus
		transform: scale(1.050)

	&:active
		transform: scale(.90)

.hover-opacity
	opacity: 1
	transition: opacity .2s ease-out
	&:hover,
	&:focus
		opacity: .700

.hover-underline
	&:hover
		text-decoration: underline

.pointer
	&:hover
		cursor: pointer

.overlay .overlay-object
	opacity: 0
	transition: opacity .2s ease-in
	&:hover,
	&:focus,
	&:active
		opacity: 1

Add class to animate background color

.grow
	-moz-osx-font-smoothing: grayscale
  backface-visibility: hidden
  transform: translateZ(0)
	transition: transform .2s ease-out
	&:hover,
	&:focus
		transform: scale(1.050)

	&:active
		transform: scale(.90)

.bg-animate
	&:hover,
	&:focus
		transition: background-color .2s ease

.hover-opacity
	opacity: 1
	transition: opacity .2s ease-out
	&:hover,
	&:focus
		opacity: .700

.hover-underline
	&:hover
		text-decoration: underline

.pointer
	&:hover
		cursor: pointer

.overlay .overlay-object
	opacity: 0
	transition: opacity .2s ease-in
	&:hover,
	&:focus,
	&:active
		opacity: 1


.detail-post-title
  color: $matcha-green
  font-size: 2em
  margin:
    top: $small-margin

.detail-post-topic-list
  color: darken($medium-gray, 30%)
  font-size: 1.2em
  line-height: 1.5em
  margin:
    bottom: 1.2em

.soundcloud-player-big
  margin:
    bottom: 48px

.article-detail
  h1
    font-size: 1.6em
    color: $light-gray
  a
    color: $matcha-green
    &:hover
      border-bottom: 1px solid $matcha-green
  ul
    margin:
      bottom: $medium-margin / 2
  li
    text-indent: -13px

.article-detail p, .article-detail li
  font-size: 1.1em
  line-height: 1.5em
  color: darken($medium-gray, 30%)

.detail-post-title, .article-detail h1, .article-detail li
  margin:
    bottom: $small-margin

Add media queries for post detail text

.detail-post-title
  +media(max-width 830px)
    font-size: 1.7em
  color: $matcha-green
  font-size: 2em
  margin:
    top: $small-margin

.detail-post-topic-list
  color: darken($medium-gray, 30%)
  +media(max-width 830px)
    font-size: 1.1em
  font-size: 1.2em
  line-height: 1.5em
  margin:
    bottom: 1.2em

.soundcloud-player-big
  margin:
    bottom: 48px

.article-detail
  h1
    font-size: 1.6em
    color: $light-gray
  a
    color: $matcha-green
    &:hover
      border-bottom: 1px solid $matcha-green
  ul
    margin:
      bottom: $medium-margin / 2
  li
    text-indent: -13px

.article-detail p, .article-detail li
  +media(max-width 830px)
    font-size: 1em
  font-size: 1.1em
  line-height: 1.5em
  color: darken($medium-gray, 30%)

.detail-post-title, .article-detail h1, .article-detail li
  margin:
    bottom: $small-margin

article.article-detail
  +media(max-width 830px)
    +shift(0.5)
    +span-columns(11)


header
  .navbar-inner
    padding: 0 1em !important

Fix navbar cause the text was in it.

header
  .navbar-inner
    padding: 0 1em !important

nav.navbar.navbar-inverse.navbar-fixed-top
  max-height: 4em


// Color
// ––––––––––––––––––––––––––––––––––––––––––––––––––

$color-initial: #ffffff
$color-primary: #9b4dca
$color-secondary: #606c76
$color-tertiary: #f4f5f6
$color-quaternary: #d1d1d1

Modify 3 character hexadecimal notation

// Color
// ––––––––––––––––––––––––––––––––––––––––––––––––––

$color-initial: #fff
$color-primary: #9b4dca
$color-secondary: #606c76
$color-tertiary: #f4f5f6
$color-quaternary: #d1d1d1


=terminal-font
  font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace

  font-size: 12px
  line-height: 16px

  .line
    span
      padding: 0
      display: inline-block
      height: 16px

=terminal-font-medium
  font-size: 18px
  line-height: 24px

  .line
    span
      height: 24px

=terminal-font-big
  font-size: 24px
  line-height: 32px

  .line
    span
      height: 32px

Remove Courier New from terminal/thumbnail font list

=terminal-font
  font-family: 'Bitstream Vera Sans Mono', monospace

  font-size: 12px
  line-height: 16px

  .line
    span
      padding: 0
      display: inline-block
      height: 16px

=terminal-font-medium
  font-size: 18px
  line-height: 24px

  .line
    span
      height: 24px

=terminal-font-big
  font-size: 24px
  line-height: 32px

  .line
    span
      height: 32px


/* Change navbar-top height to accomodate navbar-top-navigation
 *
 * We should use less
 */
.has-navbar-top .app-body
  padding-top: 86px
.navbar-absolute-top
  /* Change navbar-top height to accomodate navbar-top-navigation */
  min-height: 85px
  border-bottom-width: 0px
  &, .fa, a
    color: $navbar-top-color
  background-color: $navbar-top-background-color
  input[type="text"]
    background-color: $navbar-top-background-color
    width: 80%
    text-align: center
    padding: 0
    border: 0
    margin: -3px

/* Prevent mobile-angular-ui moving navbar-brand-center to left in desktop */
@media (min-width: 992px)
  .navbar-brand-center
    width: 100%
    position: absolute

.nav-title
  font-size: 1.4em
  font-family: 'Dax Wide Regular', sans-serif
  text-align: center

.navbar .fa
  font-size: 1.8em

.navbar-top-navigation
  position: absolute
  top: 50px
  text-align: center
  min-height: 30px
  a
    font-size: 1.1em
    padding-top: 5px
    padding-bottom: 5px
    text-transform: uppercase
    &.active
      font-weight: bold
      border-bottom: 4px solid $navbar-top-underscore

Fix display table in Firefox

/* Change navbar-top height to accomodate navbar-top-navigation
 *
 * We should use less
 */
.has-navbar-top .app-body
  padding-top: 86px
.navbar-absolute-top
  /* Change navbar-top height to accomodate navbar-top-navigation */
  min-height: 85px
  border-bottom-width: 0px
  &, .fa, a
    color: $navbar-top-color
  background-color: $navbar-top-background-color
  input[type="text"]
    background-color: $navbar-top-background-color
    width: 80%
    text-align: center
    padding: 0
    border: 0
    margin: -3px

/* Prevent mobile-angular-ui moving navbar-brand-center to left in desktop */
@media (min-width: 992px)
  .navbar-brand-center
    width: 100%
    position: absolute

.nav-title
  font-size: 1.4em
  font-family: 'Dax Wide Regular', sans-serif
  text-align: center

.navbar .fa
  font-size: 1.8em

.navbar-top-navigation
  position: absolute
  top: 50px
  text-align: center
  min-height: 30px
  .justified
    table-layout: fixed
  a
    font-size: 1.1em
    padding-top: 5px
    padding-bottom: 5px
    text-transform: uppercase
    &.active
      font-weight: bold
      border-bottom: 4px solid $navbar-top-underscore


.settings-section
  position: absolute
  top: 60px
  bottom: 0
  left: 0
  right: 0
  z-index: 4

.settings-card
  min-width: 350px
  position: absolute
  top: -10px
  right: 100px
  background: white

.settings-user-info
  +clearfix
  margin-bottom: 15px

.settings-user-avatar
  float: left
  width: 50px
  height: 50px
  border-radius: 50%
  overflow: hidden
  .material-icons
    font-size: 40px
    color: white
    background: #999
    padding: 5px

.settings-user-name
  float: left
  >span
    margin-left: 20px
    margin-top: 15px

.settings-value
  color: $color2

.settings-item
  margin-bottom: 6px
  +clearfix
  .st--chip-value
    will-change: trasform
    transition: transform 0.2s ease
    transform: translateX(0)
  &:hover
    .st--chip-value
      transform: translateX(-10px)
      transition: transform 0.2s ease

.st--chip
  position: relative
  display: block
  height: 32px
  border-radius: 16px
  line-height: 32px
  background: darken($color1, 5%)
  padding-left: 12px
  color: $color2

.st--chip-value
  position: absolute
  top: 0
  right: 35px
  min-width: 16px
  text-align: center
  background: $color8
  padding-left: 12px
  padding-right: 12px
  border-radius: 16px
  color: white
  font-size: 1.1rem

.st--chip-edit
  float: right
  display: inline-block
  color: $color8 !important
  font-size: 1.4rem
  height: 100%
  line-height: 32px
  border-radius: 16px
  min-width: 36px
  text-align: center
  &:hover
    background: darken($color1, 10%)
    cursor: pointer

Use mdl to style settings dialog

.settings-card
  position: absolute
  top: 50px
  right: 80px
  z-index: 100
  width: 320px
  .mdl-card__title
    min-height: 125px
    @extend .argyle-pattern

  .mdl-card__title-text
    color: $color1

  .mdl-card__supporting-text

.user-settings-line
  color: $color2

.user-settings
  padding-left: 10px
  width: 100%

.settings-item
  height: 35px
  line-height: 35px

.settings-value
  color: $color2


@import mixins
@import branding
@import "compass/css3/user-interface"

.cart
  @include user-select(none)
  .cart-span, .cart-span a
    display: inline-block
  .joyride-tip-guide
    display: block
    right: 10px
    top: 55px
    width: 400px

    .joyride-nub
      right: 22px !important
      left: auto

    li
      float: none
      .row .columns
        padding-left: 0.25rem
        padding-right: 0.25rem

    li.total-cart
      background-color: #424242
    li.product-cart
      border-top: 1px solid #424242

#cart-detail
  .cart-item-delete
    a.delete
      font-size: 1.125em

#edit-cart
  button, .button
    margin: 0

Fix checkout button layout in menu for firefox etc

@import mixins
@import branding
@import "compass/css3/user-interface"

.cart
  @include user-select(none)
  .cart-span, .cart-span a
    display: inline-block
  .cart-span
    float: left
  .joyride-tip-guide
    display: block
    right: 10px
    top: 55px
    width: 400px

    .joyride-nub
      right: 22px !important
      left: auto

    li
      float: none
      .row .columns
        padding-left: 0.25rem
        padding-right: 0.25rem

    li.total-cart
      background-color: #424242
    li.product-cart
      border-top: 1px solid #424242

#cart-detail
  .cart-item-delete
    a.delete
      font-size: 1.125em

#edit-cart
  button, .button
    margin: 0


@import branding
@import mixins

.fat-taxons
  @include csstrans
  display: inline-block
  line-height: 1
  margin-right: 0.5rem
  margin-bottom: 0.2rem
  text-transform: uppercase
  font-size: 1rem
  // border: 1px solid $disabled-bright
  padding: 0.25rem 0.5rem 0.25rem 0.35rem
  render-svg
    svg
      width: 16px
      height: 16px
      path
        fill: $dark-grey
  &, &*
    display: inline-block
    color: $dark-grey
  // &:hover, &.hover, &:active
    // background: rgba(255,255,255,0.5)

.summary-header
  @include csstrans
  render-svg
    svg
      width: 18px
      height: 18px
      path
        fill: $clr-brick

Add in styling for product modal version of taxons

@import branding
@import mixins

.fat-taxons
  @include csstrans
  display: inline-block
  line-height: 1
  margin-right: 0.5rem
  margin-bottom: 0.35rem
  text-transform: uppercase
  font-weight: 300
  font-size: 0.875rem
  background: rgba(255,255,255,0.5)
  color: #555
  @include border-radius(3px)
  padding: 0.25rem 0.5rem 0.35rem 0.35rem
  render-svg
    svg
      width: 16px
      height: 16px
      path
        fill: #555
  &, &*
    display: inline-block
    color: #555
  // &:hover, &.hover, &:active
    // background: rgba(255,255,255,0.5)

.product-header
  render-svg
    svg
      width: 32px
      height: 32px
      path
        fill: black
  @media all and (max-width: 640px)
    render-svg
      svg
        width: 24px
        height: 24px

.summary-header
  @include csstrans
  render-svg
    svg
      width: 18px
      height: 18px
      path
        fill: $clr-brick


$sprites-1x: sprite-map("1x/sprite-files/*.png", $layout: smart)
$sprites-2x: sprite-map("2x/sprite-files/*.png", $spacing: 5px)

@mixin sprite-1x
    background:
        image: sprite-url($sprites-1x)
        repeat: no-repeat

@mixin sprite-2x
    @include media($hidpi)
        background:
            image: sprite-url($sprites-2x)
            repeat: no-repeat

%sprite-1x
    @include sprite-1x

%sprite-2x
    @include sprite-2x

@mixin sprite($name, $use-mixin: false)
    @if $use-mixin
        @include sprite-1x
        @include sprite-2x
    @else
        @extend %sprite-1x
        @extend %sprite-2x
    width: image-width(sprite-file($sprites-1x, $name))
    height: image-height(sprite-file($sprites-1x, $name))
    background:
        position: sprite-position($sprites-1x, $name)
    @include media($hidpi)
        $position: sprite-position($sprites-2x, $name)
        background:
            position: round(nth($position, 1) / 2) round(nth($position, 2) / 2)
        @include background-size(round(image-width(sprite-path($sprites-2x)) / 2) auto)

Revert "Round 2x sprite values instead of ceiling them."

$sprites-1x: sprite-map("1x/sprite-files/*.png", $layout: smart)
$sprites-2x: sprite-map("2x/sprite-files/*.png", $spacing: 5px)

@mixin sprite-1x
    background:
        image: sprite-url($sprites-1x)
        repeat: no-repeat

@mixin sprite-2x
    @include media($hidpi)
        background:
            image: sprite-url($sprites-2x)
            repeat: no-repeat

%sprite-1x
    @include sprite-1x

%sprite-2x
    @include sprite-2x

@mixin sprite($name, $use-mixin: false)
    @if $use-mixin
        @include sprite-1x
        @include sprite-2x
    @else
        @extend %sprite-1x
        @extend %sprite-2x
    width: image-width(sprite-file($sprites-1x, $name))
    height: image-height(sprite-file($sprites-1x, $name))
    background:
        position: sprite-position($sprites-1x, $name)
    @include media($hidpi)
        $position: sprite-position($sprites-2x, $name)
        background:
            position: ceil(nth($position, 1) / 2) ceil(nth($position, 2) / 2)
        @include background-size(ceil(image-width(sprite-path($sprites-2x)) / 2) auto)


:--component
  display: flex
  position: fixed
  left: 15px
  top:  15px
  border: 0
  padding: 0
  margin: 0
  background-color: transparent
  z-index: 3
  cursor: pointer
  height: 23px

  &.side-nav-toggler--crossed .toggle-icon
    background-color: transparent

    &::before
      transform: rotate(-45deg)
      background-color: mui-color('white')

    &::after
      transform: rotate(45deg) translate(1px, 1px)
      background-color: mui-color('white')

.toggle-icon, .toggle-icon::before, .toggle-icon::after
  display: flex
  width: 32px
  height: 3px
  background-color: mui-color('black')
  transition: all .2s ease

.toggle-icon
  position: relative

  &::before,
  &::after
    content: ''
    position: absolute
    left: 0
    transform-origin: 3px center

  &::before
    top: 10px

  &::after
    top: -10px

Remove outline from nav toggler

:--component
  display: flex
  position: fixed
  left: 15px
  top:  15px
  border: 0
  padding: 0
  margin: 0
  background-color: transparent
  z-index: 3
  cursor: pointer
  height: 23px
  outline: none

  &.side-nav-toggler--crossed .toggle-icon
    background-color: transparent

    &::before
      transform: rotate(-45deg)
      background-color: mui-color('white')

    &::after
      transform: rotate(45deg) translate(1px, 1px)
      background-color: mui-color('white')

.toggle-icon, .toggle-icon::before, .toggle-icon::after
  display: flex
  width: 32px
  height: 3px
  background-color: mui-color('black')
  transition: all .2s ease

.toggle-icon
  position: relative

  &::before,
  &::after
    content: ''
    position: absolute
    left: 0
    transform-origin: 3px center

  &::before
    top: 10px

  &::after
    top: -10px


@import "active_admin/mixins"

.active_admin
  .activeadmin-translations
    margin-bottom: 20px

    .dropdown_menu
      display: inline-block
      padding: 16px
      +border-top-radius(4px)
      background-color: #f4f4f4

    fieldset ol > li.fallback
      font-size: 1.0em
      font-weight: bold
      color: #5e6469

    ul > li > a.error
      @include gradient(#cc1f27, #db4249)
      @include text-shadow(#5a83aa)
      color: #FFF

    ul > li > a.untranslated
      @include gradient(#b3b3b3, #cccccc)

    ul > li > a.fallback
      background-color: #F2F2F2

    ul > li > a.active
      @include highlight-gradient
      @include text-shadow(#5a83aa)
      color: #FFF

    &> fieldset.inputs
      margin-bottom: 0

      ol
        padding-left: 0
        width: 100%

      li.hidden
        padding: 0 !important

Improve highlighting of fallbacks etc

@import "active_admin/mixins"

.active_admin
  .activeadmin-translations
    margin-bottom: 20px

    .dropdown_menu
      display: inline-block
      padding: 16px
      +border-top-radius(4px)
      background-color: #f4f4f4

    fieldset ol > li.fallback
      font-size: 1.0em
      font-weight: bold
      color: #5e6469

    ul > li
      @include gradient(#6EC148, #FFF)

    ul > li > a.error
      @include gradient(#cc1f27, #db4249)
      @include text-shadow(#5a83aa)
      color: #FFF

    ul > li > a.untranslated
      @include gradient(#FF0000, #FFF)
      color: #FFF

    ul > li > a.fallback
      background-color: #F2F2F2

    ul > li > a.active
      @include highlight-gradient
      @include text-shadow(#5a83aa)
      color: #FFF

    &> fieldset.inputs
      margin-bottom: 0

      ol
        padding-left: 0
        width: 100%

      li.hidden
        padding: 0 !important


@import ../../styles/lib

.Authentication
  display: flex
  min-width: 100vw
  min-height: 100vh
  background-color: transparent
  color: white

.AuthenticationFormDialog
  width: rem(300)
  margin: 0 auto

.Authentication h1
  margin-bottom: rem(20)
  padding-top: rem(40)
  font-size: rem(24)
  line-height: 1
  white-space: nowrap

.Authentication h1 > .Emoji
  margin-right: rem(10)

.AuthenticationForm
  max-width: rem(320)

.AuthenticationFormDialog > p
  +monospace
  margin-top: rem(20)
  color: #aaa

.AuthenticationError.accessDenied
  padding-top: rem(12)
  color: red

.AuthenticationFormDialog a:focus,
.AuthenticationFormDialog a:active,
.no-touch .AuthenticationFormDialog a:hover
  color: white

.ForgotPasswordLink
  +sans-typeset
  margin-top: rem(15)
  color: #aaa

@media(min-width: #{em(350)})
  .AuthenticationFormDialog
    width: rem(320)

@media(min-width: #{$break-2})
  .AuthenticationFormDialog
    margin: auto
  .Authentication h1
    padding-top: 0
    margin-bottom: rem(70)

Increase the padding on authentication headers

@import ../../styles/lib

.Authentication
  display: flex
  min-width: 100vw
  min-height: 100vh
  background-color: transparent
  color: white

.AuthenticationFormDialog
  width: rem(300)
  margin: 0 auto

.Authentication h1
  margin-bottom: rem(20)
  padding-top: rem(100)
  font-size: rem(24)
  line-height: 1
  white-space: nowrap

.Authentication h1 > .Emoji
  margin-right: rem(10)

.AuthenticationForm
  max-width: rem(320)

.AuthenticationFormDialog > p
  +monospace
  margin-top: rem(20)
  color: #aaa

.AuthenticationError.accessDenied
  padding-top: rem(12)
  color: red

.AuthenticationFormDialog a:focus,
.AuthenticationFormDialog a:active,
.no-touch .AuthenticationFormDialog a:hover
  color: white

.ForgotPasswordLink
  +sans-typeset
  margin-top: rem(15)
  color: #aaa

@media(min-width: #{em(350)})
  .AuthenticationFormDialog
    width: rem(320)

@media(min-width: #{$break-2})
  .AuthenticationFormDialog
    margin: auto
  .Authentication h1
    padding-top: 0
    margin-bottom: rem(70)


@import base
@import modules/header
@import modules/footer
@import modules/article
@import modules/home
@import modules/404

body
  background: $site_bg
  max-width: $max_width
  margin: auto
  font-family: "Cabin", sans-serif

em
  font-style: italic

strong
  font-weight: bold

a
  color: $link_color
  text-decoration: none
  &:hover, &:focus
    text-decoration: underline

.wrap
  +clearfix
  margin: 1em 0

h1, h2, h3, h4, h5, h6
  font-family: "Linux Libertine"
  text-align: center

section
  h1, p
    text-align: center

  h1
    font-size: 2em
    font-family: "Linux Libertine"

  p
    margin: 1em 0

Add padding the bottom of paragraphs.

@import base
@import modules/header
@import modules/footer
@import modules/article
@import modules/home
@import modules/404

body
  background: $site_bg
  max-width: $max_width
  margin: auto
  font-family: "Cabin", sans-serif

em
  font-style: italic

strong
  font-weight: bold

a
  color: $link_color
  text-decoration: none
  &:hover, &:focus
    text-decoration: underline

.wrap
  +clearfix
  margin: 1em 0

h1, h2, h3, h4, h5, h6
  font-family: "Linux Libertine"
  text-align: center

section
  h1, p
    text-align: center

  h1
    font-size: 2em
    font-family: "Linux Libertine"

  p
    margin: 1em 0
    padding: 0 0 0.5em


@media print
  *
    background: transparent !important
    box-shadow: none !important
    color: #000 !important
    text-shadow: none !important

  a, a:visited
    text-decoration: underline

  a[href]:after
    content: " (" attr(href) ")"

  abbr[title]:after
    content: " (" attr(title) ")"

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after
    content: ""

  pre, blockquote
    page-break-inside: avoid

  thead
    display: table-header-group

  tr, img
    page-break-inside: avoid

  img
    max-width: 100% !important

  @page
    margin: 0.5cm

  p, h2, h3
    orphans: 3
    widows: 3

  h2, h3
    page-break-after: avoid

Add a few selectors to the print css file

@media print
  *
    background: transparent !important
    box-shadow: none !important
    color: #000 !important
    text-shadow: none !important

  a, a:visited
    text-decoration: underline

  a[href]:after
    content: " (" attr(href) ")"

  abbr[title]:after
    content: " (" attr(title) ")"

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after
    content: ""

  pre, blockquote
    page-break-inside: avoid

  thead
    display: table-header-group

  tr, img
    page-break-inside: avoid

  img
    max-width: 100% !important

  @page
    margin: 0.5cm

  p, h2, h3
    orphans: 3
    widows: 3

  h2, h3
    page-break-after: avoid

  .no-print,
  .upgrade-notifications
    display: none !important


.press-page
  h1
    font-size: 32px
    font-weight: bold
    margin: 70px 0
  h2
    font-size: 18px
    color: #FFB74D
  h5
    color: #AAA
    font-size: 10px
  h3
    color: black
    font-size: 20px
    margin: 5px 15px 15px 0
    font-weight: bold
  p
    font-size: 12px
    color: #AAA
    margin-right: 15px
  li
    width: 49%
    margin-bottom: 20px
    display: inline-block

Fix the presses page alignment

.press-page
  h1
    font-size: 32px
    font-weight: bold
    margin: 70px 0
  h2
    font-size: 18px
    color: #FFB74D
  h5
    color: #AAA
    font-size: 10px
  h3
    color: black
    font-size: 20px
    margin: 5px 15px 15px 0
    font-weight: bold
  p
    font-size: 12px
    color: #AAA
    margin-right: 15px
  li
    width: 49%
    margin-bottom: 20px
    display: inline-block
    vertical-align: top


$shadow-color: transparentize($black, .5)

@import './tag'

#work-wrapper
  color: $light-text-primary
  height: 100vh
  width: 100vw
  position: fixed
  top: 0
  left: 0
  z-index: 2
  pointer-events: none
  will-change: contents

  *
    pointer-events: all

#work-wrapper,
.laptops-container .laptop3d[data-laptop3d-hash='work']
  .background
    height: 100%
    width: 100%
    background: linear-gradient(to bottom right, $gradient-a 15%, $gradient-b 85%)

    position: fixed
    left: 0
    top: 0

    z-index: 100

    will-change: transform, top, left

.tags
  position: absolute
  z-index: 101
  width: 60vw
  left: 50%
  top: 12.5%
  transform: translateX(-50%)
  transform-origin: top center

  display: flex
  flex-wrap: wrap
  justify-content: center

  .tag
    margin: .4em .5em

Move .projects-container to visible position

$shadow-color: transparentize($black, .5)

@import './tag'

#work-wrapper
  color: $light-text-primary
  height: 100vh
  width: 100vw
  position: fixed
  top: 0
  left: 0
  z-index: 2
  pointer-events: none
  will-change: contents

  *
    pointer-events: all

#work-wrapper,
.laptops-container .laptop3d[data-laptop3d-hash='work']
  .background
    height: 100%
    width: 100%
    background: linear-gradient(to bottom right, $gradient-a 15%, $gradient-b 85%)

    position: fixed
    left: 0
    top: 0

    z-index: 100

    will-change: transform, top, left

.tags
  position: absolute
  z-index: 102
  width: 60vw
  left: 50%
  top: 12.5%
  transform: translateX(-50%)
  transform-origin: top center

  display: flex
  flex-wrap: wrap
  justify-content: center

  .tag
    margin: .4em .5em

.projects-container
  position: absolute
  z-index: 101
  top: 50vh
  left: 0
  width: 100vw


// Media print specific styles ****

// Navigation elements
.navbar,
.sidebar,
.pagination,
.search-form,
.footer
  display: none

// Sidebar fix
.row-fluid
  width: 120%
.row-fluid .row-fluid
  width: 100%

// Content
.container-fluid .content
  margin-right: 20px

// Alerts
.alert
  display: none

// Actions
.contextual,
.action-links,
.btn
  display: none

// Elements
a
  color: #484848

input,
textarea,
select
  border: 0px none
  box-shadow: none

.ui-widget-content
  border: none

Hide all tab headers in print styling but the active one. Style that one like H2.

// Media print specific styles ****

// Navigation elements
.navbar,
.sidebar,
.pagination,
.search-form,
.footer
  display: none

// Sidebar fix
.row-fluid
  width: 120%
.row-fluid .row-fluid
  width: 100%

// Content
.container-fluid .content
  margin-right: 20px

// Alerts
.alert
  display: none

// Actions
.contextual,
.action-links,
.btn
  display: none

// Tabs
ul.nav.nav-tabs
  border-bottom: none

ul.nav.nav-tabs li
  display: none

  &.active
    display:     block

  a
    border:      none
    outline:     none
    font-size:   24px
    line-height: 36px
    color:       #333
    font-weight: bold
    margin:      0
    padding:     0

// Elements
a
  color: #484848

input,
textarea,
select
  border: 0px none
  box-shadow: none

.ui-widget-content
  border: none


@import base

.create_form
  display: none
  background-color: #EDEDED !important
  form
    padding: 20px 0
    .field
      padding: 5px 0
      label
        width:		 		120px
        margin-right: 5px
        text-align: 	right
        display: 			inline-block
      input[type=text]
        width: 		220px
        padding: 	3px 2px

    .submit
      padding: 10px 0 10px 100px

    .field_error
      color:  red
      font-size: 11px
      display: inline-block
      margin-left: 5px
      max-width: 85px

Set create dialog overflow-y as auto

@import base

.create_form
  display: none
  background-color: #EDEDED !important
  overflow-y: auto !important
  form
    padding: 20px 0
    .field
      padding: 5px 0
      label
        width:		 		120px
        margin-right: 5px
        text-align: 	right
        display: 			inline-block
      input[type=text]
        width: 		220px
        padding: 	3px 2px

    .submit
      padding: 10px 0 10px 100px

    .field_error
      color:  red
      font-size: 11px
      display: inline-block
      margin-left: 5px
      max-width: 85px


.nav-horizontal
  text-align: left
  padding: 0
  margin: 0
  li
    margin: 0 20px 0 0

.nav-horizontal-right
  text-align: right
  padding: 0.25em 0
  ul
    margin: .5em 0 0
  li
    margin: 0 0 0 20px

.nav-item
  display: inline-block
  a
    font-size: .9em

.user-menu
  border-left: 1px solid #E9E9EC
  display: block
  height: 40px
  padding: 0 15px 0 20px
  margin: 5px 0
  background: url("/assets/catarse_bootstrap/catarse-assets.png") repeat scroll -38px -67px transparent
  transition: 0.4s all
  &:hover
    opacity: 0.5

.user-avatar
  +border-radius(20px)

.separator
  border-right: 1px solid $border-gray
  padding: 0 20px 0 0

Fix locale pipe on header menu.

.nav-horizontal
  text-align: left
  padding: 0
  margin: 0
  li
    margin: 0 20px 0 0

.nav-horizontal-right
  text-align: right
  padding: 0.25em 0
  ul
    margin: .5em 0 0
  li
    margin: 0 0 0 20px

.nav-item
  display: inline-block
  a
    font-size: .9em

.user-menu
  border-left: 1px solid #E9E9EC
  display: block
  height: 40px
  padding: 0 15px 0 20px
  margin: 5px 0
  background: url("/assets/catarse_bootstrap/catarse-assets.png") repeat scroll -38px -67px transparent
  transition: 0.4s all
  &:hover
    opacity: 0.5

.user-avatar
  +border-radius(20px)

.separator
  border-right: 1px solid $border-gray
  padding: 0 20px 0 0
  &:after
    content: " "


.pagination-link
  +shift(2)
  background-color: white
  border: 1px solid $light-gray
  border-radius: 2px
  max-width:  16.2em
  padding:
    top: .5em
    bottom: .5em
  margin:
    bottom: ($medium-margin - .18em)
    top: -.35em
  &:first-of-type
    float: left
  a
    padding:
      top: .5em
      bottom: .5em
      left: .8em
      right: .8em
    color: darken($medium-gray, 30%)
    font-size: 1.1em
    box-shadow: 0px 3px 0px rgba(#F6F6F6, .5)

Adjust border of pagination button

.pagination-link
  +shift(2)
  background-color: white
  border: 1px solid #E5E5E5
  border-radius: 2px
  max-width:  16.2em
  padding:
    top: .5em
    bottom: .5em
  margin:
    bottom: ($medium-margin - .18em)
    top: -.35em
  &:first-of-type
    float: left
  a
    padding:
      top: .5em
      bottom: .5em
      left: .8em
      right: .8em
    color: darken($medium-gray, 30%)
    font-size: 1.1em
    box-shadow: 0px 3px 0px rgba(#F6F6F6, .5)


#board
  th:not(:first-child) // Column headers
    width: 8em
    font-weight: normal
    &::first-letter
      font-size: 4em

  tr:not(.new-project-row)
    background: white
    height: 100px

  .project
    th // Row headers
      font-size: 1.2em
      font-weight: bold
      text-align: left
      padding: 0 2em
      vertical-align: middle
      color: $flat-green

      .delete-project
        float: right
        cursor: pointer
        color: transparent
        transition: color ease-out 0.7s
      &:hover .delete-project
        color: rgba($flat-red, 0.4)

  tr.new-project-row
    border-style: hidden
    border-top-style: inherit

  .cell:hover
    background-color: $flat-gray-light

#share-url
  background-color: white

Add a color highlight when hovering the delete project button

#board
  th:not(:first-child) // Column headers
    width: 8em
    font-weight: normal
    &::first-letter
      font-size: 4em

  tr:not(.new-project-row)
    background: white
    height: 100px

  .project
    th // Row headers
      font-size: 1.2em
      font-weight: bold
      text-align: left
      padding: 0 2em
      vertical-align: middle
      color: $flat-green

      .delete-project
        float: right
        cursor: pointer
        color: transparent
        transition: color ease-out 0.7s
      &:hover
        .delete-project
          color: rgba($flat-red, 0.4)
          &:hover
            color: $flat-red

  tr.new-project-row
    border-style: hidden
    border-top-style: inherit

  .cell:hover
    background-color: $flat-gray-light

#share-url
  background-color: white


@import "_init.sass"

pre
    background-color: #000
    word-wrap: break-word
    margin: 0px
    padding: 10px
    color: #fff
    font-size: 14px
    margin-bottom: 20px

pre, code
    font-family: 'Monaco', courier, monospace

Add Menlo as default fallback font before courier

@import "_init.sass"

pre
    background-color: #000
    word-wrap: break-word
    margin: 0px
    padding: 10px
    color: #fff
    font-size: 14px
    margin-bottom: 20px

pre, code
    font-family: 'Monaco', 'Menlo', courier, monospace


// Section

$margin-narrow-top    : 150px
$margin-wide-top      : 200px

$margin-narrow-bottom : 250px
$margin-wide-bottom   : 300px

// Wrapper

$margin-narrow        : 100px
$margin-wide          : 150px

$padding-narrow       : 100px
$padding-wide         : 50px

$width-narrow         : 600px
$width-wide           : 900px

Remove extra global margins / paddings and change variables names

// Section

$section-margin-top    : 150px
$section-margin-bottom : 250px

// Wrapper

$wrapper-margin        : 200px
$wrapper-padding       : 100px
$wrapper-width-narrow  : 600px
$wrapper-width-wide    : 900px


.darkswarm
  products
    product
      .taxon-flag
        background: transparent url("/assets/flag.svg") top center no-repeat
        background-size: 34px 39px
        min-height: 40px
        width: 34px
        margin-top: -1.1rem
        padding-top: 0.25rem
        z-index: 999999

        @media all and (max-width: 768px)
          margin-top: -0.85rem

        render-svg
          svg
            width: 24px
            height: 24px
            path
              fill: #999

Make taxon flag smaller for smallest device breakpoint

.darkswarm
  products
    product
      .taxon-flag
        background: transparent url("/assets/flag.svg") top center no-repeat
        background-size: 34px 39px
        min-height: 40px
        width: 34px
        margin-top: -1.1rem
        padding-top: 0.25rem
        z-index: 999999
        @media all and (max-width: 480px)
          background-size: 28px 32px
          min-height: 32px
          width: 28px

        render-svg
          svg
            width: 24px
            height: 24px
            path
              fill: #999

        @media all and (max-width: 768px)
          margin-top: -0.85rem

        @media all and (max-width: 480px)
          render-svg
            svg
              width: 18px
              height: 18px


@import "twitter/bootstrap/responsive"

.nav a
  font-size: 14px !important

Disable scrolling in modal windows because of autocomplete lists cut off before.

@import "twitter/bootstrap/responsive"

.nav a
  font-size: 14px !important

.modal-body
  overflow-y: visible !important


@function font-family ($name: $baseFont) {
  @return '#{$name}', 'Arial', sans-serif
}

Fix SASS diff to SCSS

@function font-family($name: $base-font)
  @return '#{$name}', 'Arial', sans-serif


dialog, .reveal-modal
  position: fixed
  margin-left: -48%
  top: 0px !important
  transition: top .25s ease
  width: 96%

  &.open
    top: 100px !important

dialog .close-reveal-modal, .reveal-modal .close-reveal-modal
  right: 7px
  top: -5px

h1
  font-size: 1.6rem
  font-weight: normal
  margin-bottom: 10px

Fix reveal modal top position

dialog, .reveal-modal
  position: fixed
  margin-left: -48%
  top: 0px !important
  transition: top .25s ease
  width: 96%

  &.open
    top: 60px !important

dialog .close-reveal-modal, .reveal-modal .close-reveal-modal
  right: 7px
  top: -5px

h1
  font-size: 1.6rem
  font-weight: normal
  margin-bottom: 10px


@import "colors"

.axis
  shape-rendering: crispEdges

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

.site
  rect, path
    stroke: #555

rect, path
  .phosphorylation &
    fill: rgb(67, 162, 202)

  .acetylation &
    fill: rgb(186, 228, 188)

  .ubiquitination &
    fill: rgb(123, 204, 196)

  .methylation &
    fill: rgb(240, 249, 232)

  .glycosylation &
    fill: $glycosylation

  .multi_ptm &
    fill: rgb(8, 104, 172)

text
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

  &.label
    font-weight: bold

Add fill colors for glycosylation subtypes

@import "colors"

.axis
  shape-rendering: crispEdges

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

.site
  rect, path
    stroke: #555

rect, path
  .phosphorylation &
    fill: rgb(67, 162, 202)

  .acetylation &
    fill: rgb(186, 228, 188)

  .ubiquitination &
    fill: rgb(123, 204, 196)

  .methylation &
    fill: rgb(240, 249, 232)

  .glycosylation &
    fill: $glycosylation

  .N-glycosylation &
    fill: $glycosylation

  .S-glycosylation &
    fill: $glycosylation

  .C-glycosylation &
    fill: $glycosylation

  .O-glycosylation &
    fill: $glycosylation

  .multi_ptm &
    fill: rgb(8, 104, 172)

text
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif

  &.label
    font-weight: bold


.gem-list__form
  padding: 1em 0 2em

.gem-list-item
  padding-bottom: 2em
  display: flex

  &:before
    margin-bottom: 1em

  & + &:before
    content: ""
    display: block
    height: 1px
    background: $content-border-color
    margin-bottom: 1em

.gem-name
  font: inherit
  font-size: 2em
  color: $default-link-color

.gem-code
  display: block
  padding-top: 0.25em
  line-height: 1.1

.latest-version
  padding-top: 1rem

.install-gem
  align-self: center
  font-size: 16px

  .glyphicon
    font-size: 12px

Fix styling for divider line

.gem-list__form
  padding: 1em 0 2em

.gem-list-item
  padding: 1em 0
  display: flex

  & + &
    border-top: 1px solid $content-border-color

.gem-name
  font: inherit
  font-size: 2em
  color: $default-link-color

.gem-code
  display: block
  padding-top: 0.25em
  line-height: 1.1

.latest-version
  padding-top: 1rem

.install-gem
  align-self: center
  font-size: 16px

  .glyphicon
    font-size: 12px


.container
  display: flex
  flex-direction: row
  flex-wrap: wrap
  .card-box
    margin: 5px

Change card positions to center.

.container
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: center
  justify-content: center
  .card-box
    margin: 5px


.alert-box
  @extend .radius
  padding: +emCalc(10px)
  background: $alert-success-color
  &.success, &.notice
    background: $alert-success-color
  &.error, &.warning
    background: $alert-color
  h1, h2, h3, h4, h5, h6
    color: white
  p
    color: darken(white, 10%)
.flash
  .alert-box
    +radius(0)

#devise
  .flash
    .alert-box
      margin-top: 0

Fix flash message z-index bug

.alert-box
  @extend .radius
  padding: +emCalc(10px)
  background: $alert-success-color
  &.success, &.notice
    background: $alert-success-color
  &.error, &.warning
    background: $alert-color
  h1, h2, h3, h4, h5, h6
    color: white
  p
    color: darken(white, 10%)
.flash
  position: relative
  z-index: 10
  .alert-box
    +radius(0)

#devise
  .flash
    .alert-box
      margin-top: 0


+block(confirmation)

  +element(dialog)
    width: 300px
    margin: 0
    position: absolute

  +element(body)
    padding: 16px
    text-align: center

  +element(message)

  +element(buttons)
    text-align: center

  +element(button)
    margin: 5px
    min-width: 120px

Fix for confirmation dialog styling per UXD


.content
    &-section
        &-grayblue
            background-color: $grayblue
            color: $light-gray
        &-orange
            background-color: $orange
        &-fullheight
            min-height: 80vh
            display: flex
            align-items: center

Extend height of fullheight section

.content
    &-section
        &-grayblue
            background-color: $grayblue
            color: $light-gray
        &-orange
            background-color: $orange
        &-fullheight
            min-height: 90vh
            display: flex
            align-items: center


@import "../colors"

.scroll-to-top
  color: $white
  position: fixed
  bottom: 25px
  right: 25px
  opacity: 0
  transition: all .2s ease-in-out

.show-scroll
  opacity: 1
  transition: all .2s ease-in-out

  i
    color: $primary
    font-size: 40px
    cursor: pointer
    opacity: .3
    text-shadow: 1px 2px 3px $blue-grey-900

    &:hover,
    &:active
      opacity: .9

Change scroll to top css

@import "../colors"

.scroll-to-top
  color: $white
  position: fixed
  bottom: 25px
  right: 25px
  opacity: 0
  transition: all .2s ease-in-out

.show-scroll
  opacity: 1
  transition: all .2s ease-in-out
  color: $primary
  font-size: 40px
  cursor: pointer
  opacity: .3
  text-shadow: 1px 2px 3px $blue-grey-900

  &:hover,
  &:active
    opacity: .9


.board
    width: 100vw
    margin-top: 50px

.view
    +columns(7, $container-width: 1500px, $margin: 20px 10px)
// .view

Add sass media queries to board

.board
    width: 100vw
    margin-top: 50px

.boardview
    +columns(2, $container-width: 90%, $margin: 10px)
    +breakpoint(from-phablet)
        +columns(3, $container-width: 90%, $margin: 20px 10px)
    +breakpoint(from-tablet)
        +columns(4, $container-width: 90%, $margin: 20px 10px)
    +breakpoint(from-desktop)
        +columns(5, $container-width: 90%, $margin: 20px 10px)
    +breakpoint(from-desktop-mid)
        +columns(6, $container-width: 90%, $margin: 20px 10px)
    +breakpoint(from-desktop-lrg)
        +columns(8, $container-width: 85%, $margin: 20px 10px)


@import "../../../variables"

.top-nav
  +flex(space-between)
  +transition(all .5s ease-out)
  +opacity(0)
  position: fixed
  top: 0
  left: 0
  right: 0
  background-color: $borders-bg
  box-shadow: 0 2px 2px 0 $borders-bs-1, 0 0 0 1px $borders-bs-2
  width: 100%
  height: 60px
  z-index: z('bg')

  a
    +transition(all .25s ease-out)
    color: $borders
    text-decoration: none

    &:hover,
    &:active
      color: $borders-hv

  .top-nav-title
    padding-left: 60px

    a
      display: inline-block
      background: url("/assets/img/logo.png") center center / contain no-repeat
      width: 68px
      height: 30px

  .top-nav-menu
    a
      display: inline-block
      color: $borders-menu
      padding: 3px 10px

      &.active
        color: $borders-menu-hv

  .top-nav-social
    padding-right: 60px

    a
      margin-left: 15px

  &.show
    +opacity(1)

Edit top nav color variables

@import "../../../variables"

.top-nav
  +flex(space-between)
  +opacity(0)
  +transition(all .5s ease-out)
  position: fixed
  top: 0
  left: 0
  right: 0
  background-color: $top-nav-bg
  box-shadow: 0 2px 2px 0 $top-nav-bs-1, 0 0 0 1px $top-nav-bs-2
  width: 100%
  height: 60px
  z-index: z('bg')

  a
    +transition(all .25s ease-out)
    color: $top-nav
    text-decoration: none

    &:hover,
    &:active
      color: $top-nav-hv

  .top-nav-title
    padding-left: 60px

    a
      display: inline-block
      background: url("/assets/img/logo.png") center center / contain no-repeat
      width: 68px
      height: 30px

  .top-nav-menu
    a
      display: inline-block
      color: $top-nav-menu
      padding: 3px 10px

      &.active
        color: $top-nav-menu-hv

  .top-nav-social
    padding-right: 60px

    a
      margin-left: 15px

  &.show
    +opacity(1)


// Library
@import normalize
@import foundation/foundation_and_overrides
@import foundation/components/grid
@import font-awesome

// Globals
@import globals/mixins
@import globals/settings

// Plugins
@import custom_plugins/maintenance

Fix old inclusion of Foundation file

// Library
@import normalize
@import foundation/foundation_and_overrides
@import font-awesome

// Globals
@import globals/mixins
@import globals/settings

// Plugins
@import custom_plugins/maintenance


@import '~sass/utils'

.Searchbar
    height: 100%
    width: 100%
    transition: opacity .3s ease
    display: inline-block
    border: none
    line-height: inherit
    background: inherit
    color: inherit
    border-radius: inherit
    text-align: inherit
    padding-left: 16px

    &:focus::-webkit-input-placeholder
        transition: opacity 0.5s ease
        opacity: 0

/*
    .Icon
        line-height: inherit
        display: inline-block
        padding: 6px 16px

        &.search
            color: inherit

        &.close
            position: absolute
            right: 0
            color: #d55250

    font-family: font-for(Searchbar)
    line-height: 100%
    display: flex
    align-items: center
 */

Add backface visibility to SearchBar

@import '~sass/utils'

.Searchbar
    height: 100%
    width: 100%
    transition: opacity .3s ease
    display: inline-block
    border: none
    line-height: inherit
    background: inherit
    color: inherit
    border-radius: inherit
    text-align: inherit
    padding-left: 16px
    backface-visibility: hidden

    &:focus::-webkit-input-placeholder
        transition: opacity 0.5s ease
        opacity: 0

/*
    .Icon
        line-height: inherit
        display: inline-block
        padding: 6px 16px

        &.search
            color: inherit

        &.close
            position: absolute
            right: 0
            color: #d55250

    font-family: font-for(Searchbar)
    line-height: 100%
    display: flex
    align-items: center
 */


.bio
  background-color: $bio-bg-color
  color: $secondary
  padding-top: px-to-rem(32)

.bio-icon
  font-size: px-to-rem($bio-icon-size)

.bio-img
  border-radius: $bio-avatar-radius
  display: block
  margin: auto
  max-width: 100%

.bio-text
  font-size: px-to-rem($bio-font-size)
  text-align: $bio-text-alignment

  @include respond-to(large)
    font-size: px-to-rem($bio-font-size + 10)

Adjust of the bio text

.bio
  background-color: $bio-bg-color
  color: $secondary
  padding-top: px-to-rem(32)

.bio-icon
  font-size: px-to-rem($bio-icon-size)

.bio-img
  border-radius: $bio-avatar-radius
  display: block
  margin: auto
  max-width: 100%

.bio-text
  font-size: px-to-rem($bio-font-size)
  text-align: $bio-text-alignment

  @include respond-to(large)
    font-size: px-to-rem($bio-font-size + 9)


// Make sure the charset is set appropriately
@charset "UTF-8"

// This includes all of the foundation global elements that are needed to work with any of the other files.
@import foundation/variables

// Foundation Components
@import foundation/components/global
@import foundation/components/grid
@import foundation/components/visibility
@import foundation/components/block-grid
@import foundation/components/type
@import foundation/components/buttons
@import foundation/components/forms
//@import foundation/components/button-groups
@import foundation/components/dropdown-buttons
//@import foundation/components/split-buttons
//@import foundation/components/flex-video
//@import foundation/components/section
@import foundation/components/top-bar
//@import foundation/components/orbit
@import foundation/components/reveal
//@import foundation/components/joyride
@import foundation/components/clearing
@import foundation/components/alert-boxes
//@import foundation/components/breadcrumbs
//@import foundation/components/custom-forms
//@import foundation/components/keystrokes
//@import foundation/components/labels
//@import foundation/components/inline-lists
//@import foundation/components/pagination
@import foundation/components/panels
//@import foundation/components/pricing-tables
//@import foundation/components/progress-bars
//@import foundation/components/side-nav
//@import foundation/components/sub-nav
//@import foundation/components/switch
//@import foundation/components/magellan
@import foundation/components/tables
//@import foundation/components/thumbs
//@import foundation/components/tooltips
@import foundation/components/dropdown

Add custon forms from foundation

// Make sure the charset is set appropriately
@charset "UTF-8"

// This includes all of the foundation global elements that are needed to work with any of the other files.
@import foundation/variables

// Foundation Components
@import foundation/components/global
@import foundation/components/grid
@import foundation/components/visibility
@import foundation/components/block-grid
@import foundation/components/type
@import foundation/components/buttons
@import foundation/components/forms
//@import foundation/components/button-groups
@import foundation/components/dropdown-buttons
//@import foundation/components/split-buttons
//@import foundation/components/flex-video
//@import foundation/components/section
@import foundation/components/top-bar
//@import foundation/components/orbit
@import foundation/components/reveal
//@import foundation/components/joyride
@import foundation/components/clearing
@import foundation/components/alert-boxes
//@import foundation/components/breadcrumbs
@import foundation/components/custom-forms
//@import foundation/components/keystrokes
//@import foundation/components/labels
//@import foundation/components/inline-lists
//@import foundation/components/pagination
@import foundation/components/panels
//@import foundation/components/pricing-tables
//@import foundation/components/progress-bars
//@import foundation/components/side-nav
//@import foundation/components/sub-nav
//@import foundation/components/switch
//@import foundation/components/magellan
@import foundation/components/tables
//@import foundation/components/thumbs
//@import foundation/components/tooltips
@import foundation/components/dropdown


body.view-page ul.nav a
    padding: 3px 8px

// #page-content
//    @extend .table

.diff

    font-family: monospace
    whitespace: pre

    width: 100%

    .src-line-num, .dst-line-num
        color: #ccc
        text-align: right
        padding: 0 1ex
        border-right: solid 1px #ccc
        width: 6ch;

    .diff-op
        padding-left: 1ex
        width: 1ch

    .diff-src
        background-color: rgb(255, 236, 236)
    .diff-dst
        background-color: rgb(236, 255, 236)

Correct whitespace handling in diff.

body.view-page ul.nav a
    padding: 3px 8px

// #page-content
//    @extend .table

.diff

    font-family: monospace

    width: 100%

    td
        padding: 0 1ex

    .src-line-num, .dst-line-num, .diff-op
        color: #ccc
        text-align: right
        border-right: solid 1px #ccc
        width: 6ch;

    .diff-op
        width: 1ch
        color: #aaa

    .diff-src
        background-color: rgb(255, 236, 236)
    .diff-dst
        background-color: rgb(236, 255, 236)

    .diff-content
        white-space: pre


@import "foundation"

footer
  background: $topbar-bg-color
  min-height: $topbar-height
  color: #eee
  *
    color: #eee
    &:hover
      color: #e2e2e2

.top-banner
  background: $primary-color
  color: #eee
  padding: 20px 0
  margin-top: 20px
  *
    color: #eee
  h1
    font-weight: 100

Add margin for top/bottom of main-content.

@import "foundation"

footer
  background: $topbar-bg-color
  min-height: $topbar-height
  color: #eee
  *
    color: #eee
    &:hover
      color: #e2e2e2

.main-content
  margin: 20px 0

.top-banner
  background: $primary-color
  color: #eee
  padding: 20px 0
  *
    color: #eee
  h1
    font-weight: 100


ul.portfolio-gallery
  @include container()
  list-style-type: none
  color: white
  padding: 0

  li.slide
    @include span(6)
    @include background-size(cover)
    margin-bottom: gutter()
    position: relative
    z-index: 0

    &:nth-child(even)
      @include span(6 last)

    &:before
      position: absolute
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6))
      width: 100%
      height: 100%
      left: 0
      top: 0
      content: ''
      z-index: -1

    a
      color: white
      text-decoration: none

    .container
      padding: 0.75em

    .date-start, .date-end, ul.tags
      font-size: 0.8em

    .date-start
      @include span(6)

    .date-end
      @include span(6 last)
      text-align: right

Add hover animation on gallery slides

ul.portfolio-gallery
  @include container()
  list-style-type: none
  color: white
  padding: 0

  li.slide
    @include span(6)
    @include background-size(cover)
    margin-bottom: gutter()
    position: relative
    z-index: 0

    &:nth-child(even)
      @include span(6 last)

    &:before
      position: absolute
      background-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6))
      width: 100%
      height: 100%
      left: 0
      top: 0
      content: ''
      z-index: -1

    &:hover
      &:before
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5))
        @include transition(all 0.25s ease-in-out)

    a
      color: white
      text-decoration: none

    .container
      padding: 0.75em

    .date-start, .date-end, ul.tags
      font-size: 0.8em

    .date-start
      @include span(6)

    .date-end
      @include span(6 last)
      text-align: right


.posts p,
article.article-detail,
.index-article,
.recent-posts,
.footer-tags,
.tag-header,
.tag-list
  +shift(2)
  +span-columns(8)

.article-detail h3,
footer h3,
.post-title a,
.tag-header,
.tag-list-title
  font-size: 1.7em

.show_notes_display b,
.article-detail h3,
.detail-post-date,
.post-date,
.tag-date,
.tag-header
  color: $light-gray

.posts,
.article-detail p,
.post-title a,
h3.detail-post-topic-list
  color: darken($medium-gray, 30%)

.article-detail a,
.detail-post-title,
.tagname
  color: $brand-color

a.tag-list-link
  color: darken($medium-gray, 30%)
  &:hover
    border-bottom: none
    color: $brand-color

.article-detail a,
.article-detail,
.recent-posts,
.footer-tags,
.navigation
  font-family: $helvetica

.index-article h2
  -webkit-margin-before: -0.32em

h3.about-header:first-of-type
  margin-top: -0.2em

Add transition to taglist hover

.posts p,
article.article-detail,
.index-article,
.recent-posts,
.footer-tags,
.tag-header,
.tag-list
  +shift(2)
  +span-columns(8)

.article-detail h3,
footer h3,
.post-title a,
.tag-header,
.tag-list-title
  font-size: 1.7em

.show_notes_display b,
.article-detail h3,
.detail-post-date,
.post-date,
.tag-date,
.tag-header
  color: $light-gray

.posts,
.article-detail p,
.post-title a,
h3.detail-post-topic-list
  color: darken($medium-gray, 30%)

.article-detail a,
.detail-post-title,
.tagname
  color: $brand-color

a.tag-list-link
  +transition(all .1s ease-in-out)
  color: darken($medium-gray, 30%)
  &:hover
    border-bottom: none
    color: $brand-color

.article-detail a,
.article-detail,
.recent-posts,
.footer-tags,
.navigation
  font-family: $helvetica

.index-article h2
  -webkit-margin-before: -0.32em

h3.about-header:first-of-type
  margin-top: -0.2em


.feedback-info
  background: $light-grey
  margin: 0.5em
  padding: 0.5em
  width: 30%
  float: left

  &__label
    display: inline-block
    font-size: $f-small
    font-weight: bold

  &__value
    color: $blue
    font-size: $f-small
    font-weight: bold
    overflow: hidden

Apply responsive styling to feedback info blocks

.feedback-info
  background: $light-grey
  border-radius: 2px
  margin: 0.5em
  padding: 0.5em
  width: 30%
  float: left

  +max-width($small)
    float: none
    margin: 0.5em auto
    width: 75%

  &__label
    display: inline-block
    font-size: $f-small
    font-weight: bold

  &__value
    color: $blue
    font-size: $f-small
    font-weight: bold
    overflow: hidden


.response-sidebar
  @extend .main-content
  h2
    margin-top: 0
  .submit
    border-radius: 0
  .affix
    top: 0

  .punchcard
    h1
      margin: 0

    .sidebar-title
      padding: .3em

    .card
      padding: 1em 0
      span
        height: $circle-size/1.5
        width: $circle-size/1.5
        line-height: $circle-size/1.6
        color: $font-color
        margin: .125em
        border: 1px solid $unscored
        display: inline-block
        text-align: center
        border-radius: 100px
        :hover
          text-decoration: none

    .btn
      border-radius: 0em
      margin: 0em
      span
        color: white
        font-size: 1.3em
  .sidebar-title
    font-weight: bold
    color: $unscored
    .score-count
      color: $unscored
      font-weight: lighter

Add hover styles for punchcard

.response-sidebar
  @extend .main-content
  h2
    margin-top: 0
  .submit
    border-radius: 0
  .affix
    top: 0

  .punchcard
    h1
      margin: 0

    .sidebar-title
      padding: .3em

    .card
      padding: 1em 0
      span
        height: $circle-size/1.5
        width: $circle-size/1.5
        line-height: $circle-size/1.6
        color: $font-color
        margin: .125em
        border: 1px solid $unscored
        display: inline-block
        text-align: center
        border-radius: 100px
      a
        &:hover
          text-decoration: none
          span
            box-shadow: inset 0px 0px 0px 1px $unscored
    .btn
      border-radius: 0em
      margin: 0em
      span
        color: white
        font-size: 1.3em
  .sidebar-title
    font-weight: bold
    color: $unscored
    .score-count
      color: $unscored
      font-weight: lighter


@import 'styles/colors'
@import 'styles/animations'

.container
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: #101010e3
  z-index: 99999
  overflow-x: hidden
  overflow-y: auto
  position: fixed

.close
  top: 1rem
  right: 3vw
  position: fixed
  transition: .5s ease
  &:hover
    color: $activeColor

.showOnMobile
  animation: showOnMobile .5s ease-in-out

.hideOnMobile
  animation: hideOnMobile .5s ease-in-out forwards

.showOnLargeScreens
  animation: showOnLargeScreens .5s ease-in-out

.hideOnLargeScreens
  animation: hideOnLargeScreens .5s ease-in-out forwards

Add z-index to the close button

@import 'styles/colors'
@import 'styles/animations'

.container
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: #101010e3
  z-index: 99999
  overflow-x: hidden
  overflow-y: auto
  position: fixed

.close
  top: 1rem
  right: 3vw
  position: fixed
  z-index: 99999
  transition: .5s ease
  &:hover
    color: $activeColor

.showOnMobile
  animation: showOnMobile .5s ease-in-out

.hideOnMobile
  animation: hideOnMobile .5s ease-in-out forwards

.showOnLargeScreens
  animation: showOnLargeScreens .5s ease-in-out

.hideOnLargeScreens
  animation: hideOnLargeScreens .5s ease-in-out forwards


@import branding

.producers
  .active_table .active_table_node

    //Open row
    &.open
      .active_table_row:first-child
        border-top: 1px solid $clr-turquoise
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
        &:hover, &:active, &:focus
          color: $clr-turquoise
          strong
            color: $clr-turquoise
      .active_table_row:nth-child(2)
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
      .active_table_row.link
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
        border-bottom: 1px solid $clr-turquoise

    //Closed row
    &.closed
      &, & *
        color: $dark-grey
      &:hover, &:active, &:focus
        border: 1px solid $clr-turquoise
        &, & *
          color: $clr-turquoise

Adjust producer active table styles to accomodate new fat view markup

@import branding

.producers
  .active_table .active_table_node

    //Open row
    &.open
      .active_table_row:first-child
        border-top: 1px solid $clr-turquoise
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
        &:hover, &:active, &:focus
          color: $clr-turquoise
          strong
            color: $clr-turquoise
      .active_table_row:nth-child(2)
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
        border-bottom: 1px solid $clr-turquoise
      .active_table_row.link
        border-left: 1px solid $clr-turquoise
        border-right: 1px solid $clr-turquoise
        border-bottom: 1px solid $clr-turquoise

    //Closed row
    &.closed
      &, & *
        color: $dark-grey
      &:hover, &:active, &:focus
        border: 1px solid $clr-turquoise
        &, & *
          color: $clr-turquoise


//-------------------------------------
//  Layout
//-------------------------------------

// ----- Rows ----- //

.l-row

// ----- Cells ----- //

.l-cell, %l.cell
  margin: 0 auto
  max-width: em($l-maxWidth)
  padding: 0 em(60px)

// ----- Grids ----- //

.l-grid

.l-grid-box

// ----- Cards ----- //

.l-card

// ----- Buckets ----- //

.l-bucket

// ----- Utilities ----- //

.l-block, %l-block
  display: block

.l-pullLeft, %l-pullLeft
  float: left

.l-pullRight, %l-pullRight
  float: right

Adjust the order of placeholder selectors


@import branding
@import mixins

body.off-canvas
  padding-top: 45px

.top-bar
  @include box-shadow(0 2px 3px 0 rgba(0,0,0,0.25))

nav
  @include textpress
  .top-bar-section ul li > a
    font-size: 0.75rem
    height: 45px
    @include csstrans
    opacity: 0.8
    &:hover, &:focus, &:active
      opacity: 1
  .nav-branded
    color: $clr-brick-light-bright
  .nav-primary
    @include avenir
    font-size: 0.875rem

nav.top-bar a.icon i
  font-size: 22px

Make padding top responsive depending on big or mobile menu top-bar

@import branding
@import mixins

.top-bar
  @include box-shadow(0 2px 3px 0 rgba(0,0,0,0.25))

nav
  @include textpress
  .top-bar-section ul li > a
    font-size: 0.75rem
    height: 45px
    @include csstrans
    opacity: 0.8
    &:hover, &:focus, &:active
      opacity: 1
  .nav-branded
    color: $clr-brick-light-bright
  .nav-primary
    @include avenir
    font-size: 0.875rem

nav.top-bar a.icon i
  font-size: 22px

// Responsive
@media screen and (min-width: 1025px)
  body.off-canvas
    padding-top: 45px


.react-autosuggest__suggestions-container
  ul
    list-style: none
    max-width: 660px
    margin: 0 auto
    padding: 0
    color: #fff

.react-autosuggest__suggestion
  margin-bottom: 40px
  cursor: pointer
  border-bottom: 3px solid transparent

  h3
    display: inline
    font-size: 22px
    font-weight: 600

.react-autosuggest__suggestion--focused
  outline: 2px dashed #555
  outline-offset: 6px

.react-autosuggest__item
  display: flex
  align-items: flex-start;

  img
    max-width: 120px
    margin-right: 10px

  p
    font-size: 12px
    font-weight: 300

.react-autosuggest__item-info
  display: flex
  flex-direction: column

Increase AddItem suggestion description font weight for mobile again

.react-autosuggest__suggestions-container
  ul
    list-style: none
    max-width: 660px
    margin: 0 auto
    padding: 0
    color: #fff

.react-autosuggest__suggestion
  margin-bottom: 40px
  cursor: pointer
  border-bottom: 3px solid transparent

  h3
    display: inline
    font-size: 22px
    font-weight: 600

.react-autosuggest__suggestion--focused
  outline: 2px dashed #555
  outline-offset: 6px

.react-autosuggest__item
  display: flex
  align-items: flex-start;

  img
    max-width: 120px
    margin-right: 10px

  p
    font-size: 12px
    font-weight: 400

.react-autosuggest__item-info
  display: flex
  flex-direction: column


.maruku_toc
  background: #ddd
  border: 1px solid #ccc
  margin-right: 2em
  float: left
  ul
    padding: 0 1em
  #frequently_asked_questions + &
    float: none
    margin: 0 2em

#filecontents
  *:target, dt:target + dd
    background-color: #ccf
    border: 1px solid #88b
  dt
    font-weight: bold
  dd
    margin:
      left: 0
      bottom: 0.7em
    padding-left: 3em
  dt:target
    border-bottom-style: none
    & + dd
      border-top-style: none

Remove outdated Maruku reference from css files