//
// Variables
//
$font-size-base: 16!default
$line-height-base: 1.4

$margin-base-vertical:  $font-size-base/2!default
$margin-base-horizontal: $font-size-base/2!default

.mb-#{$margin-base-vertical}
  margin-bottom: $margin-base-vertical+px

.mb-#{$margin-base-vertical*2}
  margin-bottom: $margin-base-vertical*2+px

.mb-#{$margin-base-vertical*3}
  margin-bottom: $margin-base-vertical*3+px

.mb-#{$margin-base-vertical*4}
  margin-bottom: $margin-base-vertical*4+px

.mb-#{$margin-base-vertical*5}
  margin-bottom: $margin-base-vertical*5+px

Use @for directive to create classes

//
// Variables
//
$font-size-base: 16!default
$line-height-base: 1.4

$margin-base-vertical:  $font-size-base/2!default
$margin-base-horizontal: $font-size-base/2!default

@for $i from 1 through 5
  .mb-#{$margin-base-vertical * $i}
    margin-bottom: $margin-base-vertical*$i+px


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

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

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

    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 half-transparent background for 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

    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


@mixin placeholder
    @if support-legacy-browser("firefox", "18")
        &:-moz-placeholder
            @content

    @if support-legacy-browser("firefox", "19")
        &::-moz-placeholder
            @content

    @if support-legacy-browser("ie", "10")
        &:-ms-input-placeholder
            @content

    &::-webkit-input-placeholder
        @content

    &::input-placeholder
        @content

Add placeholder class to mixin to support JS ployfills

@mixin placeholder
    @if support-legacy-browser("firefox", "18")
        &:-moz-placeholder
            @content

    @if support-legacy-browser("firefox", "19")
        &::-moz-placeholder
            @content

    @if support-legacy-browser("ie", "10")
        &:-ms-input-placeholder
            @content

    &::-webkit-input-placeholder
        @content

    &::input-placeholder
        @content

    &.placeholder
        @content


// Styling for the /docs/ pages

$inner-width: 87%

.docs
  @include grid-wrap
  margin-bottom: $baseline * 2
  .docs-nav
    @include grid-x-col(5)
    .docs-nav-inner
      width: $inner-width
      padding: 20px
      background: darken($color-nnt-purple, 20%)
    ul
      margin-bottom: 0
    li
      padding-bottom: $baseline / 2
    h2
      font-size: 24px
      line-height: $baseline
  .docs-content
    @include grid-x-col(11)

.docs-nav-tabs
  @include grid-clear
  width: $inner-width

  .docs-nav-tab
    float: left
    width: 50%
    background: darken($color-nnt-purple, 30%)
    &.current
      background: darken($color-nnt-purple, 22%)
      a
      color: darken($color-text-white, 2%)

    a
      display: block
      padding: $baseline / 2
      text-align: center
      color: $color-text-white
      text-transform: uppercase
      font-size: $base-font-size * 0.8

#github-issues-widget
  background: #f7f7f7
  border: none
  padding: $baseline / 4

Tweak to nav tab inactive colour

// Styling for the /docs/ pages

$inner-width: 87%

.docs
  @include grid-wrap
  margin-bottom: $baseline * 2
  .docs-nav
    @include grid-x-col(5)
    .docs-nav-inner
      width: $inner-width
      padding: 20px
      background: darken($color-nnt-purple, 20%)
    ul
      margin-bottom: 0
    li
      padding-bottom: $baseline / 2
    h2
      font-size: 24px
      line-height: $baseline
  .docs-content
    @include grid-x-col(11)

.docs-nav-tabs
  @include grid-clear
  width: $inner-width

  .docs-nav-tab
    float: left
    width: 50%
    background: darken($color-nnt-purple, 30%)

    a
      display: block
      padding: $baseline / 2
      text-align: center
      color: darken($color-nnt-purple, 20%) // Slightly lighter than the background for inactive tab
      text-transform: uppercase
      font-size: $base-font-size * 0.8

    &.current
      background: darken($color-nnt-purple, 22%)
      a
        color: darken($color-text-white, 2%)

#github-issues-widget
  background: #f7f7f7
  border: none
  padding: $baseline / 4


.field
  margin-bottom: 20px

  label
    display: block
    color: $grey
    margin-bottom: 10px

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea
    box-sizing: border-box
    width: 400px
    max-width: 100%
    padding: 15px
    background-color: $light-grey
    border: none
    border-radius: 3px
    outline: none
    appearance: none
    line-height: 20px
    color: $dark-grey
    word-break: normal

  textarea
    min-height: 150px
    width: 500px
    resize: vertical

Revert "normal word wrap for inputs"

.field
  margin-bottom: 20px

  label
    display: block
    color: $grey
    margin-bottom: 10px

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  textarea
    box-sizing: border-box
    width: 400px
    max-width: 100%
    padding: 15px
    background-color: $light-grey
    border: none
    border-radius: 3px
    outline: none
    appearance: none
    line-height: 20px
    color: $dark-grey

  textarea
    min-height: 150px
    width: 500px
    resize: vertical


.diff
  padding-left: $diff-vertical-padding
  line-height: 1.4 !important

  & + &
    margin-top: $wrapper-default-padding / 2

.diff__meta
  color: $content-border-color

.diff__file
  background: $default-text-color
  color: #fff
  margin: (-1 * $diff-vertical-padding) (-1 * $diff-horizontal-padding)
  padding: $diff-vertical-padding $diff-horizontal-padding
  border-radius: $diff-border-radius

.diff__added-line
  display: inline-block
  box-sizing: content-box
  width: 100%
  margin: -1px 0 -1px -1 * $diff-horizontal-padding
  padding: 1px 0 1px $diff-horizontal-padding
  background: $diff-green
  color: #fff

  b
    font: inherit
    color: lighten($diff-green, 15%)

.diff__added-line--first
  margin-top: -1 * $diff-vertical-padding
  padding-top: $diff-vertical-padding
  border-top-left-radius: $diff-border-radius
  border-top-right-radius: $diff-border-radius

.diff__added-line--last
  margin-bottom: -1 * $diff-vertical-padding
  padding-bottom: $diff-vertical-padding
  border-bottom-right-radius: $diff-border-radius
  border-bottom-left-radius: $diff-border-radius

Fix broken diff lines in Firefox

.diff
  padding-left: $diff-vertical-padding
  line-height: 1.35 !important

  & + &
    margin-top: $wrapper-default-padding / 2

.diff__meta
  color: $content-border-color

.diff__file
  background: $default-text-color
  color: #fff
  margin: (-1 * $diff-vertical-padding) (-1 * $diff-horizontal-padding)
  padding: $diff-vertical-padding $diff-horizontal-padding
  border-radius: $diff-border-radius

.diff__added-line
  display: inline-block
  box-sizing: content-box
  width: 100%
  margin: -1px 0 -1px -1 * $diff-horizontal-padding
  padding: 1px 0 1px $diff-horizontal-padding
  background: $diff-green
  color: #fff

  b
    font: inherit
    color: lighten($diff-green, 15%)

.diff__added-line--first
  margin-top: -1 * $diff-vertical-padding
  padding-top: $diff-vertical-padding
  border-top-left-radius: $diff-border-radius
  border-top-right-radius: $diff-border-radius

.diff__added-line--last
  margin-bottom: -1 * $diff-vertical-padding
  padding-bottom: $diff-vertical-padding
  border-bottom-right-radius: $diff-border-radius
  border-bottom-left-radius: $diff-border-radius


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


// Accounting
.currency
  text-align: right
  white-space: pre

// Balance and Profit Sheet
#balance-sheet table table, #profit-sheet table table
  border-spacing: 0px

#balance-sheet table table td, #profit-sheet table table td
  padding: 0.4em

#balance-sheet td, #profit-sheet td
  vertical-align: top
  color: black

#balance-sheet a, #profit-sheet a
  color: black

#balance-sheet tr.total
  td, th
    color: white
    background-color: #444444

#profit-sheet tr.total
  td, th
    color: white
    background-color: #444444

// Accounting **
tr.currency, th.currency
  text-align: right

.booking_list tr
  td
    background-color: white
    border-left: 0px none
    border-right: 0px none
    border-bottom: 1px solid
  border-left: 0px none
  border-right: 0px none

Add .number class to accounting stylesheet.

// Accounting
.currency
  text-align: right
  white-space: pre

.number
  text-align: right

// Balance and Profit Sheet
#balance-sheet table table, #profit-sheet table table
  border-spacing: 0px

#balance-sheet table table td, #profit-sheet table table td
  padding: 0.4em

#balance-sheet td, #profit-sheet td
  vertical-align: top
  color: black

#balance-sheet a, #profit-sheet a
  color: black

#balance-sheet tr.total
  td, th
    color: white
    background-color: #444444

#profit-sheet tr.total
  td, th
    color: white
    background-color: #444444

// Accounting **
tr.currency, th.currency
  text-align: right

.booking_list tr
  td
    background-color: white
    border-left: 0px none
    border-right: 0px none
    border-bottom: 1px solid
  border-left: 0px none
  border-right: 0px none


.tag-list
  margin:
    bottom: $medium-margin

.tag-header
  margin:
    bottom: 80px

.tag-list-title
  line-height: 1.4em
  margin:
    bottom: $small-margin
  &:last-child
    margin:
      bottom: 0px
  a
    color: darken($medium-gray, 30%)
    &:hover
      color: $brand-color
      border-bottom: 1px solid $brand-color

.large-bumper
  margin-bottom: $large-margin / 2
  &:last-child
    margin-bottom: 0px

Adjust spacing between tag list items

.tag-list
  margin:
    bottom: $medium-margin

.tag-header
  margin:
    bottom: 80px

.tag-list-title
  line-height: 1.4em
  margin:
    bottom: $small-margin
  &:last-child
    margin:
      bottom: 0px
  a
    color: darken($medium-gray, 30%)
    &:hover
      color: $brand-color
      border-bottom: 1px solid $brand-color

.large-bumper
  margin-bottom: em(62px)
  &:last-child
    margin-bottom: 0px


.progress-dotted
  position: relative
  height: 10px
  width: 80px
  .dot
    position: absolute
    width: 10px
    height: 10px
    border-radius: 5px
    background-color: $grey
    &:nth-child(1)
      left: 0%
    &:nth-child(2)
      left: 33%
    &:nth-child(3)
      left: 66%
    &:nth-child(4)
      left: 100%
  &.progress-dotted-1-of-4
    .dot:nth-child(1)
      background-color: $teal
  &.progress-dotted-2-of-4
    .progress-bar
      width: 33%
    .dot:nth-child(1), .dot:nth-child(2)
      background-color: $teal
      transition-delay: .5s
  &.progress-dotted-3-of-4
    .progress-bar
      width: 66%
    .dot:nth-child(1), .dot:nth-child(2), .dot:nth-child(3)
      background-color: $teal
      transition-delay: .5s
  &.progress-dotted-4-of-4
    .progress-bar
      width: 100%
    .dot
      background-color: $teal
      transition-delay: .5s
  .progress
    position: absolute
    top: 3px
    width: 100%

Adjust progress dotted sizes to design

.progress-dotted
  position: relative
  height: 10px
  width: 90px
  .dot
    position: absolute
    width: 12px
    height: 12px
    border-radius: 50%
    background-color: $grey
    &:nth-child(1)
      left: 0%
    &:nth-child(2)
      left: 33%
    &:nth-child(3)
      left: 66%
    &:nth-child(4)
      left: 100%
  &.progress-dotted-1-of-4
    .dot:nth-child(1)
      background-color: $teal
  &.progress-dotted-2-of-4
    .progress-bar
      width: 33%
    .dot:nth-child(1), .dot:nth-child(2)
      background-color: $teal
      transition-delay: .5s
  &.progress-dotted-3-of-4
    .progress-bar
      width: 66%
    .dot:nth-child(1), .dot:nth-child(2), .dot:nth-child(3)
      background-color: $teal
      transition-delay: .5s
  &.progress-dotted-4-of-4
    .progress-bar
      width: 100%
    .dot
      background-color: $teal
      transition-delay: .5s
  .progress
    position: absolute
    margin-top: 1px
    background-color: $grey
    top: 3px
    width: 100%


$fu-border-color: #bbb

form
  .field.file
    margin-bottom: 13px

    input
      width: 0.1px
      height: 0.1px
      opacity: 0
      overflow: hidden
      position: absolute
      z-index: -1

    label
      display: inline-block
      padding: 0 30px
      border: 1px solid $fu-border-color
      border-radius: 4px
      line-height: 38px
      height: 38px

      &:hover
        cursor: pointer

      span
        border-left: 1px solid $fu-border-color
        padding-left: 20px
        margin-left: 20px

Fix padding for file upload styling

$fu-border-color: #bbb

form
  .field.file
    margin-bottom: 13px

    input
      width: 0.1px
      height: 0.1px
      opacity: 0
      overflow: hidden
      position: absolute
      z-index: -1

    label
      display: inline-block
      padding: 0 30px
      border: 1px solid $fu-border-color
      border-radius: 4px
      line-height: 38px
      height: 38px

      &:hover
        cursor: pointer

      span
        border-left: 1px solid $fu-border-color
        padding-left: 13px
        margin-left: 13px


@import reset
@import variables
@import global
@import message-banner
@import terminal
@import help
@import source

Add a bit of media queries to keep the site from breaking completely on smaller screens

@import reset
@import variables
@import global
@import message-banner
@import terminal
@import help
@import source

@media all and (max-width: 1260px)
  #help
    height: 130px
  #terminal
    bottom: 130px
  #help img
    width: 140px
  #help ul
    width: 220px
    font-size: 12px
    padding: 5px 6px

@media all and (max-width: 960px)
  html,
  body
    overflow-x: auto
    width: 960px
  #terminal,
  #help
    width: 365px
  #source
    width: 595px
    left: 365px


.project-page
  .backers-page
    .backer
      padding: +emCalc(15px)
      border: 1px solid $border-color
      margin-bottom: +emCalc(20px)
      p
        overflow: hidden
      .name
        margin-top: +emCalc(20px)
      &.with-note
        .name
          margin-top: 0
      .custom-tooltip
        float: left
      .infos
        margin-top: +emCalc(5px)
        i
          margin-right: +emCalc(5px)
          font-size: 150%

    .backers-loading
      text-align: center
      img
        display: none

Adjust spacing for non-admins on backers page

.project-page
  .backers-page
    .backer
      padding: +emCalc(15px)
      border: 1px solid $border-color
      margin-bottom: +emCalc(20px)
      p
        overflow: hidden
      .name
        margin-top: +emCalc(30px)
      &.with-note
        .name
          margin-top: 0
      .custom-tooltip
        float: left
      .infos
        margin-top: +emCalc(5px)
        i
          margin-right: +emCalc(5px)
          font-size: 150%

    .backers-loading
      text-align: center
      img
        display: none


@mixin create_keyframes_animation($name, $left_percent, $center_percent, $right_precent)
  +keyframes($name)
    0%
      transform: scale(1)
    #{$left_percent}%
      transform: scale(1)
    #{$center_percent}%
      transform: scale(1.4)
    #{$right_precent}%
      transform: scale(1)
    100%
      transform: scale(1)

@mixin keyframes($name)
  @keyframes #{$name}
    @content

@mixin add_animation_on_sharing_button($index, $speed)
  .sharing_tags-buttons__item
    &:nth-child(#{$index})
      a
        animation: animate_sharing_buttons_#{$index} #{$speed}s infinite

@mixin create_wave_animation_on_sharing_buttons($count_of_buttons, $speed:2)
  $step: 100 / $count_of_buttons
  $half_step: $step / 2
  @for $i from 1 through $count_of_buttons
    $right: $i*$step
    $center: $right - $half_step
    $left: $center - $half_step

    +create_keyframes_animation('animate_sharing_buttons_#{$i}', $left, $center, $right)
    +add_animation_on_sharing_button($i, $speed)

Update animation for different group of buttons

@mixin create_keyframes_animation($name, $left_percent, $center_percent, $right_precent, $scale)
  +keyframes($name)
    0%
      transform: scale(1)
    #{$left_percent}%
      transform: scale(1)
    #{$center_percent}%
      transform: scale($scale)
    #{$right_precent}%
      transform: scale(1)
    100%
      transform: scale(1)

@mixin keyframes($name)
  @keyframes "#{$name}"
    @content

@mixin add_animation_on_sharing_button($animation_name, $index, $speed)
  & .sharing_tags-buttons__item
    &:nth-child(#{$index})
      a
        animation: $animation_name #{$speed}s infinite

@mixin create_wave_animation_on_sharing_buttons($count_of_buttons, $speed:2, $scale: 1.4)
  $step: 100 / $count_of_buttons
  $half_step: $step / 2
  @for $i from 1 through $count_of_buttons
    $right: $i*$step
    $center: $right - $half_step
    $left: $center - $half_step

    $animation_name: '#{&}-animate__button#{$i}'
    +create_keyframes_animation($animation_name, $left, $center, $right, $scale)
    +add_animation_on_sharing_button($animation_name, $i, $speed)


footer
  text-align: center

  address, nav, p
    +grid-column(6, $mobile)

    +grid-media($desktop)
      +grid-column(10, $desktop)
      +grid-shift(1, $desktop)

  address
    margin-bottom: 1rem

  li
    display: inline-block
    margin-left: 2rem

    &:first-child
      margin-left: 0

  svg
    fill: white
    width: 2.5rem
    height: 2.5rem

  a, a:hover
    color: white
    text-decoration: none

  .contact
    +clearfix
    background-color: $highlight_color
    color: white
    margin-bottom: 1rem
    padding: 1rem 0

  .cremesp
    color: $highlight_color

  .copyright
    color: gray

Add margin from content to footer

footer
  margin-top: 1rem
  text-align: center

  +grid-media($desktop)
    margin-top: 2rem

  address, nav, p
    +grid-column(6, $mobile)

    +grid-media($desktop)
      +grid-column(10, $desktop)
      +grid-shift(1, $desktop)

  address
    margin-bottom: 1rem

  li
    display: inline-block
    margin-left: 2rem

    &:first-child
      margin-left: 0

  svg
    fill: white
    width: 2.5rem
    height: 2.5rem

  a, a:hover
    color: white
    text-decoration: none

  .contact
    +clearfix
    background-color: $highlight_color
    color: white
    margin-bottom: 1rem
    padding: 1rem 0

  .cremesp
    color: $highlight_color

  .copyright
    color: gray


table.interactions
  .curve-tariff, .merit-tariff
    display: none

  td, th
    &.tariff-type
      display: none

  .tariff_type
    background: none
    color: #aaa
    float: right
    font-weight: normal
    padding-top: .5em
    padding-right: 0
    text-transform: uppercase

Increase space between tariff type icon and text

table.interactions
  .curve-tariff, .merit-tariff
    display: none

  td, th
    &.tariff-type
      display: none

  .tariff_type
    background: none
    color: #aaa
    float: right
    font-weight: normal
    padding-top: .5em
    padding-right: 0
    text-transform: uppercase

  // Add some extra space around the glyphicons in the tariff type dropdown
  .dropdown-menu .glyphicon
    margin-right: 3px


#forum-topics-list

#forum-threads-list
  .list-group-item
    &.pinned
      background: #f5f5f5

      a
        color: $success

    &.locked
      $gradient-two: rgba(0,0,0,0.01)
      $gradient-one: rgba(0,0,0,0.03)
      background-image: linear-gradient(135deg, $gradient-one 16.67%, $gradient-two 16.67%, $gradient-two 50%, $gradient-one 50%, $gradient-one 66.67%, $gradient-two 66.67%, $gradient-two 100%)
      background-size: 0.5rem 0.5rem

    &.hidden
      .row
        opacity: 0.6

#forum-thread

.forum-post
  .card-header
    padding: 0.3rem
    background: #f5f5f5
    border-bottom: 0

  .card-body
    padding: 1rem

    .content

    .footer
      font-size: 0.8rem
      border-top: 1px solid $border-color

      .created-at
        opacity: 0.6

      .edited-at
        opacity: 0.5
        font-style: italic

      .actions
        .action
          color: inherit
          cursor: pointer
          text-decoration: none

Remove thread 'locked' status stripes

#forum-topics-list

#forum-threads-list
  .list-group-item
    &.pinned
      background: #f5f5f5

      a
        color: $success

    &.locked

    &.hidden
      .row
        opacity: 0.6

#forum-thread

.forum-post
  .card-header
    padding: 0.3rem
    background: #f5f5f5
    border-bottom: 0

  .card-body
    padding: 1rem

    .content

    .footer
      font-size: 0.8rem
      border-top: 1px solid $border-color

      .created-at
        opacity: 0.6

      .edited-at
        opacity: 0.5
        font-style: italic

      .actions
        .action
          color: inherit
          cursor: pointer
          text-decoration: none


html
  box-sizing: border-box

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

Add background color on html/body.

html
  box-sizing: border-box

html, body
  background-color: darken(#FFFFFF, 2.8%)

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


.card-table
    tr:first-child td
        border-top: none

    td, th
        padding: 1rem 1.25rem
        vertical-align: middle

    .table-active
        background-color: rgba(247, 247, 249, 0.6)

Remove border-top from first row of tables

.card-table
    tr:first-child
        td, th
            border-top: none

    td, th
        padding: 1rem 1.25rem
        vertical-align: middle

    .table-active
        background-color: rgba(247, 247, 249, 0.6)


sprites
  display: block

sprite
  background-color: white
  border-radius: 3px
  box-shadow: $item-shadow
  display: inline-block
  margin-right: 3px
  margin-bottom: 3px
  padding: 2px

  & > a > img
    display: block
    height: auto
    max-width: 100%

  > form
    position: absolute
    top: -10px
    left: -2px
    margin: 0

    > button
      color: red
      background-color: white
      padding: 2px

Add min-height for when there are no results

sprites
  display: block
  min-height: 100px

sprite
  background-color: white
  border-radius: 3px
  box-shadow: $item-shadow
  display: inline-block
  margin-right: 3px
  margin-bottom: 3px
  padding: 2px

  & > a > img
    display: block
    height: auto
    max-width: 100%

  > form
    position: absolute
    top: -10px
    left: -2px
    margin: 0

    > button
      color: red
      background-color: white
      padding: 2px


.FormButton
  +sanserif
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease
  width: 100%
  height: rem(60)
  padding: 0 rem(30)
  line-height: rem(60)
  text-align: center
  background-color: black
  border: 1px solid black
  color: white

.FormButton:focus,
.no-touch .FormButton:hover
  background-color: #666
  border-color: #666
  color: white

.FormButton[disabled]
  color: #222

Update disabled state to be a bit lighter.

.FormButton
  +sanserif
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease
  width: 100%
  height: rem(60)
  padding: 0 rem(30)
  line-height: rem(60)
  text-align: center
  background-color: black
  border: 1px solid black
  color: white

.FormButton:focus,
.no-touch .FormButton:hover
  background-color: #666
  border-color: #666
  color: white

.FormButton[disabled]
  color: #666


// Code
// ––––––––––––––––––––––––––––––––––––––––––––––––––

code
	background: $color-tertiary
	border-radius: .4rem
	font-size: 86%
	margin: 0 .2rem
	padding: .2rem .5rem
	white-space: nowrap

pre
	background: $color-tertiary
	border-left: .3rem solid $color-primary

	& > code
		border-radius: 0
		display: block
		padding: 1rem 1.5rem
		white-space: pre

Fix behavior of the <pre> element

// Code
// ––––––––––––––––––––––––––––––––––––––––––––––––––

code
	background: $color-tertiary
	border-radius: .4rem
	font-size: 86%
	margin: 0 .2rem
	padding: .2rem .5rem
	white-space: nowrap

pre
	background: $color-tertiary
	border-left: .3rem solid $color-primary
	overflow-y: hidden

	& > code
		border-radius: 0
		display: block
		padding: 1rem 1.5rem
		white-space: pre


@import "jquery.ui.datepicker"
@import "jquery.ui.slider"
@import "back-all/jquery-ui-1.10.3.blitzer"
@import "back-all/jquery.autocomplete"
@import "back-all/jquery.tagsinput"
@import "twitter/bootstrap"
@import "twitter/bootstrap-responsive"
@import "back-all/main"

Fix wrong CSS URL for some jquery-ui components.

@import "jquery.ui.datepicker.css"
@import "jquery.ui.slider.css"
@import "back-all/jquery-ui-1.10.3.blitzer"
@import "back-all/jquery.autocomplete"
@import "back-all/jquery.tagsinput.css"
@import "twitter/bootstrap"
@import "twitter/bootstrap-responsive"
@import "back-all/main"


/**
 * COMPONENTS
 * Import all component Sass partials here e.g
 *
 * @import components/component
 * @import components/component-two
 */

Add a new line to end of components


.rdb-header
  background-color: $primary-lightgray
  border-bottom: 1px solid $frame-color
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15)

  display: table
  width: 100%
  padding: 10px 15px 10px

  border-top-left-radius: 7px
  border-top-right-radius: 7px

  > div
    display: table-cell
    vertical-align: middle

    &:last-child
      text-align: right

  h1, h2, h3
    margin: 3px 15px
    padding: 0
    display: inline-block

.rdb-main
  margin: 10px 15px
  background-color: $primary-white
  // border-bottom: 1px solid $frame-color

  // box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15)
  // min-height: 200px

.rdb-main-board
  min-height: 200px

Adjust vertical align of buttons and headlines in board header

.rdb-header
  background-color: $primary-lightgray
  border-bottom: 1px solid $frame-color
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15)

  display: table
  width: 100%
  padding: 10px 15px 10px

  border-top-left-radius: 7px
  border-top-right-radius: 7px

  > div
    display: table-cell
    vertical-align: middle

    &:last-child
      text-align: right

  h1, h2, h3
    margin: 3px 15px
    padding: 0
    display: inline-block
    vertical-align: botto

  .rui-btn
    vertical-align: bottom

.rdb-main
  margin: 10px 15px
  background-color: $primary-white
  // border-bottom: 1px solid $frame-color

  // box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15)
  // min-height: 200px

.rdb-main-board
  min-height: 200px


img.cycle-home-logo
    width: 5em
    display: block
    margin-bottom: $small-space

.cycle-home-link
    font-family: $header-font
    font-weight: bold

.side-menu
    position: fixed
    top: $normal-space
    width: $side-menu-width
    height: 100%
    overflow: hidden
    font-size: 3vh
    a
        +anchor_style($black)

.paginator
    a
        +box_link()

article
    min-height: 500px
    margin-top: $normal-space
    max-width: $max-article-width
    margin-left: calc(#{$side-menu-width} + #{$normal-space})
    overflow-x: auto
    th
        border-bottom-width: 2px
    th, td
        border-color: $gray-lighter
    header
        text-align: center
    > div
        margin-bottom: 2em
    .paginator
        display: flex
        justify-content: space-between

@media only screen and (max-width: 680px)
    .side-menu
        position: relative
        width: inherit
        height: inherit
        font-size: 150%
        padding-bottom: $normal-space
        border-bottom: 2px solid $gray-lighter
        margin-bottom: $normal-space
        ul > li
            padding-top: 0.5em
    article
        margin-left: 0

@media only screen and (min-height: 800px)
    .side-menu
        font-size: 24px

Fix word wrapping style problem with side menu

img.cycle-home-logo
    width: 5em
    display: block
    margin-bottom: $small-space

.cycle-home-link
    font-family: $header-font
    font-weight: bold

.side-menu
    position: fixed
    top: $normal-space
    height: 100%
    overflow: hidden
    font-size: 3vh
    a
        +anchor_style($black)
    nav ul
        white-space: nowrap

.paginator
    a
        +box_link()

article
    min-height: 500px
    margin-top: $normal-space
    max-width: $max-article-width
    margin-left: calc(#{$side-menu-width} + #{$normal-space})
    overflow-x: auto
    th
        border-bottom-width: 2px
    th, td
        border-color: $gray-lighter
    header
        text-align: center
    > div
        margin-bottom: 2em
    .paginator
        display: flex
        justify-content: space-between

@media only screen and (max-width: 680px)
    .side-menu
        position: relative
        width: inherit
        height: inherit
        font-size: 150%
        padding-bottom: $normal-space
        border-bottom: 2px solid $gray-lighter
        margin-bottom: $normal-space
        ul > li
            padding-top: 0.5em
    article
        margin-left: 0

@media only screen and (min-height: 800px)
    .side-menu
        font-size: 24px


.border-all
  border: 1px solid

.border-top
  border-top: 1px solid

.border-right
  border-right: 1px solid

.border-bottom
  border-bottom: 1px solid

.border-left
  border-left: 1px solid

.border-wide
  border-width: 3px

.border-none
  border: 0

.rad1
  border-radius: .5em

.rad2
  border-radius: 1em

.rad3
  border-radius: 2em

.rad4
  border-radius: 4em

.rad5
  border-radius: 8em

.rounded-top
  border-bottom-left-radius: 0
  border-bottom-right-radius: 0

.rounded-right
  border-top-left-radius: 0
  border-bottom-left-radius: 0

.rounded-bottom
  border-top-left-radius: 0
  border-top-right-radius: 0

.rounded-left
  border-top-right-radius: 0
  border-bottom-right-radius: 0

.circle
  border-radius: 100%

Add class for reset border-widths to zero and two more border-width classes

.border-all
  border: 1px solid

.border-top
  border-top: 1px solid

.border-right
  border-right: 1px solid

.border-bottom
  border-bottom: 1px solid

.border-left
  border-left: 1px solid

.border-wide
  border-width: .125

.border-extra
  border-width: .250

.border-top-0
  border-top-width: 0

.border-right-0
  border-right-width: 0

.border-bottom-0
  border-bottom-width: 0

.border-left-0
  border-left-width: 0

.border-none
  border: 0

.rad1
  border-radius: .5em

.rad2
  border-radius: 1em

.rad3
  border-radius: 2em

.rad4
  border-radius: 4em

.rad5
  border-radius: 8em

.rounded-top
  border-bottom-left-radius: 0
  border-bottom-right-radius: 0

.rounded-right
  border-top-left-radius: 0
  border-bottom-left-radius: 0

.rounded-bottom
  border-top-left-radius: 0
  border-top-right-radius: 0

.rounded-left
  border-top-right-radius: 0
  border-bottom-right-radius: 0

.circle
  border-radius: 100%


//- 💫 CSS > BASE > LAYOUT

//- HTML

html
    font-size: $type-base

//- Body

body
    animation: fadeIn 0.25s ease
    background: $color-back
    color: $color-front

//- Paragraphs

p
    @extend .o-block, .u-text

//- Links

main p a,
main table a,
main > *:not(footer) li a,
main aside a
    @extend .u-link

//- Selection

::selection
    background: $color-theme
    color: $color-back

Remove text shadow on selected text

//- 💫 CSS > BASE > LAYOUT

//- HTML

html
    font-size: $type-base

//- Body

body
    animation: fadeIn 0.25s ease
    background: $color-back
    color: $color-front

//- Paragraphs

p
    @extend .o-block, .u-text

//- Links

main p a,
main table a,
main > *:not(footer) li a,
main aside a
    @extend .u-link

//- Selection

::selection
    background: $color-theme
    color: $color-back
    text-shadow: none


@import branding
@import mixins
@import variables

// Styling for brand intro / tagline on homepage

#tagline
  width: 100%
  &:before
    content: ""
    @include fullbg
    background-color: $ofn-grey
    background-image: url("/assets/home/home.jpg")
    position: fixed
    left: 0
    right: 0
    bottom: 0
    z-index: -1
    width: 100%
    height: 100%

  h1
    margin-top: 2rem
    @media all and (min-width: 768px)
      margin-top: 10rem
    img
      max-width: 80%
      margin-bottom: 2rem
      @media all and (min-width: 768px)
        margin-bottom: 5rem

Scale logo down when display is very short (ie. iPhone 4)

@import branding
@import mixins
@import variables

// Styling for brand intro / tagline on homepage

#tagline
  width: 100%
  &:before
    content: ""
    @include fullbg
    background-color: $ofn-grey
    background-image: url("/assets/home/home.jpg")
    position: fixed
    left: 0
    right: 0
    bottom: 0
    z-index: -1
    width: 100%
    height: 100%

  h1
    margin-top: 2rem
    @media all and (min-width: 768px)
      margin-top: 10rem
    img
      max-width: 45%
      @media all and (min-height: 500px)
        max-width: 80%

      margin-bottom: 2rem
      @media all and (min-width: 768px)
        margin-bottom: 5rem


.turbolinks-progress-bar
  height: 5px
  background-color: $color-nnt-purple

Add touch-action: manipulation to remove 300ms touch delay on links

.turbolinks-progress-bar
  height: 5px
  background-color: $color-nnt-purple

a, button
  -ms-touch-action: manipulation
  touch-action: manipulation


/* You can add global styles to this file, and also import other style files */
@import "variables"
@import "../node_modules/font-awesome/scss/font-awesome"
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"
// @import "~@angular/material/prebuilt-themes/indigo-pink.css"
// @import "~@angular/material/prebuilt-themes/pink-bluegrey.css"
// @import "~@angular/material/prebuilt-themes/purple-green.css"

body
  font-family: $primary-font

html, body, app-root, mat-sidenav-container, .aae-content
  margin: 0
  width: 100%
  height: 100%

.aae-main-wrapper
  padding: 100px

Edit base width of content

/* You can add global styles to this file, and also import other style files */
@import "variables"
@import "../node_modules/font-awesome/scss/font-awesome"
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css"
// @import "~@angular/material/prebuilt-themes/indigo-pink.css"
// @import "~@angular/material/prebuilt-themes/pink-bluegrey.css"
// @import "~@angular/material/prebuilt-themes/purple-green.css"

body
  font-family: $primary-font

html, body, app-root, mat-sidenav-container, .aae-content
  margin: 0
  width: 100%
  height: 100%

.aae-header-wrapper
  padding: 35px 100px

.aae-main-wrapper
  max-width: 700px
  margin: 0 auto
  padding: 100px 0


//- 💫 CSS > COMPONENTS > LISTS

//- List Container

.c-list
    @each $type, $counter in (numbers: decimal, letters: upper-latin, roman: lower-roman)
        &.c-list--#{$type}
            counter-reset: li

            .c-list__item:before
                content: counter(li, #{$counter}) '.'
                font-size: 1em
                padding-right: 1rem

//- List Item

.c-list__item
    padding-left: 2rem
    margin-bottom: 0.5em
    margin-left: 1.25rem

    &:before
        content: '\25CF'
        display: inline-block
        font-size: 0.6em
        font-weight: bold
        padding-right: 1.25rem
        margin-left: -3.75rem
        text-align: right
        width: 2.5rem
        counter-increment: li
        box-sizing: content-box

//- List icon

.c-list__icon
    margin-right: 1rem

Fix spacing on bulleted lists

//- 💫 CSS > COMPONENTS > LISTS

//- List Container

.c-list
    @each $type, $counter in (numbers: decimal, letters: upper-latin, roman: lower-roman)
        &.c-list--#{$type}
            counter-reset: li

            .c-list__item:before
                content: counter(li, #{$counter}) '.'
                font-size: 1em
                padding-right: 1rem

//- List Item

.c-list__item
    padding-left: 2rem
    margin-bottom: 0.5em
    margin-left: 1.25rem

    &:before
        content: '\25CF'
        display: inline-block
        font-size: 0.6em
        font-weight: bold
        padding-right: 1em
        margin-left: -3.75rem
        text-align: right
        width: 2.5rem
        counter-increment: li
        box-sizing: content-box

//- List icon

.c-list__icon
    margin-right: 1rem


@import meurio_ui/colors
@import meurio_ui/meurio_header

[class^="icon-"], [class*=" icon-"]
  font-family: inherit
  &:before
    font-family: 'icomoon'
    speak: none
    font-style: normal
    font-weight: normal
    font-variant: normal
    text-transform: none
    line-height: 1
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale

Fix non-explicit import for font stylesheet

@import meurio_ui/colors
@import meurio_ui/meurio_header
@import meurio_ui/fonts

[class^="icon-"], [class*=" icon-"]
  font-family: inherit
  &:before
    font-family: 'icomoon'
    speak: none
    font-style: normal
    font-weight: normal
    font-variant: normal
    text-transform: none
    line-height: 1
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale


+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

div
  -webkit-appearance: none !important

Add comment for this solution

+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


body
    background: $grey-dark !important
    color: $white
    font-family: $font-main
    overflow: hidden
    line-height: $line-height

h1, h2, h3, h4, h5, h6
	font-family: $font-alt
a
	color: $blue-light

#App
    width: 100vw
    position: absolute
    left: 0
    top: 0

Add styles for code text -> /g/

body
    background: $grey-dark !important
    color: $white
    font-family: $font-main
    overflow: hidden
    line-height: $line-height

h1, h2, h3, h4, h5, h6
	font-family: $font-alt
a
	color: $blue-light

#App
    width: 100vw
    position: absolute
    left: 0
    top: 0

pre
    display: inline-block
    background: #2f2b2b
    padding: 6px 16px


.year-row
  @include span-columns(12)
  @include omega
  text-align: center

  @include media(min-width $large-screen)
    font-size: 1.25em

  .year-controls
    display: inline-block
    vertical-align: middle
    h2
      display: inline-block
      padding: 0 0.2em
    a
      font-size: 2em
      line-height: 1.25em
      &:hover
        color: $hover-button-color

    @include media(max-width $medium-screen)
      @include span-columns(8)
      text-align: left

  .today-button
    display: inline-block
    vertical-align: middle

    @include media(max-width $medium-screen)
      @include span-columns(4)
      @include omega
      text-align: right

    @include media(min-width $medium-screen)
      margin-left: 1em

    @include media(min-width $large-screen)
      margin-left: 1.25em

Change margin to padding in media queries for year row.

.year-row
  @include span-columns(12)
  @include omega
  text-align: center

  @include media(min-width $large-screen)
    font-size: 1.25em

  .year-controls
    display: inline-block
    vertical-align: middle
    h2
      display: inline-block
      padding: 0 0.2em
    a
      font-size: 2em
      line-height: 1.25em
      &:hover
        color: $hover-button-color

    @include media(max-width $medium-screen)
      @include span-columns(8)
      text-align: left

  .today-button
    display: inline-block
    vertical-align: middle

    @include media(max-width $medium-screen)
      @include span-columns(4)
      @include omega
      text-align: right

    @include media(min-width $medium-screen)
      padding-left: 1em

    @include media(min-width $large-screen)
      padding-left: 1.25em


ul > li, ol > li
  margin-left: $spacing-unit

dl > dt
  font-weight: $font-weight-bold

dd + dt
  margin-top: halve($spacing-unit)

%list-reset,
.list-reset
  padding-left: 0
  list-style: none

  > li
    margin-left: 0

%list-inline,
.list-inline
  @extend %list-reset
  margin-bottom: 0
  margin-left: quarter($spacing-unit) * -1

  > li
    display: inline-block
    padding-left: quarter($spacing-unit)
    padding-right: quarter($spacing-unit)

%list-menu,
.list-menu
  @extend %list-reset
  margin-top: quarter($spacing-unit) * -1

  > li > a
    $link-menu-vertical-size: quarter($spacing-unit) * $link-menu-vertical-ratio
    display: block
    padding: quarter($spacing-unit)
    padding-top: $link-menu-vertical-size + $link-menu-vertical-size * (1 - $link-menu-vertical-ratio)
    padding-bottom: $link-menu-vertical-size - $link-menu-vertical-size * (1 - $link-menu-vertical-ratio)
    border-radius: $border-radius-base
    text-decoration: none

    &:hover
      color: $link-menu-color
      background: $link-menu-background

Disable active effect for list-menu

ul > li, ol > li
  margin-left: $spacing-unit

dl > dt
  font-weight: $font-weight-bold

dd + dt
  margin-top: halve($spacing-unit)

%list-reset,
.list-reset
  padding-left: 0
  list-style: none

  > li
    margin-left: 0

%list-inline,
.list-inline
  @extend %list-reset
  margin-bottom: 0
  margin-left: quarter($spacing-unit) * -1

  > li
    display: inline-block
    padding-left: quarter($spacing-unit)
    padding-right: quarter($spacing-unit)

%list-menu,
.list-menu
  @extend %list-reset
  margin-top: quarter($spacing-unit) * -1

  > li > a
    $link-menu-vertical-size: quarter($spacing-unit) * $link-menu-vertical-ratio
    display: block
    padding: quarter($spacing-unit)
    padding-top: $link-menu-vertical-size + $link-menu-vertical-size * (1 - $link-menu-vertical-ratio)
    padding-bottom: $link-menu-vertical-size - $link-menu-vertical-size * (1 - $link-menu-vertical-ratio)
    border-radius: $border-radius-base
    text-decoration: none

    &:hover
      color: $link-menu-color
      background: $link-menu-background

    @if $link-active
      &:active
        top: 0px


@import compass/layout/stretching

$body-margin-top: 4em
$body-margin-left: 15em
$main-heading-height: 2em
$footer-height: 2em
$sub-top: $body-margin-top - ($main-heading-height + 0.05em)

body
  margin: $body-margin-top 0 0 $body-margin-left

body.has-footer
  margin-bottom: $footer-height + 1em

#main-header
  border-bottom: 0.1em solid #CCC - 10
  background: #CCC
  width: 100%
  height: $main-heading-height - 1em
  padding: 0.5em 0
  position: fixed
  left: 0
  top: 0
  z-index: 3

#side-bar
  border-right: 0.1em solid #CCC - 10
  background: #CCC + 20
  width: $body-margin-left
  position: fixed
  left: 0
  top: $sub-top
  bottom: 0
  z-index: 2

#sub-header,
#footer
  background: #CCC + 20
  height: 1em
  padding: 0.5em 0
  position: fixed
  left: $body-margin-left
  right: 0
  z-index: 1

#sub-header
  top: $sub-top

#footer
  height: $footer-height
  bottom: 0

Tweak the layout to actually show the content properly.

@import compass/layout/stretching

$main-heading-height: 2.5em
$sub-heading-height: 2.5em
$footer-height: 2.5em
$body-margin-top: $main-heading-height + $sub-heading-height
$body-margin-left: 15em

body
  margin: $body-margin-top 0 0 $body-margin-left

body.has-footer
  margin-bottom: $footer-height + 1em

#main-header
  border-bottom: 0.1em solid #CCC - 10
  background: #CCC
  width: 100%
  height: $main-heading-height
  position: fixed
  left: 0
  top: 0
  z-index: 3

#side-bar
  border-right: 0.1em solid #CCC - 10
  background: #CCC + 20
  width: $body-margin-left
  position: fixed
  left: 0
  top: $main-heading-height
  bottom: 0
  z-index: 2

#sub-header,
#footer
  background: #CCC + 20
  position: fixed
  left: $body-margin-left
  right: 0
  z-index: 1

#sub-header
  top: $main-heading-height
  height: $sub-heading-height

#footer
  height: $footer-height
  bottom: 0

#content
  width: 100%
  float: left


.main-container
  padding-bottom: 52px
  padding-top: 55px
  @include clearfix

  > .row,
  .page-header > .row,
  > .content-body > .row
    max-width: 100%

.content-body
  width: 100%
  background-color: #fff
  position: relative
  padding-left: 240px
  float: left
  display: block

  h1, h2, h3, h4, h5, h6
    font-weight: normal
    font-size: 1.8rem

  h2
    font-size: 1.65rem

  h3
    font-size: 1.5rem

  h4
    font-size: 1.375rem

  h5
    font-size: 1.25rem

  h6
    font-size: 1.1rem

  .page-header
    @include clearfix

  .page-header, .page-body
    padding: 10px 20px 0

  .page-body
    padding-bottom: 60px
    & > .row
      margin: 0

      & > .columns
        padding: 0

Update the styling for admin main content section

.main-container
  padding-bottom: 52px
  padding-top: 55px
  @include clearfix

  > .row,
  .page-header > .row,
  > .content-body > .row
    max-width: 100%

  .content-body
    width: 100%
    background-color: #fff
    position: relative
    padding-left: 240px
    float: left
    display: block

    h1, h2, h3, h4, h5, h6
      font-weight: normal
      font-size: 1.8rem

    h2
      font-size: 1.65rem

    h3
      font-size: 1.5rem

    h4
      font-size: 1.375rem

    h5
      font-size: 1.25rem

    h6
      font-size: 1.1rem

    .page-header
      @include clearfix

      .header-action-button
        top: -6px

    .page-header, .page-body
      padding: 10px 20px 0

    .page-body
      padding-bottom: 60px
      & > .row
        margin: 0

        & > .columns
          padding: 0


nav.navbar
  box-shadow: 0 0 5px #888888

  .navbar-brand
    color: white
    font-weight: bold
    font-size: 24px
    background: url(/assets/icons/ontohub3.png) no-repeat
    padding-left: 55px

Make sure nothing is hidden by the bottom bar

body
  padding-bottom: 80px
nav.navbar
  box-shadow: 0 0 5px #888888

  .navbar-brand
    color: white
    font-weight: bold
    font-size: 24px
    background: url(/assets/icons/ontohub3.png) no-repeat
    padding-left: 55px


form#new_task
  .form-control:focus
    z-index: 2

  input[type=text]
    border-top-right-radius: 0
    border-bottom-right-radius: 0
    border-bottom-left-radius: 0

  button[type=submit]
    width: 100px
    border-top-left-radius: 0
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

.list-group-item:first-child
  border-top-left-radius: 0
  border-top-right-radius: 0

.list-group-item.completed span
  color: #a9a9a9
  text-decoration: line-through

.task-description
  &, div, form, input
    display: inline
  input
    margin-left: 10px
    width: 90%
  span
    padding: 10px

Put line only through task description.

form#new_task
  .form-control:focus
    z-index: 2

  input[type=text]
    border-top-right-radius: 0
    border-bottom-right-radius: 0
    border-bottom-left-radius: 0

  button[type=submit]
    width: 100px
    border-top-left-radius: 0
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0

.list-group-item:first-child
  border-top-left-radius: 0
  border-top-right-radius: 0

.list-group-item.completed .task-description span
  color: #a9a9a9
  text-decoration: line-through

.task-description
  &, div, form, input
    display: inline
  input
    margin-left: 10px
    width: 90%
  span
    padding: 10px


html
  background: $body-bg

::selection
  background: $primary-color
  color: white

.flash
  .alert-box
    text-align: center
    margin-bottom: 0

ul.no-style
  list-style: none

.reveal-modal
  border-radius: 4px
  z-index: 101

.reveal-modal-bg
  z-index: 100

.white
  background: white

.clearfix
  +clearfix

.text-padding
  padding: +emCalc(15px)

.text-box
  background-color: white
  border-radius: 4px
  border: 1px solid darken($body-bg, 11%)
  box-shadow: darken($body-bg, 5%) 2px 2px 6px, darken($body-bg, 5%) -2px -2px 6px

.sortable-highlight
  border: 2px dashed $border-color

Add selection color for mozila

html
  background: $body-bg

::selection, ::-moz-selection
  background: $primary-color
  color: white

.flash
  .alert-box
    text-align: center
    margin-bottom: 0

ul.no-style
  list-style: none

.reveal-modal
  border-radius: 4px
  z-index: 101

.reveal-modal-bg
  z-index: 100

.white
  background: white

.clearfix
  +clearfix

.text-padding
  padding: +emCalc(15px)

.text-box
  background-color: white
  border-radius: 4px
  border: 1px solid darken($body-bg, 11%)
  box-shadow: darken($body-bg, 5%) 2px 2px 6px, darken($body-bg, 5%) -2px -2px 6px

.sortable-highlight
  border: 2px dashed $border-color


// overlay
body.layout-overlay
	#videos-grid
		article.video
			padding: 0

			button.cue
				right: 4px

			header
				margin-top: 0
				position: absolute
				top: 0
				left: 0
				padding: 5px
				height: 100%
				width: 100%
				background-color: rgba($white, .8)
				text-shadow: 0 0 2px $white
				opacity: 0
				transition: opacity .3s

				&:hover
				  opacity: 1
				h6
					color: darken($light, 15%)

// sticker
body.layout-sticker
	#videos-grid
		article.video
			padding: 0

			button.cue
				right: 4px

			header
				position: absolute
				top: 0
				left: 0
				padding: 5px
				margin-top: 5px
				max-width: 95%
				background-color: rgba($white, .8)
				box-shadow: 0 0 1rem rgba($black, .3)

				h6
					color: darken($light, 20%)

Fix overlay cue button z-index issue

// overlay
body.layout-overlay
	#videos-grid
		article.video
			padding: 0

			button.cue
				z-index: 1
				right: 4px

				&:hover~header
					opacity: 1

			header
				margin-top: 0
				position: absolute
				top: 0
				left: 0
				padding: 5px
				height: 100%
				width: 100%
				background-color: rgba($white, .8)
				text-shadow: 0 0 2px $white
				opacity: 0
				transition: opacity .3s

				&:hover
				  opacity: 1
				h6
					color: darken($light, 15%)

// sticker
body.layout-sticker
	#videos-grid
		article.video
			padding: 0

			button.cue
				right: 4px

			header
				position: absolute
				top: 0
				left: 0
				padding: 5px
				margin-top: 5px
				max-width: 95%
				background-color: rgba($white, .8)
				box-shadow: 0 0 1rem rgba($black, .3)

				h6
					color: darken($light, 20%)


// Styling from http://flowplayer.org/tools/demos/tooltip/index.html, 19.10.2010
// simple css-based tooltip
.tooltip
  display:none
  background: url(/images/jquery/tooltip/black_arrow.png)
  font-size: 12px
  height: 70px
  width: 160px
  padding: 25px
  color: #fff

.icon-tooltip-popup
  display: none
  background-color: #000
  color: #fff
  border: 1px solid #cc9
  padding: 3px
  font-size: 13px
  -moz-box-shadow: 2px 2px 11px #666
  -webkit-box-shadow: 2px 2px 11px #666

Use box-shadow compass mixin in icon-tooltip-popup.

@import "compass/css3/box-shadow"

// Styling from http://flowplayer.org/tools/demos/tooltip/index.html, 19.10.2010
// simple css-based tooltip
.tooltip
  display:none
  background: url(/images/jquery/tooltip/black_arrow.png)
  font-size: 12px
  height: 70px
  width: 160px
  padding: 25px
  color: #fff

.icon-tooltip-popup
  display: none
  background-color: #000
  color: #fff
  border: 1px solid #cc9
  padding: 3px
  font-size: 13px
  +box-shadow(#666, 2px, 2px, 11px)
j


//= require_self
//= depend_on font-awesome/scss/font-awesome
//= depend_on rdb.issues
//= depend_on rdb.taskboard
//= depend_on rdb.ui.button
//= depend_on rdb.ui.dropdown
//= depend_on rdb.ui.form
//= depend_on rdb.ui.nav
//= depend_on rdb.ui.tabs
//= depend_on rdb.ui.theme

#content
  padding: 0

$fa-font-path: 'font-awesome/fonts'
@import 'font-awesome/scss/font-awesome'

@import 'rdb.ui.button'
@import 'rdb.ui.dropdown'
@import 'rdb.ui.theme'

#redmine-dashboard
  background: #fff

  &.rdb-fullscreen
    z-index: 9999999999999999999999
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0

  *
    box-sizing: border-box

  a
    cursor: pointer

    &:focus, &:hover
      text-decoration: none

  .rdb-clear
    clear: both

  > header
    padding: 5px
    border-bottom: 1px solid #ccc

    h1, h2
      margin: 0
      float: left

    span.options
      float: right

  @import 'rdb.issues'
  @import 'rdb.taskboard'

Drop depend_on directives not longer neccessary

//= require_self

#content
  padding: 0

$fa-font-path: 'font-awesome/fonts'
@import 'font-awesome/scss/font-awesome'

@import 'rdb.ui.button'
@import 'rdb.ui.dropdown'
@import 'rdb.ui.theme'

#redmine-dashboard
  background: #fff

  &.rdb-fullscreen
    z-index: 9999999999999999999999
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0

  *
    box-sizing: border-box

  a
    cursor: pointer

    &:focus, &:hover
      text-decoration: none

  .rdb-clear
    clear: both

  > header
    padding: 5px
    border-bottom: 1px solid #ccc

    h1, h2
      margin: 0
      float: left

    span.options
      float: right

  @import 'rdb.issues'
  @import 'rdb.taskboard'


*
  box-sizing: border-box
  font-size: 50px
  font-family: monospace

html, body
  height: 100%
  overflow: hidden

$prompt-width: 50px

.prompt
  width: $prompt-width
  color: gray
  padding-right: 0

.response
  white-space: pre-wrap
  padding: $prompt-width $prompt-width/2

.prompt, input[type=text]
  height: 100px
  padding: 10px

.game-manual
  dt, dd, em, strong
    font-size: 20px

  dt
    font-weight: bold
    margin-top: -65px

  dd
    margin-top: -85px
    margin-left: 1.5em

output
  position: absolute
  top: 0
  bottom: 100px
  left: 0
  right: 0
  overflow: auto

ul
  list-style-type: square
  margin: 0
  padding: 0
  margin-left: 1.5em

form
  position: absolute
  bottom: 0
  left: 0

input[type=text]
  width: calc(100%  - #{$prompt-width})
  padding-left: 0
  margin-left: 0
  border: none

  &:focus
    outline: none

.error
  color: red

Remove some completely random margins

*
  box-sizing: border-box
  font-size: 50px
  font-family: monospace

html, body
  height: 100%
  overflow: hidden

$prompt-width: 50px

.prompt
  width: $prompt-width
  color: gray
  padding-right: 0

.response
  white-space: pre-wrap
  padding: $prompt-width $prompt-width/2

.prompt, input[type=text]
  height: 100px
  padding: 10px

.game-manual
  dt, dd, em, strong
    font-size: 20px

  dt
    font-weight: bold

  dd
    margin-left: 1.5em

output
  position: absolute
  top: 0
  bottom: 100px
  left: 0
  right: 0
  overflow: auto

ul
  list-style-type: square
  margin: 0
  padding: 0
  margin-left: 1.5em

form
  position: absolute
  bottom: 0
  left: 0

input[type=text]
  width: calc(100%  - #{$prompt-width})
  padding-left: 0
  margin-left: 0
  border: none

  &:focus
    outline: none

.error
  color: red


html
  width: 100%
  height: 100%
  margin: 0

body
  height: inherit
  margin: 0

  background-color: $dark-blue

#container
  height: 100%
  margin: 0 80px
  padding: 0 30px

  background-color: $blue-gray

  font-family: 'Roboto Slab', serif
  color: $light-yellow

.hidden
  display: none

Use em instead of pixel size if possible.

html
  width: 100%
  height: 100%
  margin: 0

body
  height: inherit
  margin: 0

  background-color: $dark-blue

#container
  height: 100%
  margin: 0 6em
  padding: 0 2em

  background-color: $blue-gray

  font-family: 'Roboto Slab', serif
  color: $light-yellow

.hidden
  display: none


.autocomplete__results
  @extend %heading-size-type
  margin-top: 10px

.autocomplete__result
  @extend %left-icon
  color: #fff
  display: block
  padding: 5px 10px 5px 45px
  &:before
    +font-size(45)
    line-height: 0
    top: 10px
    left: 10px

.autocomplete__result--place
  @extend %local-marker-before

.autocomplete__result--hotel
  @extend %icon-image-poi-hotel-before

.autocomplete__result--flight
  @extend %icon--flights-before

.autocomplete__result--article
  @extend %icon-poi-article-before

.autocomplete__result--sight
  @extend %icon-image-poi-sight-before

.autocomplete__result--activity
  @extend %icon-image-poi-activity-before

.autocomplete__result--tour
  @extend %icon-image-poi-tour-before

// TODO: icon to come
// .autocomplete__result--publication

.autocomplete__result--highlight
  font-weight: bold

Add bottom margin to results list

.autocomplete__results
  @extend %heading-size-type
  margin: 15px 0

.autocomplete__result
  @extend %left-icon
  color: #fff
  display: block
  padding: 5px 10px 5px 45px
  &:before
    +font-size(45)
    line-height: 0
    top: 10px
    left: 10px

.autocomplete__result--place
  @extend %local-marker-before

.autocomplete__result--hotel
  @extend %icon-image-poi-hotel-before

.autocomplete__result--flight
  @extend %icon--flights-before

.autocomplete__result--article
  @extend %icon-poi-article-before

.autocomplete__result--sight
  @extend %icon-image-poi-sight-before

.autocomplete__result--activity
  @extend %icon-image-poi-activity-before

.autocomplete__result--tour
  @extend %icon-image-poi-tour-before

// TODO: icon to come
// .autocomplete__result--publication

.autocomplete__result--highlight
  font-weight: bold


// *************************************
//
//   Byline
//   -> Article meta information
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .byline[.byline--modifier](.is-state)(.has-context)
//   .byline-main
//     .byline-author
//   .byline-secondary
//
// *************************************

.byline
  background: rgba($c-highlight, 0.8)
  color: $c-text-invert
  +respond-to($g-m)
    display: flex

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Author ----- //

.byline-author
  border-right: 2px solid $c-text-invert
  display: inline-block
  margin-right: $b-space-xs
  padding-right: $b-space-s

// ----- Main ----- //

.byline-main
  background: $c-highlight
  box-sizing: border-box
  padding: $b-space-s

// ----- Secondary ----- //

.byline-secondary
  padding: $b-space-s
  +respond-to($g-m)
    flex-grow: 1
    text-align: right

Add Byline responsive styles for small screens

// *************************************
//
//   Byline
//   -> Article meta information
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .byline[.byline--modifier](.is-state)(.has-context)
//   .byline-main
//     .byline-author
//   .byline-secondary
//
// *************************************

.byline
  background: rgba($c-highlight, 0.8)
  color: $c-text-invert
  +respond-to($g-m)
    display: flex

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Author ----- //

.byline-author
  +respond-to($g-s, 'max-width')
    margin-bottom: $b-space-xs
  +respond-to($g-s)
    display: inline-block
    border-right: 2px solid $c-text-invert
    margin-right: $b-space-xs
    padding-right: $b-space-s

// ----- Main ----- //

.byline-main
  background: $c-highlight
  box-sizing: border-box
  padding: $b-space-s

// ----- Secondary ----- //

.byline-secondary
  padding: $b-space-s
  +respond-to($g-m)
    flex-grow: 1
    text-align: right


a
  color: $link-color

  transition: all, 0.4s

  &:hover
    color: $link-color-hover

    text-decoration: none

h1
  font-size: 2.2em
  font-size: 2.2rem
  color: darken($text-color, 10%)

h2
  font-size: 2em
  font-size: 2rem

  color: darken($text-color, 6%)

h3
  font-size: 1.8em
  font-size: 1.8rem

Add font-size on body and up font-size on h1.

body
  font-size: 1.22em
  font-size: 1.22rem

a
  color: $link-color

  transition: all, 0.4s

  &:hover
    color: $link-color-hover

    text-decoration: none

h1
  font-size: 2.90em
  font-size: 2.90rem

  color: darken($text-color, 10%)

h2
  font-size: 2em
  font-size: 2rem

  color: darken($text-color, 6%)

h3
  font-size: 1.8em
  font-size: 1.8rem


body[data-controller="static"]
  @media (min-width: 768px)
    img.publishers-synopsis
      margin-left: -46px !important
  img.publishers-synopsis
    margin: 10px 0
    max-width: 692px
    width: 100%

Adjust landing splash a little

body[data-controller="static"]
  @media (min-width: 768px)
    img.publishers-synopsis
      margin-left: -54px !important
  img.publishers-synopsis
    margin: 5px 0
    max-width: 692px
    width: 100%


// Sass Modules
// ––––––––––––––––––––––––––––––––––––––––––––––––––

@import Color
@import Base
@import Blockquote
@import Button
@import Code
@import Divider
@import Form
@import Grid
@import Link
@import List
@import Spacing
@import Table
@import Typography
@import Image
@import Utility

Update the main sass file

// Modules
// ––––––––––––––––––––––––––––––––––––––––––––––––––

@import _Color
@import _Base
@import _Blockquote
@import _Button
@import _Code
@import _Divider
@import _Form
@import _Grid
@import _Link
@import _List
@import _Spacing
@import _Table
@import _Typography
@import _Image
@import _Utility


@import base
@import modules/header
@import modules/footer

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

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

.wrap
  +clearfix
  margin: 1em 0

#home
  @mixin a-social
    // color: #000
    font-weight: bold
    line-height: 3em
    min-height: 3em
    text-decoration: none
    &:focus, &:hover
      color: #fff
      background: $link_color

  p
    margin: 0 0 1.8em
    &:last-of-type
      margin: 0 0 1em

  img
    float: left
    margin: 0 1em 0 0

  ul
    float: left

  li
    $social_gutter: 10px

    float: left
    width: $max_width / 3 - $social_gutter
    margin: 0 $social_gutter 0 0
    &, a
      display: block

  a
    @include a-social
  span
    font-family: FontAwesome
    font-size: 2em
    margin: 0 0.3em

  .email
    @extend .icon-envelope-alt

  .twitter
    @extend .icon-twitter

  .github
    @extend .icon-github

Move home page styles to its own file.

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

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

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

.wrap
  +clearfix
  margin: 1em 0

section
  h1, h2
    font-family: "Linux Libertine"

  h1
    font-size: 2em
    text-align: center


+block(status)
  font-weight: bold

  +modifier(ok)
    color: $app-color-green

  +modifier(success)
    color: $app-color-green

  +modifier(approved)
    color: $app-color-green

  +modifier(critical)
    color: $app-color-pink

  +modifier(danger)
    color: $app-color-pink

  +modifier(rejected)
    color: $app-color-pink

  +modifier(error)
    color: $app-color-pink

  +modifier(warning)
    color: $app-color-orange

  +modifier(unknown)
    color: $app-color-blue

  +modifier(undecided)
    color: $app-color-blue

  +modifier(info)
    color: $app-color-blue

  +modifier(pending)
    color: $app-color-orange

  +modifier(working)
    color: $app-color-green

  +modifier(completed)
    color: $app-color-green

  +modifier(failed)
    color: $app-color-pink

Change Pending order status from orange to black

+block(status)
  font-weight: bold

  +modifier(ok)
    color: $app-color-green

  +modifier(success)
    color: $app-color-green

  +modifier(approved)
    color: $app-color-green

  +modifier(critical)
    color: $app-color-pink

  +modifier(danger)
    color: $app-color-pink

  +modifier(rejected)
    color: $app-color-pink

  +modifier(error)
    color: $app-color-pink

  +modifier(warning)
    color: $app-color-orange

  +modifier(unknown)
    color: $app-color-blue

  +modifier(undecided)
    color: $app-color-blue

  +modifier(info)
    color: $app-color-blue

  +modifier(working)
    color: $app-color-green

  +modifier(completed)
    color: $app-color-green

  +modifier(failed)
    color: $app-color-pink


=vertical-align
  position: absolute
  top: 50%
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)
  transform: translateY(-50%)

=triangle($top, $right, $bottom, $left, $color)
  width: 0
  height: 0
  border-top: $top solid transparent
  border-right: $right solid $color
  border-bottom: $bottom solid transparent
  border-left: $left solid $color

+font-face("Lato", "../fonts/lato/Lato-Regular", $file-formats: ttf)
+font-face("Lato", "../fonts/lato/Lato-Bold", bold, $file-formats: ttf)
+font-face("Lato", "../fonts/lato/Lato-Italic", normal, italic, $file-formats: ttf)
+font-face("Lato", "../fonts/lato/Lato-BoldItalic", bold, italic, $file-formats: ttf)

+font-face("Lobster", "../fonts/lobster/Lobster", null, null, $file-formats: otf)

Remove the no longer used Lobster font from CSS declarations


.fade-overflow:before
    content: ''
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: linear-gradient(transparent calc($thread-height - 20px), $grey)
    overflow: hidden

.fade-overflow
    position: relative

.image-blur
	filter: blur(2px)
	transition: filter 0.25s ease-out

Add helper class .hidden + experiment with .image-loading

.fade-overflow:before
    content: ''
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: linear-gradient(transparent calc($thread-height - 20px), $grey)
    overflow: hidden

.fade-overflow
    position: relative

.image-loading
    filter: blur(2px)

    &::after
        content: ""
        +center(100%, 100%)
        z-index: 2
        background-color: $white
        opacity: 0.6

.hidden
    display: none


@import ../../vendor/lib

// -------------------------------------
// UserStats

.UserStats dl
  display: inline-block
.UserStats dl + dl
  margin-left: 8%

.UserStats dt
  +sans-bold-family

.UserStats dd
  display: block
  transition: color $speed ease
  border-bottom: 1px solid
  color: #999
  line-height: 1

.UserStatsLink.active dd,
.no-touch .UserStatsLink:not(.asDisabled):hover dd
  color: black

// Temporary disable a few of these buttons
.UserStatsLink.asDisabled
  pointer-events: none !important

// -------------------------------------
// UserNames

.UserName,
.UserUsername
  +ellipse

.UserUsername
  font-size: rem(18)

.no-touch .UserUsername > a:hover
  color: #666

.UserName
  color: #999

@media(min-width: #{$break-2})
  .UserUsername
    font-size: rem(24)

// -------------------------------------
// UserInfo

.UserExternalLinks
  margin-left: rem(-10)
  color: #999
  word-wrap: break-word

.UserExternalLinks > a
  margin-left: rem(10)

.no-touch .UserExternalLinks > a:hover
  color: black

Add word wrapping for long Bios without a space

@import ../../vendor/lib

// -------------------------------------
// UserStats

.UserStats dl
  display: inline-block
.UserStats dl + dl
  margin-left: 8%

.UserStats dt
  +sans-bold-family

.UserStats dd
  display: block
  transition: color $speed ease
  border-bottom: 1px solid
  color: #999
  line-height: 1

.UserStatsLink.active dd,
.no-touch .UserStatsLink:not(.asDisabled):hover dd
  color: black

// Temporary disable a few of these buttons
.UserStatsLink.asDisabled
  pointer-events: none !important

// -------------------------------------
// UserNames

.UserName,
.UserUsername
  +ellipse

.UserUsername
  font-size: rem(18)

.no-touch .UserUsername > a:hover
  color: #666

.UserName
  color: #999

@media(min-width: #{$break-2})
  .UserUsername
    font-size: rem(24)

// -------------------------------------
// UserInfo

.UserShortBio
  word-break: break-word

// -------------------------------------
// UserInfo

.UserExternalLinks
  margin-left: rem(-10)
  color: #999
  word-wrap: break-word

.UserExternalLinks > a
  margin-left: rem(10)

.no-touch .UserExternalLinks > a:hover
  color: black


@import compass/typography

body
  font-family: $default-font-family
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

a
  color: $link-color
  &:visited
    color: $link-visited-color
  &:hover,
  &:focus
    color: $link-hover-color
  &:active
    color: $link-active-color

#content
  h3,
  th
    font-family: $alternate-font-family

  h3
    font-family: $alternate-font-family
    color: $dark-grey
    font-size: 1.2em
    text-transform: uppercase
    letter-spacing: 0.02em
    margin-bottom: 0.6em
    width: 100%
    float: left

Apply some space to the description text (product descriptions, blog entries, etc)

@import compass/typography

body
  font-family: $default-font-family
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

a
  color: $link-color
  &:visited
    color: $link-visited-color
  &:hover,
  &:focus
    color: $link-hover-color
  &:active
    color: $link-active-color

#content
  h3,
  th
    font-family: $alternate-font-family

  h3
    font-family: $alternate-font-family
    color: $dark-grey
    font-size: 1.2em
    text-transform: uppercase
    letter-spacing: 0.02em
    margin-bottom: 0.6em
    width: 100%
    float: left

  p, li
    margin-bottom: 1.2em


// Available $project types, define these in your project.
// 'web'
//      - 'epatient'
// 'edetail'

// The following function is a monkey patch of the core version.
// I have rasised a ticket to get it fixed https://github.com/chriseppstein/compass/issues/1426
// When the fix is in a release then remove this.

// Check whether the browser is supported according to the declared minimum support
// and usage thresholds.
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold)
    // Check if the browser should be supported
    @if index($supported-browsers, $browser) == false
        @return false
    @else
        // Check agaist usage stats and declared minimums
        $min-required-version: map-get($browser-minimum-versions, $browser)
        $usage: if($max-version, omitted-usage($browser, $min-version, $max-version), omitted-usage($browser, $min-version))
        @return $usage > $threshold or ($min-required-version and compare-browser-versions($browser, $max-version or $min-version, $min-required-version) >= 0)

// eDetails are developed exclusively on OSX 10.9+
// Webkit browsers are used in development and deployment is
// currently iOS5+
@if $project == 'edetail'
    $supported-browsers: ("chrome", "ios-safari", "safari") !global
    $browser-minimum-versions: ("chrome": "29", "ios-safari": "5.0-5.1", "safari": "7") !global

@if $project == 'web'
    $browser-minimum-versions: (ie: '7')

Remove monkey patch which is now fixed in compass

// Available $project types, define these in your project.
// 'web'
//      - 'epatient'
// 'edetail'

// eDetails are developed exclusively on OSX 10.9+
// Webkit browsers are used in development and deployment is
// currently iOS5+
@if $project == 'edetail'
    $supported-browsers: ("chrome", "ios-safari", "safari") !global
    $browser-minimum-versions: ("chrome": "29", "ios-safari": "5.0-5.1", "safari": "7") !global

@if $project == 'web'
    $browser-minimum-versions: (ie: '7')


#systems-documentation-view
  background-color: #e4cf8c
  height: 100%

  #toggle-all-system-code
    margin: 10px

  .container, .row
    height: 100%

  .index-column, .documentation-column
    overflow-x: hidden

    > ul
      padding: 0px 20px 20px 20px

    .doc-name
      color: rgb(139, 69, 19)

  .index-column
    width: 25%

  .documentation-column
    width: 75%

    .special-list, .doc-description, .code-block
      list-style-type: none

Fix systems documentation tab background

#systems-documentation-view
  background-color: #e4cf8c
  height: calc(100% - 90px)

  #toggle-all-system-code
    margin: 10px

  .container, .row
    height: 100%

  .index-column, .documentation-column
    overflow-x: hidden

    > ul
      padding: 0px 20px 20px 20px

    .doc-name
      color: rgb(139, 69, 19)

  .index-column
    width: 25%

  .documentation-column
    width: 75%

    .special-list, .doc-description, .code-block
      list-style-type: none


body
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: black

@mixin vertical-align
  position: relative
  top: 50%
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)
  transform: translateY(-50%)

a
  color: #00B7FF

.player_list
  background-color: red

.history
  background-color: blue

.dice
  background-color: gray

.dice img
  user-select: none
  cursor: pointer

.unselected
  opacity: 0.1

$resultDiceSize: 50px

img.die-background
  height: $resultDiceSize
  position: absolute

.die-side
  width: $resultDiceSize
  height: $resultDiceSize
  display: inline-block

img.die-result
  height: $resultDiceSize / 2.3
  position: relative
  text-align: center
  display: block
  margin: auto auto

.die-result-wrap-difficulty img.die-result
  height: $resultDiceSize / 2.8
  position: relative
  top: -2px

.die-result-wrap-challenge img.die-result
  height: $resultDiceSize / 2.4
  position: relative
  left: -1px
  top: -1px

.die-result-wrap
  @include vertical-align()

Improve css for dice results in case of y-overflowing

body
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
  color: black

@mixin vertical-align
  position: relative
  top: 50%
  -webkit-transform: translateY(-50%)
  -ms-transform: translateY(-50%)
  transform: translateY(-50%)

a
  color: #00B7FF

.player_list
  background-color: red

.history
  background-color: antiquewhite
  overflow-y: scroll
  height: 200px

.dice
  background-color: gray

.dice img
  user-select: none
  cursor: pointer

.unselected
  opacity: 0.1

$resultDiceSize: 50px

img.die-background
  height: $resultDiceSize
  position: absolute

.die-side
  width: $resultDiceSize
  height: $resultDiceSize
  display: inline-block
  position: relative

img.die-result
  height: $resultDiceSize / 2.3
  position: relative
  text-align: center
  display: block
  margin: auto auto

.die-result-wrap-difficulty img.die-result
  height: $resultDiceSize / 2.8
  position: relative
  top: -2px

.die-result-wrap-challenge img.die-result
  height: $resultDiceSize / 2.4
  position: relative
  left: -1px
  top: -1px

.die-result-wrap
  @include vertical-align()


.author
  border-style: solid
  border-width: 0.1rem
  border-radius: $input-border-radius
  border-color: gray
  padding: 0.2rem 0.2rem 0.2rem 0.2rem
  h2
    font-size: normal
    font-weight: normal
    margin-top: 0rem
    margin-bottom: 0rem
    margin-left: 0.5rem
    strong
      font-size: small
      font-weight: normal
      padding: 0.2rem 0.2rem 0.2rem 0.2rem
      color: white
      background-color: gray
      border-radius: $input-border-radius

  p
    margin-top: 0rem
    margin-bottom: 0rem
    margin-left: 1rem

Use flex container to display author photo

.author
  border-style: solid
  border-width: 0.1rem
  border-radius: $input-border-radius
  border-color: gray
  padding: 0.2rem 0.2rem 0.2rem 0.2rem
  +flex-container(horizontal)

  &__photo
    +flex(0 0 rem(80))
    height: rem(80)
    margin-right: 1rem

  h2
    font-size: normal
    font-weight: normal
    margin-top: 0rem
    margin-bottom: 0rem
    margin-left: 0.5rem
    strong
      font-size: small
      font-weight: normal
      padding: 0.2rem 0.2rem 0.2rem 0.2rem
      color: white
      background-color: gray
      border-radius: $input-border-radius

  p
    margin-top: 0rem
    margin-bottom: 0rem
    margin-left: 1rem


@import url('//fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i')

$baseFont: 'Lato'

$fontWeight: (
  normal: 400,
  bold: 700,
  bolder: 900
)

Fix lint warning, SASS diff to SCSS and remove useless (for now) font variations

//sass-lint:disable no-url-domains no-url-protocols

@import url('//fonts.googleapis.com/css?family=Lato:400,700,900')

$base-font: 'Lato'

$font-weight: (normal: 400, bold: 700, bolder: 900)


.detail-post-title
  margin-top: 40px

.detail-post-date
  font-size: 1.1em

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

Adjust styles for detail page

.detail-post-title
  color: darken($medium-gray, 30%)
  font-size: 2em
  margin-top: .4em
  margin-bottom: .4em

.detail-post-topic-list
  font-size: 1.2em
  color: $medium-gray

.detail-post-date
  font-size: 1.1em

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


#contents
	section
		:display flex
		:align-items flex-start
		:width 100%

	.wrapper
		:flex .7

		> *:not( :last-child )
			:margin-bottom spacing( 2 )

	.icon
		:align-self flex-end
		:flex .3

	li
		a, span
			:margin-left spacing()

	+media( max-width $width )
		:flex-direction column

		.icon
			:align-self center
			:margin-top spacing( 2 )
			:max-width 20rem
			:width 75%

Fix home page responsive design

#contents
	section
		:display flex
		:align-items flex-start
		:width 100%

		+media( max-width $width )
			:flex-direction column

			.icon
				:align-self center
				:margin-top spacing( 2 )
				:max-width 20rem
				:width 75%

	.wrapper
		:flex .7

		> *:not( :last-child )
			:margin-bottom spacing( 2 )

	.icon
		:align-self flex-end
		:flex .3

	li
		a, span
			:margin-left spacing()


@import branding
@import mixins

// Styling for brand intro / tagline on homepage

#tagline
  background-color: black
  background-image: url("/assets/home/tagline-bg.jpg")
  @include fullbg
  height: 500px
  padding: 40px 0px
  h1, h2, span, small, timer
    color: white
  p
    color: $clr-brick-light
  h1
    margin-bottom: 3rem
  h2
    font-size: 1.6875rem
    max-width: 610px
    margin: 0 auto
    padding-bottom: 0.5rem

  a
    color: $clr-brick-bright
    &:hover, &:active, &:focus
      color: $clr-brick-light-bright
      @include textsoftpress
  a.button.primary
    color: white

Tweak background style for entry point to site

@import branding
@import mixins

// Styling for brand intro / tagline on homepage

#tagline
  background-color: black
  background-image: url("/assets/home/ofn_bg_1.jpg")
  @include fullbg
  height: 500px
  padding: 40px 0px
  h1, h2, span, small, timer
    color: white
  p
    color: $clr-brick-light
  h1
    margin-bottom: 3rem
  h2
    font-size: 1.6875rem
    max-width: 610px
    margin: 0 auto
    padding-bottom: 0.5rem

  a
    color: white
    &:hover, &:active, &:focus
      color: $clr-brick-light-bright
      @include textsoftpress
  a.button.primary
    color: white


.footer
    background-color: $color-theme-4
    color: $color-grey-1
    font-size: 0.75rem
    position: absolute
    bottom: 0
    width: 100%

    .wrapper
        padding: 1rem

    a
        border-bottom: 1px dotted
        color: $color-grey-3
        text-decoration: none

    a:hover
        border-bottom: 1px solid
        color: $color-main-background

    .links
        list-style-type: none
        margin: 0 auto 0.5rem
        text-align: center

    p
        text-align: center

    .notice
        display: block

    .last-build
        margin-bottom: 0

    @media only screen and (min-width: $screen-width-s)
        .links
            list-style-type: none
            margin: 0 auto 0.5rem
            text-align: center

        li
            display: inline-block

        li::after
            content: "\00b7"
            margin: 0 0.25rem 0 0.5rem

        li:last-child::after
            content: ""
            margin: 0

    @media only screen and (min-width: 30em)
        .links
            float: right
            text-align: right

            li
                display: block

            li::after
                content: ""
                margin: 0

        p
            text-align: left

        .notice
            display: inline

Use Variable for Screen Width instead of Fixed Value

.footer
    background-color: $color-theme-4
    color: $color-grey-1
    font-size: 0.75rem
    position: absolute
    bottom: 0
    width: 100%

    .wrapper
        padding: 1rem

    a
        border-bottom: 1px dotted
        color: $color-grey-3
        text-decoration: none

    a:hover
        border-bottom: 1px solid
        color: $color-main-background

    .links
        list-style-type: none
        margin: 0 auto 0.5rem
        text-align: center

    p
        text-align: center

    .notice
        display: block

    .last-build
        margin-bottom: 0

    @media only screen and (min-width: $screen-width-s)
        .links
            list-style-type: none
            margin: 0 auto 0.5rem
            text-align: center

        li
            display: inline-block

        li::after
            content: "\00b7"
            margin: 0 0.25rem 0 0.5rem

        li:last-child::after
            content: ""
            margin: 0

    @media only screen and (min-width: $screen-width-m)
        .links
            float: right
            text-align: right

            li
                display: block

            li::after
                content: ""
                margin: 0

        p
            text-align: left

        .notice
            display: inline


@import "modules/globals"

.search-result-panel
  position: absolute
  left: 0px
  right: 0px
  top: 0px
  bottom: $header_h
  background: url("/images/header/search_48x.svg") #f5f5f5
  background-size: 50%
  background-repeat: no-repeat
  background-position: center
  overflow-y: scroll
  .posts
    position: absolute
    left: 0px
    right: 0px
    bottom: 0px
    max-height: 100%
    .post-list
      padding-top: 8px

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
  .search-result-panel
    .posts
      max-height: 50%

Hide search panel by default

@import "modules/globals"

.search-result-panel
  display: hidden
  position: absolute
  left: 0px
  right: 0px
  top: 0px
  bottom: $header_h
  background: url("/images/header/search_48x.svg") #f5f5f5
  background-size: 50%
  background-repeat: no-repeat
  background-position: center
  overflow-y: scroll
  .posts
    position: absolute
    left: 0px
    right: 0px
    bottom: 0px
    max-height: 100%
    .post-list
      padding-top: 8px

@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
  .search-result-panel
    .posts
      max-height: 50%


@import partials/content/invoice
@import partials/content/accounting

// Overview
// ========
ul.overview-list.level-1 >li
  min-height: 11em

+overview-icon-48("store")
+overview-icon-48("accounting")
+overview-icon-48("invoicing")
+overview-icon-48("basic_claims_data")
+overview-icon-48("settings")
+overview-icon-48("nav_users")
+overview-icon-48("contacts")

// Icons
// =====
// Actions
+icon-text("new", "add")
+icon-text("copy")
+icon-class("new", "add")
+icon-class("copy")
+icon-class("only_credit_bookings", "filter")
+icon-class("only_debit_bookings", "filter")
+icon-class("all_bookings", "filter")
+icon-class("print")

// MIME-types
+icon-class("pdf", "pdf")

// tables
table.list
  th, td
    padding: 1px 4px
  th
    font-size: 120%
    font-weight: bolder

// Alternating row
table.list
  tr.odd
    background-color: #ffffee

Drop app specific table styling.


@import "~style/utils/variables.sass"
@import "~style/utils/mixins.sass"

.loading-more-events-wrapper
  padding: 50px

.container
  background-color: $main-medium-gray

  .filters-wrapper
    width: 100%
    height: $event-filters-height
    background-color: $main-white
    position: fixed
    top: $header-height
    z-index: 1
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.6)

  .load-more-btn
    text-align: center
    padding: 30px 0

    button
      @include button($main-green, $main-white, $main-green)
      text-transform: uppercase
      font-size: 1em

Fix flashing on filter change

@import "~style/utils/variables.sass"
@import "~style/utils/mixins.sass"

.loading-more-events-wrapper
  padding: 50px

.container
  background-color: $main-medium-gray
  min-height: 100vh

  .filters-wrapper
    width: 100%
    height: $event-filters-height
    background-color: $main-white
    position: fixed
    top: $header-height
    z-index: 1
    box-shadow: 0px 2px 3px -1px rgba(0,0,0,0.6)

  .load-more-btn
    text-align: center
    padding: 30px 0

    button
      @include button($main-green, $main-white, $main-green)
      text-transform: uppercase
      font-size: 1em


.Markdown
    background-color: #36393E
    padding-left: 16px
    color: whitesmoke
    font-family: Lato, sans-serif
    overflow: auto
    a
        color: lightskyblue
    p, td
        color: #cacaca
    code
        background-color: #565d65
        padding: 8px
        display: block
    pre > code
        border: 2px solid #44494f
        border-radius: 6px
    p > code
        display: inline
        padding: 2px
        border-radius: 4px
    table
        border: white
    tbody
        background-color: #3c4046
        tr:nth-child(odd)
            background-color: #33363b
    th
        background-color: #4b5058
        font-size: 18px
        padding: 6px
    li > p
        margin: 4px

.content
    max-width: 50em

.Loading > div
    margin-top: 25vh !important
    width: 80px !important
    height: 80px !important

.Loading > div > svg > circle
    animation: dash 1.5s ease-in-out infinite !important
    stroke: white !important

Add more space to the table rows

.Markdown
    background-color: #36393E
    padding-left: 16px
    color: whitesmoke
    font-family: Lato, sans-serif
    overflow: auto
    a
        color: lightskyblue
    p, td
        color: #cacaca
    code
        background-color: #565d65
        padding: 8px
        display: block
    pre > code
        border: 2px solid #44494f
        border-radius: 6px
    p > code
        display: inline
        padding: 2px
        border-radius: 4px
    table
        border: white
    tbody
        background-color: #3c4046
        tr:nth-child(odd)
            background-color: #33363b
    td
        padding: 4px 4px 4px 8px
    th
        background-color: #4b5058
        font-size: 18px
        padding: 6px
    li > p
        margin: 4px

.content
    max-width: 50em

.Loading > div
    margin-top: 25vh !important
    width: 80px !important
    height: 80px !important

.Loading > div > svg > circle
    animation: dash 1.5s ease-in-out infinite !important
    stroke: white !important


.twitter-typeahead, .tt-hint, .tt-input, .tt-menu
    width: 100%

.search, .tt-hint, .tt-input
    display: block !important

Work around an issue with Vue scoped styles

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu
    width: 100%

.search, .tt-hint, .tt-input
    display: block !important

// Workaround for Vue scoped styles not applying in production env
// TODO: Figure out why Vue scoped styles don't work
// Similar issue as this: https://forum.vuejs.org/t/styles-ignored-in-production/29298/4
.vbt-autcomplete-list
  max-height: 350px
  overflow-y: auto
  padding-top: 5px
  position: absolute
  z-index: 999


#new-user-question
  textarea
    width: 520px
    min-height: 200px
.ask-question.bootstrap-twitter
  margin-top: 10px
  display: block
  float: none
  a.ask-question-button.btn
    color: white !important

Add margin bottom on ask a question button

#new-user-question
  textarea
    width: 520px
    min-height: 200px
.ask-question.bootstrap-twitter
  margin-top: 10px
  margin-bottom: 20px
  display: block
  float: none
  a.ask-question-button.btn
    color: white !important


.widget-box
  border: 1px #ccc solid
  border-radius: 5px
  margin-top: 20px

  .form-group
    padding: 0 10px

  h2
    background-color: #f4f4f4
    border-bottom: 1px #ccc solid
    font-size: 1.2rem !important
    font-weight: normal
    margin: 0 0 15px
    padding: 8px 10px
    border-radius: 5px 5px 0 0

  &:first-child
    margin-top: 0

  p
    margin-bottom: 10px

  label
    margin-bottom: 0

  .widget-buttons
    background-color: #e4e4e4
    border-top: 1px #ccc solid
    height: 51px
    padding-top: 10px
    border-radius: 0 0 5px 5px

    .secondary
      background-color: #bbb
      color: #fff

      &:hover
        background-color: #aaa !important

    .hide
      display: none

  .widget-buttons-bottom
    margin-bottom: 0

    a
      position: relative
      top: 6px

Add margin bottom 0 to widget form group

.widget-box
  border: 1px #ccc solid
  border-radius: 5px
  margin-top: 20px

  .form-group
    margin-bottom: 0
    padding: 0 10px

  h2
    background-color: #f4f4f4
    border-bottom: 1px #ccc solid
    font-size: 1.2rem !important
    font-weight: normal
    margin: 0 0 15px
    padding: 8px 10px
    border-radius: 5px 5px 0 0

  &:first-child
    margin-top: 0

  p
    margin-bottom: 10px

  label
    margin-bottom: 0

  .widget-buttons
    background-color: #e4e4e4
    border-top: 1px #ccc solid
    height: 51px
    padding-top: 10px
    border-radius: 0 0 5px 5px

    .secondary
      background-color: #bbb
      color: #fff

      &:hover
        background-color: #aaa !important

    .hide
      display: none

  .widget-buttons-bottom
    margin-bottom: 0

    a
      position: relative
      top: 6px


.reports_kit_report
  width: 100%
  padding: 1px
  canvas
    width: 100%
  .select2
    width: 200px
  .date_range_picker
    width: 170px

Increase width of date picker input

.reports_kit_report
  width: 100%
  padding: 1px
  canvas
    width: 100%
  .select2
    width: 200px
  .date_range_picker
    width: 180px


article.component-timeline
  .inner
    [data-slick-carousel]
      margin-top: 50px

      .slick-prev,
      .slick-next
        &:before
          color: black

      .slick-prev
        left: -15px

      .slick-next
        right: -15px

    // Nested components
    article[class^="component-"]
      padding: 0 20px

      h1
        font-size: 24px
        margin-bottom: 35px

    .nav-slider
      display: none

  .inner[min-width~="690px"]
    .nav-slider
      display: block
      width: 90%
      left: 5%
      margin-top: 100px

      .years
        position: relative
        width: 100%
        margin-left: -30px
        margin-top: -45px

        .year
          position: absolute
          width: 60px
          text-align: center
          cursor: pointer

Update Timeline CSS - Adjust gallery margin-top on XS

article.component-timeline
  .inner
    [data-slick-carousel]
      margin-top: 20px

      .slick-prev,
      .slick-next
        &:before
          color: black

      .slick-prev
        left: -15px

      .slick-next
        right: -15px

    // Nested components
    article[class^="component-"]
      padding: 0 20px

      h1
        font-size: 24px
        margin-bottom: 35px

    .nav-slider
      display: none

  .inner[min-width~="690px"]
    [data-slick-carousel]
      margin-top: 50px

    .nav-slider
      display: block
      width: 90%
      left: 5%
      margin-top: 100px

      .years
        position: relative
        width: 100%
        margin-left: -30px
        margin-top: -45px

        .year
          position: absolute
          width: 60px
          text-align: center
          cursor: pointer


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

@import './tag'

#work-wrapper
  color: $light-text-primary
  height: 100vh
  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']
  h1
    // h1 is outside of .container because .container is scaled during transformation in a way that
    // would distort text

    margin: 0

    position: fixed
    top: 50%
    left: 50%
    width: 60vw
    transform: translate(-50%, -50%)
    will-change: transform

    z-index: 101

    font-size: 3.5vw
    text-align: center
    // Since letter-spacing adds space after the last character in a line and
       messes up text-align: center, I add equal space to the left side in order
       to achieve balance.
    letter-spacing: .5em
    padding-left: 2vw
    line-height: 150%

    .glitch::after
      content: 'Coming Soon'
      color: transparentize($white, .5)

  .background
    height: 100%
    width: 100%
    background: linear-gradient(to bottom right, $gradient-4a 10%, $gradient-4b 90%)

    position: fixed
    left: 0
    top: 0

    z-index: 100

    will-change: transform, top, left

Remove SASS for removed h1

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

@import './tag'

#work-wrapper
  color: $light-text-primary
  height: 100vh
  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-4a 10%, $gradient-4b 90%)

    position: fixed
    left: 0
    top: 0

    z-index: 100

    will-change: transform, top, left


.connectArchiveDialog
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: flex-start
    align-items: flex-start

    .configuration
        flex-grow: 0
        order: 1
        width: 300px

        .options
            padding-left: 8px

    .explorer
        flex-grow: 1
        order: 2
        position: relative

.dialogButtonView
    display: inline-block

.rodal-close
    z-index: 10

Fix scroll overflow in remote file explorer

.connectArchiveDialog
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: flex-start
    align-items: flex-start
    height: 100%

    .configuration
        flex-grow: 0
        order: 1
        width: 300px

        .options
            padding-left: 8px

    .explorer
        flex-grow: 1
        order: 2
        position: relative
        height: 100%

        .explorerContainer
            height: 100%
            overflow: scroll

.dialogButtonView
    display: inline-block

.rodal-close
    z-index: 10


/* _type.sass */

h1, h2, h3
  font-family: "bebas-neue", Helvetica, Arial, sans-serif
  text-rendering: optimizelegibility
  letter-spacing: 0.05em
  line-height: 1.3em

h1
  font-size: 4em

h2
  font-size: 3em

p
  font-size: 16px
  line-height: 1.6em
  margin: 0 0 0.75em

a
  color: $red
  @include: transition

  &:hover
    color: $orange

.centered-text
  text-align: center

.colored-text
  color: $red

Fix a Sass syntax error

/* _type.sass */

h1, h2, h3
  font-family: "bebas-neue", Helvetica, Arial, sans-serif
  text-rendering: optimizelegibility
  letter-spacing: 0.05em
  line-height: 1.3em

h1
  font-size: 4em

h2
  font-size: 3em

p
  font-size: 16px
  line-height: 1.6em
  margin: 0 0 0.75em

a
  color: $red
  @include transition

  &:hover
    color: $orange

.centered-text
  text-align: center

.colored-text
  color: $red


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

.header, .menu
  margin-top: 5rem

.header h1
  animation: fade 1s ease-in-out

.menu
  a
    margin: 0 1.5rem
    margin-bottom: 1.2rem
    transition: .5s ease
    &:hover
      color: $activeColor
  li
    font-size: .9rem
    letter-spacing: .1em
    justify-content: center
  span
    font-size: 1rem

  justify-content: center
  animation: fade 2s ease-in-out

Update cursor to default on bullets and title on App

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

.header, .menu
  margin-top: 5rem

.header h1
  cursor: default
  animation: fade 1s ease-in-out

.menu
  a
    margin: 0 1.5rem
    margin-bottom: 1.2rem
    transition: .5s ease
    &:hover
      color: $activeColor
  li
    font-size: .9rem
    letter-spacing: .1em
    justify-content: center
  span
    font-size: 1rem
    cursor: default

  justify-content: center
  animation: fade 2s ease-in-out


@import compass/css3
@import mixins

$themeName: "odometer-theme-default"

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    font-family: "Helvetica Neue", sans-serif
    line-height: 1.1em

Improve perceived kerning in default theme by centering each digit

@import compass/css3
@import mixins

$themeName: "odometer-theme-default"

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    font-family: "Helvetica Neue", sans-serif
    line-height: 1.1em

    .odometer-value
        text-align: center