//-------------------------------------
//  Helpers
//-------------------------------------

// ----- Extends ----- //

// @extend %debug
// -- Utility for debugging layout issues

%debug
  background-color: pink !important

// @extend %ellipsis
// -- CSS text truncation

%ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

// @extend %group
// -- Clearfix

%group:after
  clear: both
  content: ''
  display: table

// @extend %ir
// -- Image replacement

%ir
  background-color: transparent
  border: 0
  overflow: hidden
  &:before
    content: ''
    display: block
    width: 0
    height: 150%

// ----- Functions ----- //

// em() Function
// -- Sizes a pixel value to appropriate ems

@function em($target, $context: $base-fontSize)
  @if ($target == 0)
    @return 0
  @else
    @return #{$target / $context}em

// rem() Function
// -- Sizes a pixel value to appropriate ems

@function rem($size)
  @return #{$size / $base-fontSize}rem

// ----- Mixins ----- //

// +respond-to()
// -- Generates a specified media query, which
//    defaults to 'min-width' and 'screen'

=respond-to($val, $query: min-width, $media: screen)
  @media #{$media} and ($query: $val)
    @content

// ----- Animations ----- //

Update comments in Core Helpers

//-------------------------------------
//  Helpers
//-------------------------------------

// ----- Extends ----- //

// @extend %debug
// -- Utility for debugging layout issues

%debug
  background-color: pink !important

// @extend %ellipsis
// -- CSS text truncation

%ellipsis
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

// @extend %group
// -- Clearfix

%group:after
  clear: both
  content: ''
  display: table

// @extend %ir
// -- Image replacement

%ir
  background-color: transparent
  border: 0
  overflow: hidden
  &:before
    content: ''
    display: block
    width: 0
    height: 150%

// ----- Functions ----- //

// em()
// -- Sizes a pixel value to appropriate ems

@function em($target, $context: $base-fontSize)
  @if ($target == 0)
    @return 0
  @else
    @return #{$target / $context}em

// rem()
// -- Sizes a pixel value to appropriate rems

@function rem($size)
  @return #{$size / $base-fontSize}rem

// ----- Mixins ----- //

// +respond-to()
// -- Generates a specified media query, which
//    defaults to 'min-width' and 'screen'

=respond-to($val, $query: min-width, $media: screen)
  @media #{$media} and ($query: $val)
    @content

// ----- Animations ----- //


#top-bar
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 90px
  z-index: 2

  padding: 0 50px
  margin: 0
  list-style: none

  display: flex
  align-items: center

  background-color: transparent
  transition: color .5s, background-color .5s

  color: $light-text-primary
  font-family: 'Montserrat', sans-serif
  font-weight: 700
  letter-spacing: .05em

  li
    display: inline-block
    margin: 0 10px

    &.right
      margin-left: auto

    svg
      height: 40px
      width: auto
      transition: transform .25s

      &:hover
        transform: scale(1.2)

      margin-right: 20px

  a
    text-decoration: none

    &.inverted
      color: $blue
      background-color: $white
      transition: background-color .25s
      padding: .5em 1em
      border-radius: 5px

      transition: color .5s, background-color .5s

      &:hover
        background-color: darken($white, 10)

  &.opaque
    background-color: $white
    color: $blue

    a
      &.inverted
        color: $light-text-primary
        background-color: $red

Tweak top bar on mobile

#top-bar
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 90px
  z-index: 2

  padding: 0 50px
  margin: 0
  list-style: none

  display: flex
  align-items: center

  background-color: transparent
  transition: color .5s, background-color .5s

  color: $light-text-primary
  font-family: 'Montserrat', sans-serif
  font-weight: 700
  letter-spacing: .05em

  @media screen and (max-width: 420px)
    padding: 0 10px
    height: 70px

  li
    display: inline-block
    margin: 0 10px

    &.right
      margin-left: auto

    svg
      height: 40px
      width: auto
      transition: transform .25s

      &:hover
        transform: scale(1.2)

      margin-right: 20px

    @media screen and (max-width: 420px)
      display: none

      &:first-child
        display: block

  a
    text-decoration: none

    &.inverted
      color: $blue
      background-color: $white
      transition: background-color .25s
      padding: .5em 1em
      border-radius: 5px

      transition: color .5s, background-color .5s

      &:hover
        background-color: darken($white, 10)

  &.opaque
    background-color: $white
    color: $blue

    a
      &.inverted
        color: $light-text-primary
        background-color: $red


section#about
  color: $alGrayDarker
  p
    font-size: 1.5em
    line-height: 25px
    text-align: center
    .blue
      color: $alBlue
    .rotating-words
      width: 160px
      display: inline-block
      text-align: left
      overflow-x: hidden
  .flip-container
    +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
    margin-left: auto
    margin-right: auto
    .front
      +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
      background-color: $alBlue
      color: $alBlueLightest
      font-weight: bold
      font-size: 2.5em
      &.domain-badge
        background-position: center
        background-size: cover
      &#badge-consulting
        background-image: url('/img/badge-consulting.jpg')
      &#badge-design
        background-image: url('/img/badge-design.jpg')
      &#badge-dev
        background-image: url('/img/badge-dev.jpg')
    .back
      +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
      background-color: $alBlue
      color: $white
      font-weight: bold
      text-transform: uppercase
      p
        position: relative
        top: 2em
        font-size: 1em

Fix a bug with rotating words on homepage

section#about
  color: $alGrayDarker
  p
    font-size: 1.5em
    line-height: 25px
    text-align: center
    .blue
      color: $alBlue
    .rotating-words
      width: 100px
      display: inline-block
      text-align: left
      overflow-x: visible
      white-space: nowrap
  .flip-container
    +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
    margin-left: auto
    margin-right: auto
    .front
      +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
      background-color: $alBlue
      color: $alBlueLightest
      font-weight: bold
      font-size: 2.5em
      &.domain-badge
        background-position: center
        background-size: cover
      &#badge-consulting
        background-image: url('/img/badge-consulting.jpg')
      &#badge-design
        background-image: url('/img/badge-design.jpg')
      &#badge-dev
        background-image: url('/img/badge-dev.jpg')
    .back
      +square($avatarCirclesRadius + 2 * $avatarCirclesBorder)
      background-color: $alBlue
      color: $white
      font-weight: bold
      text-transform: uppercase
      p
        position: relative
        top: 2em
        font-size: 1em


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

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

Change color of active row in table

.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)


.navigation
  position: fixed
  z-index: 1001
  top: 0
  left: 50%
  transform: translateX(-50%)

  margin: 0
  list-style: none
  display: flex

  overflow: hidden

  opacity: .25
  will-change: opacity

  li
    display: inline-block
    overflow: hidden

    a
      display: inline-block

      font-family: Montserrat
      font-size: 1.2em
      color: $white
      font-weight: 300
      letter-spacing: .16666em
      text-transform: uppercase

      padding: 1.25rem 1.75rem

      &.selected
        font-weight: 600

#navigation-trigger
  position: fixed
  top: 0
  left: 0
  z-index: 1002
  padding: 1.25rem 1.75rem

  color: $white
  font-size: 1.5em

  cursor: pointer

  will-change: opacity

Improve kerning in nav bar

.navigation
  position: fixed
  z-index: 1001
  top: 0
  left: 50%
  transform: translateX(-50%)

  margin: 0
  list-style: none
  display: flex

  overflow: hidden

  opacity: .25
  will-change: opacity

  li
    display: inline-block
    overflow: hidden

    a
      display: inline-block

      font-family: Montserrat
      font-size: 1.2em
      color: $white
      font-weight: 300
      letter-spacing: .225em
      text-transform: uppercase

      padding: 1.25rem 1.75rem

      &.selected
        font-weight: 600

#navigation-trigger
  position: fixed
  top: 0
  left: 0
  z-index: 1002
  padding: 1.25rem 1.75rem

  color: $white
  font-size: 1.5em

  cursor: pointer

  will-change: opacity


.post
  margin-bottom: 5em

  &:last-of-type
    margin-bottom: 2em

.post__meta
  color: #aaa
  border-left: 4px solid #24AF3A
  letter-spacing: .1em
  font-size: 14px
  margin: 2em 0
  padding: .2em 1em

.post__meta__date
  color: inherit

.post__meta__link
  color: inherit

.post__headline
  margin: 0 0 .5ex 0
  color: #ff4e00
  line-height: 1em

.post__headline__link
  color: inherit
  text-decoration: none

.post__content
  font-size: 17px
  line-height: 1.8em

  p
    margin-bottom: 1em

  a
    color: #657b83
    text-decoration: none
    border-bottom: 2px solid #657b83

    &:hover
      color: #ff4e00
      border-color: #ff4e00

  li
    margin: .3em 0 .3em 0

  blockquote
    border-left: 4px solid #657b83
    margin: 1.5em
    padding: 0 1.5em
    font-style: italic
    color: #4f525a

  h2, h3, h4, h5, h6
    color: #ff4e00

@media screen and (min-width: 640px)
  .post__content
    font-size: 18px

Set max width for images in posts

.post
  margin-bottom: 5em

  &:last-of-type
    margin-bottom: 2em

.post__meta
  color: #aaa
  border-left: 4px solid #24AF3A
  letter-spacing: .1em
  font-size: 14px
  margin: 2em 0
  padding: .2em 1em

.post__meta__date
  color: inherit

.post__meta__link
  color: inherit

.post__headline
  margin: 0 0 .5ex 0
  color: #ff4e00
  line-height: 1em

.post__headline__link
  color: inherit
  text-decoration: none

.post__content
  font-size: 17px
  line-height: 1.8em

  p
    margin-bottom: 1em

  a
    color: #657b83
    text-decoration: none
    border-bottom: 2px solid #657b83

    &:hover
      color: #ff4e00
      border-color: #ff4e00

  li
    margin: .3em 0 .3em 0

  blockquote
    border-left: 4px solid #657b83
    margin: 1.5em
    padding: 0 1.5em
    font-style: italic
    color: #4f525a

  h2, h3, h4, h5, h6
    color: #ff4e00

  img
    max-width: 100%

@media screen and (min-width: 640px)
  .post__content
    font-size: 18px


h5
  .fa
    color: $grey;
    margin-right: 0.5em;

.i-need
  @extend .fa-check-circle

.i-participant
  @extend .fa-user
.i-participant-new
  @extend .fa-user-plus
.i-participant-remove
  @extend .fa-user-times

.i-support
  @extend .fa-arrow-circle-up
.i-support-new
  @extend .fa-arrow-circle-up
.i-support-remove
  @extend .fa-dot-circle-o

Remove ; in sass file

h5
  .fa
    color: $grey
    margin-right: 0.5em

.i-need
  @extend .fa-check-circle

.i-participant
  @extend .fa-user
.i-participant-new
  @extend .fa-user-plus
.i-participant-remove
  @extend .fa-user-times

.i-support
  @extend .fa-arrow-circle-up
.i-support-new
  @extend .fa-arrow-circle-up
.i-support-remove
  @extend .fa-dot-circle-o


.tab-content
  h2
    color: $railsred
    margin-bottom: 1em

.form-inline label
  padding-right: 1em
.form-inline
  padding-top: 0.5em
  padding-bottom: 0.5em

.has-error
  input[type=radio]
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483

#error_explanation
  border: 1px solid #dca7a7
  background-color: #f2dede
  border-radius: 4px
  color: #a94442
  h2
    color: #a94442

#team, #student
  margin-right: 420px

Add rudimentary styling for char counter

.tab-content
  h2
    color: $railsred
    margin-bottom: 1em

.form-inline label
  padding-right: 1em
.form-inline
  padding-top: 0.5em
  padding-bottom: 0.5em

.has-error
  input[type=radio]
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483

#error_explanation
  border: 1px solid #dca7a7
  background-color: #f2dede
  border-radius: 4px
  color: #a94442
  h2
    color: #a94442

#team, #student
  margin-right: 420px

textarea.character_limited + p
  display: inline-block
  margin: 0
  position: relative
  left: 12px
  top: -1.8em
  font-size: 0.7em
  color: #737373


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

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

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

Use rounded corners only at outmost borders of the task list.

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


.data-list
  +no-bullet

  & > li
    border-bottom: 1px solid $panel-border-color
    margin-bottom: 0
    padding: 1em

    &:last-of-type
      border-bottom: none

  &.zebra > li
    &:nth-child(even)
      background-color: $panel-bg

Add .border-top and .border-bottom classes to .data-list

.data-list
  +no-bullet

  & > li
    border-bottom: 1px solid $panel-border-color
    margin-bottom: 0
    padding: 1em

    &:last-of-type
      border-bottom: none

  &.zebra > li
    &:nth-child(even)
      background-color: $panel-bg

  &.border-top
    li:first-of-type
      border-top: 1px solid $panel-border-color

  &.border-bottom
    li:last-of-type
      border-bottom: 1px solid $panel-border-color


.posts
  +outer-container

.posts p, .post-title
  +shift(2)
  +span-columns(8)

.post-title
  font-size: 1.7em
  a
    +transition(color .4s ease-in-out)
    color: $matcha-green
    &:hover
      color: $text-color

.post-date
  font-size: 0.7em
  color: $text-color
  margin:
    left: em(-80px)
    right: em(20px)

.posts p
  font-size: 1.05em
  margin-bottom: 4em
  color: $text-color

Adjust line-height for body copy on index

.posts
  +outer-container

.posts p, .post-title
  +shift(2)
  +span-columns(8)

.post-title
  font-size: 1.7em
  a
    +transition(color .4s ease-in-out)
    color: $matcha-green
    &:hover
      color: $text-color

.post-date
  font-size: 0.7em
  color: $text-color
  margin:
    left: em(-80px)
    right: em(20px)

.posts p
  font-size: 1.05em
  margin-bottom: 4em
  color: $text-color
  line-height: 1.35em


@import branding

.darkswarm
  products
    product
      .product-thumb
        position: absolute
        top: 3px
        left: 0px
        width: 7rem
        height: 7rem
        outline: 1px solid $disabled-bright
        float: left
        display: block
        z-index: 999999
        background-color: #999
        overflow: hidden

        @media all and (max-width: 768px)
          width: 4rem
          height: 4rem

        @media all and (max-width: 480px)
          display: none
          width: 0rem
          height: 0rem

Make product thumbnail background white by default

@import branding

.darkswarm
  products
    product
      .product-thumb
        position: absolute
        top: 3px
        left: 0px
        width: 7rem
        height: 7rem
        outline: 1px solid $disabled-bright
        float: left
        display: block
        z-index: 999999
        background-color: white
        overflow: hidden

        @media all and (max-width: 768px)
          width: 4rem
          height: 4rem

        @media all and (max-width: 480px)
          display: none
          width: 0rem
          height: 0rem


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

.text-right, .text-left
  display: inline-block

Add default size for map-canvas

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

.text-right, .text-left
  display: inline-block

.map-canvas
  width: 100%
  height: +emCalc(200px)


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

Add class for white backgrounds

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

.white
  background: white


=divider-theme($color)
  border-top: .1rem solid $color

.ts.divider
  +divider-theme(#CCC)

Add margin to the top and the bottom.

=divider-theme($color)
  border-top: .1rem solid $color

.ts.divider
  +divider-theme(#CCC)
  +y-margin($margin)


@import 'colors'
@import 'buildSummary'

body
  margin: 10px
  background-color: $lightGrey

.placeholder
  visibility: hidden

.hidden
  visibility: collapse

.loadingMessage
  color: black

Add left padding to loading text

@import 'colors'
@import 'buildSummary'

body
  margin: 10px
  background-color: $lightGrey

.placeholder
  visibility: hidden

.hidden
  visibility: collapse

.loadingMessage
  padding-left: 15px
  color: black


.flash
  position: fixed
  left: 0
  top: 0
  width: 100%
  z-index: 50
  div
    position: relative
    width: $root-width - 50px
    margin: 0 auto
    line-height: 30px
    padding: 15px 25px
    +shadow
    +box-shadow(rgba(0, 0, 0, 0.5) 0 2px 7px)
    font-size: 20px
    text-align: center
    color: white
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px
    font-weight: bold
    background-image: image-url("layout/alone/flash-pattern.png")
    border: 2px solid
    border-width: 0 2px 2px 2px
  &.notice
    div
      background-color: darken($green, 5%)
      border-color: darken($green, 7%)
  &.error, &.alert
    div
      background-color: darken($red, 5%)
      border-color: darken($red, 7%)

@media all and (transform-3d), all and (-webkit-transform-3d)
  .flash
    +perspective(2000px)
    div
      +backface-visibility(hidden)

Add little opacity to flash

.flash
  position: fixed
  left: 0
  top: 0
  width: 100%
  z-index: 50
  div
    position: relative
    width: $root-width - 50px
    margin: 0 auto
    line-height: 30px
    padding: 20px 25px
    +shadow
    +box-shadow(rgba(0, 0, 0, 0.5) 0 2px 7px)
    font-size: 20px
    text-align: center
    color: white
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px
    font-weight: bold
    background-image: image-url("layout/alone/flash-pattern.png")
    border: 2px solid
    border-width: 0 2px 2px 2px
    opacity: 0.95
  &.notice
    div
      background-color: darken($green, 5%)
      border-color: darken($green, 7%)
  &.error, &.alert
    div
      background-color: darken($red, 5%)
      border-color: darken($red, 7%)

@media all and (transform-3d), all and (-webkit-transform-3d)
  .flash
    +perspective(2000px)
    div
      +backface-visibility(hidden)


body
  background-color: $color1
  .material-icons
    color: $color2

.st--grid-max
  max-width: 960px

.sr-only
  position: absolute
  width: 1px
  height: 1px
  padding: 0
  margin: -1px
  overflow: hidden
  clip: rect(0, 0, 0, 0)
  border: 0

.text-center
  text-align: center

.text-right
  text-align: right

.text-left
  text-align: left

.mdl-card--bg-color
  background-color: $color1 !important

.st--list-unstyled
  padding: 0
  margin: 0
  list-style: none

Add global css classes for float

body
  background-color: $color1
  .material-icons
    color: $color2

.st--grid-max
  max-width: 960px

.sr-only
  position: absolute
  width: 1px
  height: 1px
  padding: 0
  margin: -1px
  overflow: hidden
  clip: rect(0, 0, 0, 0)
  border: 0

.text-center
  text-align: center

.text-right
  text-align: right

.text-left
  text-align: left

.mdl-card--bg-color
  background-color: $color1 !important

.st--list-unstyled
  padding: 0
  margin: 0
  list-style: none

.st--float-right
  float: right

.st--float-left
  float: left


// Action on text selection
*
  outline: none
  &::selection
    color: $white
    background-color: $link-color

body.is-homepage
  background-color: rgba($black, .55)

// Links
a
  transition: color .2s ease-in
  &.button
    border-radius: 0 !important

// Utils
.no-margin-bottom
  margin-bottom: 0

.no-margin-left
  margin-left: 0 !important

.no-margin
  margin: 0 auto

.dtable
  display: table
  .dtrow
    display: table-row

  .dtcell
    display: table-cell
    vertical-align: middle

// Maildev
.button-title
  margin-bottom: 0
  margin-left: 1rem
  vertical-align: middle

// Overlay on video play
#shadow
  &.night
    position: absolute
    z-index: 2
    top: 0
    right: 0
    bottom: 0
    left: 0
    opacity: .8
    background-color: $black
.mejs-container
  z-index: 3

// Highlight post on page
.highlight-post
  animation: highlight-post 1.5s

@keyframes highlight-post
  0%
    background: $warning-color
  100%
    background: none

// Style for broken pictures
+ broken-pictures

// Masonry
.masonry-item
  width: 100%

Mark :: Update background and color for html tag

// Action on text selection
*
  outline: none
  &::selection
    color: $white
    background-color: $link-color

body.is-homepage
  background-color: rgba($black, .55)

// Links
a
  transition: color .2s ease-in
  &.button
    border-radius: 0 !important

// Utils
.no-margin-bottom
  margin-bottom: 0

.no-margin-left
  margin-left: 0 !important

.no-margin
  margin: 0 auto

.dtable
  display: table
  .dtrow
    display: table-row

  .dtcell
    display: table-cell
    vertical-align: middle

// Search mark
mark
  color: $white
  background-color: $primary-color

// Maildev
.button-title
  margin-bottom: 0
  margin-left: 1rem
  vertical-align: middle

// Overlay on video play
#shadow
  &.night
    position: absolute
    z-index: 2
    top: 0
    right: 0
    bottom: 0
    left: 0
    opacity: .8
    background-color: $black
.mejs-container
  z-index: 3

// Highlight post on page
.highlight-post
  animation: highlight-post 1.5s

@keyframes highlight-post
  0%
    background: $warning-color
  100%
    background: none

// Style for broken pictures
+ broken-pictures

// Masonry
.masonry-item
  width: 100%


@import "compass/css3/transition"
@import "ease-types"

@function ceaser($type: "ease")
  $easingValue: returnEaseType($type)
  @return cubic-bezier(unquote($easingValue))

@mixin ceaser-transition($type: "ease", $properties: all, $duration: 500ms, $delay: 0)
  $easingValue : returnEaseType($type)
  @include transition($properties, $duration, cubic-bezier(unquote($easingValue)), $delay)

Make ceaser-transition compatible with compass 0.12

@import "compass/css3/transition"
@import "ease-types"

@function ceaser($type: "ease")
  $easingValue: returnEaseType($type)
  @return cubic-bezier(unquote($easingValue))

@mixin ceaser-transition($type: "ease", $properties: all, $duration: 500ms, $delay: 0)
  $easingValue : returnEaseType($type)
  @include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)


/**
 *
 */
.ticket
	width:  192px
	height: 108px

	@include position(absolute)

	&:hover
		z-index:    350 !important
		box-shadow: 0px 0px 4px $dove-gray

	&.is-dragging
		z-index:    400 !important
		box-shadow: 0px 0px 8px $dove-gray

	border:        1px solid $gallery
	border-radius: 2px

	cursor:           pointer
	font-size:        12px
	background-color: $white

	.color
		height: 16px

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

	.content
		height:   76px
		margin:   8px
		overflow: hidden

Fix issue with ticket content not displaying line breaks and spaces correctly.

/**
 *
 */
.ticket
	width:  192px
	height: 108px

	@include position(absolute)

	&:hover
		z-index:    350 !important
		box-shadow: 0px 0px 4px $dove-gray

	&.is-dragging
		z-index:    400 !important
		box-shadow: 0px 0px 8px $dove-gray

	border:        1px solid $gallery
	border-radius: 2px

	cursor:           pointer
	font-size:        12px
	background-color: $white

	.color
		height: 16px

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

	.content
		height:      76px
		margin:      8px
		overflow:    hidden
		white-space: pre-wrap


.alert-box
  padding: 15px
  background: $alert-success-color
  &.error, &.alert, &.failure
    background: $alert-color
  &.success, &.notice
    background: $alert-success-color

.flash
  .alert-box
    margin-top: -30px
    +radius(0)

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

Remove negative margin top from alert box, since the topboar is fixed now

.alert-box
  padding: 15px
  background: $alert-success-color
  &.error, &.alert, &.failure
    background: $alert-color
  &.success, &.notice
    background: $alert-success-color

.flash
  .alert-box
    +radius(0)

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


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

// Accounting
table
  td, th
    &.currency
      text-align: right

// Balance/Profit sheets
.zero-balance
  display: none

Use text-align: right for inputs nested in .currency

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

// Accounting
table
  td, th
    &.currency
      text-align: right
      input
        text-align: right

// Balance/Profit sheets
.zero-balance
  display: none


.footer-container
  background-color: $topbar-bg-color
  color: $white
  position: relative
  width: 100%

  .upper-footer
    padding: 1rem 10px 15px 10px

    .credentials
      text-align: center

    .input-wrapper
      position: relative

      .newsletter_user_email
        input
          width: 100%
          height: auto
          padding: 5px
          padding-right: 37px

          &:focus
            outline: none !important

      .submit-with-icon
        background: none
        position: absolute
        top: 1px
        right: 3px

        margin: 0
        padding: 0
        border: 0
        outline: none
        box-shadow: none

        color: #000
        cursor: pointer

        i
          font-size: 25px
          margin-right: 1px

  .lower-footer
    padding: 6px
    background-color: #333132
    text-align: center

    p
      font-size: 12px
      margin-bottom: 0

    .made-by
      text-align: right

Improve padding top and bottom for lower footer

.footer-container
  background-color: $topbar-bg-color
  color: $white
  position: relative
  width: 100%

  .upper-footer
    padding: 1rem 10px 15px 10px

    .credentials
      text-align: center

    .input-wrapper
      position: relative

      .newsletter_user_email
        input
          width: 100%
          height: auto
          padding: 5px
          padding-right: 37px

          &:focus
            outline: none !important

      .submit-with-icon
        background: none
        position: absolute
        top: 1px
        right: 3px

        margin: 0
        padding: 0
        border: 0
        outline: none
        box-shadow: none

        color: #000
        cursor: pointer

        i
          font-size: 25px
          margin-right: 1px

  .lower-footer
    padding: 15px
    background-color: #333132
    text-align: center

    p
      font-size: 12px
      margin-bottom: 0

    .made-by
      text-align: right


//= require normalize-css
//= require material-design-preloader/md-preloader.min

html, body
  height: 100%
  overflow: hidden

.deck-container
  visibility: hidden

#loading_screen-no-js
  font-size: 2rem

#loading_screen,
#loading_screen-no-js
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
  height: 100%
  display: flex
  align-items: center
  justify-content: center

  span
    font-size: 4rem
    margin-left: 1rem

Set loader and background color when loading.

//= require normalize-css
//= require material-design-preloader/md-preloader.min

@import settings
@import "deck.js-material/stylesheets/variables"

html, body
  height: 100%
  overflow: hidden
  +background-color

.deck-container
  visibility: hidden

#loading_screen-no-js
  font-size: 2rem

#loading_screen,
#loading_screen-no-js
  display: flex
  height: 100%
  align-items: center
  justify-content: center
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif

  span
    margin-left: 1rem
    font-size: 4rem

  .md-preloader svg circle
    +loader-color


//- 💫 CSS > COMPONENTS > SIDEBAR

//- Sidebar container

.c-sidebar
    background: $color-subtle-light
    overflow-y: auto

    @include breakpoint(min, md)
        @include position(fixed, top, left, 0, 0)
        @include size($sidebar-width, 100vh)
        flex: 0 0 $sidebar-width
        padding: calc(#{$nav-height} + 1.5rem) 2rem 2rem
        z-index: 10
        border-right: 1px solid $color-subtle

    @include breakpoint(max, sm)
        flex: 100%
        width: 100%
        margin-top: $nav-height
        display: flex
        flex-flow: row wrap
        width: 100%

//- Sidebar section

.c-sidebar__section
    @include breakpoint(max, sm)
        flex: 1 1 0
        padding: 1.25rem
        border-bottom: 1px solid $color-subtle
        margin: 0

        &:not(:last-child)
            border-right: 1px solid $color-subtle

    .is-active
        font-weight: bold
        color: $color-theme

Move sidebar padding to individual items

//- 💫 CSS > COMPONENTS > SIDEBAR

//- Sidebar container

.c-sidebar
    background: $color-subtle-light
    overflow-y: auto

    @include breakpoint(min, md)
        @include position(fixed, top, left, 0, 0)
        @include size($sidebar-width, 100vh)
        flex: 0 0 $sidebar-width
        padding: calc(#{$nav-height} + 1.5rem) 0 2rem
        z-index: 10
        border-right: 1px solid $color-subtle

    @include breakpoint(max, sm)
        flex: 100%
        width: 100%
        margin-top: $nav-height
        display: flex
        flex-flow: row wrap
        width: 100%

//- Sidebar section

.c-sidebar__section
    & > *
        padding: 0 2rem

    @include breakpoint(max, sm)
        flex: 1 1 0
        padding: 1.25rem 0
        border-bottom: 1px solid $color-subtle
        margin: 0

        &:not(:last-child)
            border-right: 1px solid $color-subtle

    .is-active
        font-weight: bold
        color: $color-theme


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

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

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

.post-title a
  &:hover
    color: $brand-color
    border-bottom: 2px solid $brand-color

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

.article-detail a,
.recent-posts a
  &:hover
    border-bottom: 1px solid $brand-color

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

Remove border bottom from transitions

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

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

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

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

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

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

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


// ===== sites#index ======

section#sites_index
  table.overview
    tr
      th.name, td.name
        width: 20%
      th.description, td.description
        width: 65%
      th.launched, td.launched
        width: 15%
  table.feature_comparison
    tr
      th.name, td.name
        width: 25%
      th.platform, td.platform
        width: 25%
      th.platform_source, td.platform_source
        width: 10%
        text-align: center
      th.api, td.api
        width: 10%
        text-align: center
      th.rss, td.rss
        width: 10%
        text-align: center
      th.index, td.index
        width: 10%
        text-align: center
      th.details, td.details
        width: 10%
        text-align: center
      img.api
        margin-top: 5px
      img.rss
        margin-top: 3px
      span.yes
        +font_2
        color: green
      span.no
        color: red
      span.open
        +font_2
        color: green
      span.closed
        color: red
      span.unsure
        color: gray
  dl.terms
    margin-bottom: $baseline
    dt
      +multicolumn_width(1, 0px)
      clear: left
      float: left
      font-weight: bold
      margin-right: $h_space
      text-align: right
    dd
      float: left

Make yes & no, open & closed be same font size

// ===== sites#index ======

section#sites_index
  table.overview
    tr
      th.name, td.name
        width: 20%
      th.description, td.description
        width: 65%
      th.launched, td.launched
        width: 15%
  table.feature_comparison
    tr
      th.name, td.name
        width: 25%
      th.platform, td.platform
        width: 25%
      th.platform_source, td.platform_source
        width: 10%
        text-align: center
      th.api, td.api
        width: 10%
        text-align: center
      th.rss, td.rss
        width: 10%
        text-align: center
      th.index, td.index
        width: 10%
        text-align: center
      th.details, td.details
        width: 10%
        text-align: center
      img.api
        margin-top: 5px
      img.rss
        margin-top: 3px
      span.yes
        color: green
      span.no
        color: red
      span.open
        color: green
      span.closed
        color: red
      span.unsure
        color: gray
  dl.terms
    margin-bottom: $baseline
    dt
      +multicolumn_width(1, 0px)
      clear: left
      float: left
      font-weight: bold
      margin-right: $h_space
      text-align: right
    dd
      float: left


//- 💫 CSS > COMPONENTS > TOOLTIPS

[data-tooltip]
    position: relative

    @include breakpoint(min, sm)
        &:before
            @include position(absolute, top, left, 125%, 50%)
            display: inline-block
            content: attr(data-tooltip)
            background: $color-front
            border-radius: 2px
            color: $color-back
            font: normal 1.3rem/#{1.25} $font-primary
            text-transform: none
            opacity: 0
            padding: 0.5em 0.75em
            transform: translateX(-50%) translateY(-2px)
            transition: opacity 0.1s ease-out, transform 0.1s ease-out
            visibility: hidden
            //white-space: nowrap
            min-width: 200px
            max-width: 300px
            z-index: 200

        &:hover:before
            opacity: 1
            transform: translateX(-50%) translateY(0)
            visibility: visible

Fix formatting and add subtle borders for tooltips on dark backgrounds

//- 💫 CSS > COMPONENTS > TOOLTIPS

[data-tooltip]
    position: relative

    @include breakpoint(min, sm)
        &:before
            @include position(absolute, top, left, 125%, 50%)
            display: inline-block
            content: attr(data-tooltip)
            background: $color-front
            border-radius: 2px
            border: 1px solid rgba($color-subtle-dark, 0.5)
            color: $color-back
            font: normal 1.3rem/#{1.25} $font-primary
            text-transform: none
            opacity: 0
            padding: 0.5em 0.75em
            transform: translateX(-50%) translateY(-2px)
            transition: opacity 0.1s ease-out, transform 0.1s ease-out
            visibility: hidden
            min-width: 200px
            max-width: 300px
            z-index: 200

        &:hover:before
            opacity: 1
            transform: translateX(-50%) translateY(0)
            visibility: visible


.pagination-link
  +shift(2)
  margin-bottom: 4em
  &:first-of-type
    float: left
    margin-right: 4em
  a
    color: $text-color
    font-size: 1.1em

Adjust color and margin for pagination

.pagination-link
  +shift(2)
  margin:
    bottom: $medium-margin
  &:first-of-type
    float: left
    margin:
      right: $medium-margin
  a
    color: darken($medium-gray, 30%)
    font-size: 1.1em


#CHARM_TAB
  -webkit-transform: translateY(0) rotate(270deg) !important
  -moz-transform: translateY(0) rotate(270deg) !important
  transform: translateY(0) rotate(270deg) !important
  background-image: url(/images/ui/charmtab.png)
  margin-left: -135px !important
  margin-top: -112px !important
  top: 100% !important
  left: 100% !important

#CHARM_TAB:hover
  -webkit-transform: translateY(-7px) rotate(270deg) !important
  -moz-transform: translateY(-7px) rotate(270deg) !important
  transform: translateY(-7px) rotate(270deg) !important

Remove support tab on org

#CHARM_TAB
  display: none

.pro
  #CHARM_TAB
    -webkit-transform: translateY(0) rotate(270deg) !important
    -moz-transform: translateY(0) rotate(270deg) !important
    transform: translateY(0) rotate(270deg) !important
    background-image: url(/images/ui/charmtab.png)
    margin-left: -135px !important
    margin-top: -112px !important
    top: 100% !important
    left: 100% !important

  #CHARM_TAB:hover
    -webkit-transform: translateY(-7px) rotate(270deg) !important
    -moz-transform: translateY(-7px) rotate(270deg) !important
    transform: translateY(-7px) rotate(270deg) !important


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

html
  background: $base-background
  color: $base-color
  font-family: $base-fontFamily
  font-size: $base-fontSize
  line-height: $base-lineHeight
body
  font-size: 100%

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

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

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

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

Move properties from the html tag to the body tag

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

html
  font-size: $base-fontSize

body
  background: $base-background
  color: $base-color
  font-family: $base-fontFamily
  font-size: 100%
  line-height: $base-lineHeight

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

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

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

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


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

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

.post-title a
  &:hover
    color: $brand-color
    border-bottom: 2px solid $brand-color

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

.article-detail a,
.recent-posts a
  &:hover
    border-bottom: 1px solid $brand-color

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

Fix bug in pagination button

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

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

.post-title a
  &:hover
    color: $brand-color
    border-bottom: 2px solid $brand-color

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

.article-detail a,
.recent-posts a
  &:hover
    border-bottom: 1px solid $brand-color

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


@import reset
@import compass/css3/border-radius
@import compass/css3/images
@import compass/css3/box-shadow
@import compass/css3/opacity

@import font-awesome

@import mixins
@import general_layout
@import general_styles
@import form
@import flash
@import title
@import accordion
@import chart
@import header
@import sidebar
@import sidebar-icons
@import dashboard
@import dashboard_popup
@import converter_popup
@import footer
@import home
@import blockchart
@import header_menu
@import pages
@import slider
@import prediction
@import quinn
@import jquery.fancybox
@import fancybox
@import jquery.jqplot
@import buttons
@import jquery.qtip
@import prominent_users
@import peak_load
@import scenarios
@import import_export_flows
@import dataset_page
@import sortable
@import report

Remove report CSS from main stylesheet


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

Remove require_tree in css manifest

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_self
 */


=hyphenated-lowercase()
  content: ''

=snake_case()
  content: ''

=camelCase()
  content: ''

=PascalCase()
  content: ''

=Camel_Snake_Case()
  content: ''

=SCREAMING_SNAKE_CASE()
  content: ''

=_with-leading-underscore()
  content: ''

=_does_NOT-fitSTANDARD()
  content: ''

.class
  +snake_case()

.test
  @extend .pure-u-1-6

Add more tests for Sass syntax

=hyphenated-lowercase()
  content: ''

=snake_case()
  content: ''

=camelCase()
  content: ''

=PascalCase()
  content: ''

=Camel_Snake_Case()
  content: ''

=SCREAMING_SNAKE_CASE()
  content: ''

=_with-leading-underscore()
  content: ''

=_does_NOT-fitSTANDARD()
  content: ''

.class
  +snake_case()

.test
  @extend .pure-u-1-6

.test
  @at-root .child_snake_case
    content: 'foo'

@import '_foo.scss'

@keyframes fade_it
  0%
    transform: scale(1.0)
  25%
    transform: scale(1.1)
  50%
    transform: scale(1.0)
  75%
    transform: scale(1.2)
  100%
    transform: scale(1.1)


@import mixins
@import variables
@import branding
@import big-input

// Shop partials
@import shop-inputs
@import shop-navigation
@import shop-product-rows
@import shop-taxon-flag
@import shop-popovers

.darkswarm

  products
    display: block
    padding-top: 2.3em

    @media all and (max-width: 768px)
      padding-top: 1em

      input.button.right
        float: left

    product
      border-bottom: 1px solid #e5e5e5
      border-top: 1px solid #e5e5e5
      padding-bottom: 1px
      margin-bottom: 20px !important
      position: relative
      display: block
      color: #444

      // BULK
      .bulk-buy
        font-size: 0.875rem
        @media all and (max-width: 768px)
          font-size: 0.75rem

      .bulk-buy, .bulk-buy i
        color: #888

      .inline
        display: inline

      // ICONS
      i
        font-size: 0.75em
        padding-right: 0.9375rem

      i.ofn-i_056-bulk, i.ofn-i_036-producers
        font-size: 1rem
        padding-right: 0rem

      i.ofn-i_036-producers
        padding-left: 0.5rem

Add some spacing on Checkout now button for small screens so the buttons dont fight

@import mixins
@import variables
@import branding
@import big-input

// Shop partials
@import shop-inputs
@import shop-navigation
@import shop-product-rows
@import shop-taxon-flag
@import shop-popovers

.darkswarm

  products
    display: block
    padding-top: 2.3em

    @media all and (max-width: 768px)
      padding-top: 1em

      input.button.right
        float: left

    @media all and (max-width: 480px)
      .add_to_cart
        margin-top: 2rem

    product
      border-bottom: 1px solid #e5e5e5
      border-top: 1px solid #e5e5e5
      padding-bottom: 1px
      margin-bottom: 20px !important
      position: relative
      display: block
      color: #444

      // BULK
      .bulk-buy
        font-size: 0.875rem
        @media all and (max-width: 768px)
          font-size: 0.75rem

      .bulk-buy, .bulk-buy i
        color: #888

      .inline
        display: inline

      // ICONS
      i
        font-size: 0.75em
        padding-right: 0.9375rem

      i.ofn-i_056-bulk, i.ofn-i_036-producers
        font-size: 1rem
        padding-right: 0rem

      i.ofn-i_036-producers
        padding-left: 0.5rem


@import ../../vendor/lib

.Credits
  +sans-typeset
  transition: color $speed ease, opacity $speed ease
  position: absolute
  bottom: rem(10)
  right: rem(10)
  color: white
.no-touch .Credits:hover
  color: #ccc

.CreditsAuthor
  display: inline-block
  line-height: 1.2
  margin-left: rem(10)
  margin-right: rem(15)
  border-bottom: 1px solid

.hideCredits .Credits
  opacity: 0
  pointer-events: none

@media(min-width: #{$break-2})
  .Credits
    bottom: rem(20)
    right: rem(20)

@media(min-width: #{$break-4})
  .Credits
    right: rem(40)

Hide missing Avatars in a promotions credits

@import ../../vendor/lib

.Credits
  +sans-typeset
  transition: color $speed ease, opacity $speed ease
  position: absolute
  bottom: rem(10)
  right: rem(10)
  color: white
.no-touch .Credits:hover
  color: #ccc

.CreditsAuthor
  display: inline-block
  line-height: 1.2
  margin-left: rem(10)
  margin-right: rem(15)
  border-bottom: 1px solid

.hideCredits .Credits
  opacity: 0
  pointer-events: none

.Credits .Avatar.isFailing
  display: none

@media(min-width: #{$break-2})
  .Credits
    bottom: rem(20)
    right: rem(20)

@media(min-width: #{$break-4})
  .Credits
    right: rem(40)


.header
  display: flex
  flex-flow: column wrap
  margin: 0 1.5rem

Set default state of alignment of Header to flex-start

.header
  display: flex
  flex-flow: column wra
  align-self: flex-start
  margin: 0 1.5rem


#main, .posts
  +outer-container

.posts p, .post-title, article.article-detail, .soundcloud-player-small
  +shift(2)
  +span-columns(8)

.post-title a, .detail-post-title
  color: $medium-gray
  &:hover
    color: $matcha-green

.post-title, .detail-post-title
  font-size: 1.7em

.posts p, .article-detail p
  font-size: 1.05em
  line-height: 1.35em

.posts p, .article-detail p
  color: $text-color

.detail-post-date, .post-date
  color: $light-gray

.post-date
  margin:
    left: em(-111px)
    right: em(12px)

Adjust font-size for date on index and detail page

#main, .posts
  +outer-container

.posts p, .post-title, article.article-detail, .soundcloud-player-small
  +shift(2)
  +span-columns(8)

.post-title a, .detail-post-title
  color: $medium-gray
  &:hover
    color: $matcha-green

.post-title, .detail-post-title
  font-size: 1.7em

.posts p, .article-detail p
  font-size: 1.05em
  line-height: 1.35em

.posts p, .article-detail p
  color: $text-color

.detail-post-date, .post-date
  color: $light-gray
  font-size: 0.6em

.post-date
  margin:
    left: em(-111px)
    right: em(12px)


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

Use the global $use-rem setting. Default to $inline false

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


.bpe--location-input
  background: white
  position: absolute
  top: 10px
  right: 10px
  z-index: 100
  width: 400px
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25)

.bpe--location-input--input
  display: block
  margin: 20px
  padding: 5px
  padding-right: 30px
  width: calc(100% - 70px)

.bpe--location-input--reset
  position: absolute
  right: 20px
  top: 13px
  z-index: 1000
  font-size: 3rem
  font-weight: 100
  cursor: pointer

  .browser-edge &,
  .browser-msie &
    display: none

.bpe--location-input--reset:hover
  text-decoration: none

Fix padding if input reset is hidden

.bpe--location-input
  background: white
  position: absolute
  top: 10px
  right: 10px
  z-index: 100
  width: 400px
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25)

.bpe--location-input--input
  display: block
  margin: 20px
  padding: 5px
  padding-right: 30px
  width: calc(100% - 70px)

  .browser-edge &,
  .browser-msie &
    padding-right: 5px

.bpe--location-input--reset
  position: absolute
  right: 20px
  top: 13px
  z-index: 1000
  font-size: 3rem
  font-weight: 100
  cursor: pointer

  .browser-edge &,
  .browser-msie &
    display: none

.bpe--location-input--reset:hover
  text-decoration: none


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

Add class for white backgrounds

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

.white
  background: white


@mixin video__in
    transition: opacity 0.1s 0.1s linear

@mixin video__out
    transition: opacity 0.1s linear

.video__sticky, .video__top-half
    z-index: 3

.video__top-half
    width: 100%
    max-width: $maxwidth
    background: black
    margin: 0 auto
    text-align: center

.video__sources
    color: darken($gray, 10%)
    background: lighten($lightgray, 10%)
    padding: 10px $padding
    text-align: center

.video__lines
    margin-top: 15px

.video__line
    margin-top: 10px
    .zh-cn
        margin: 0 0 0px

.video__line__translation
    position: relative
    button
        border: 1px solid $lightgray
        background: none
        color: $default

.video__line__translation__show
    position: absolute
    top: 0
    left: 0
    opacity: 0
    @include video__out

.video__line__translation__text
    position: relative
    z-index: 1
    @include video__in

.video__line__translation--hidden
    .video__line__translation__show
        opacity: 1
        z-index: 2
        @include video__in
    .video__line__translation__text
        opacity: 0
        cursor: default
        @include video__out

Replace button selector by .btn

@mixin video__in
    transition: opacity 0.1s 0.1s linear

@mixin video__out
    transition: opacity 0.1s linear

.video__sticky, .video__top-half
    z-index: 3

.video__top-half
    width: 100%
    max-width: $maxwidth
    background: black
    margin: 0 auto
    text-align: center

.video__sources
    color: darken($gray, 10%)
    background: lighten($lightgray, 10%)
    padding: 10px $padding
    text-align: center

.video__lines
    margin-top: 15px

.video__line
    margin-top: 10px
    .zh-cn
        margin: 0 0 0px

.video__line__translation
    position: relative
    .btn
        border: 1px solid $lightgray
        background: none
        color: $default

.video__line__translation__show
    position: absolute
    top: 0
    left: 0
    opacity: 0
    @include video__out

.video__line__translation__text
    position: relative
    z-index: 1
    @include video__in

.video__line__translation--hidden
    .video__line__translation__show
        opacity: 1
        z-index: 2
        @include video__in
    .video__line__translation__text
        opacity: 0
        cursor: default
        @include video__out


.post

  .main
    @extend %flexbox
    +justify-content(space-between)

    .content
      width: 100%

      @media (min-width: 64rem)
        max-width: 75%

.post-item
  @include card-post
  padding-bottom: .9375rem

.post-header
  margin-bottom: 1.875rem
  text-align: center

.post-cover
  @include card-cover

.post-author
  @include author

  &_image
    @include author-img

  &_name
    @include author-name

.post-title
  @include card-title
  font-size: 2.25rem

.post-date
  @include card-date

.post-content

  a
    font-weight: 600
    color: darken($color-theme, 10%)

    &:hover
      border-bottom: 1px solid

  p
    margin:
      right: 3.125rem
      left: 3.125rem
    font-size: 1.125rem
    line-height: 1.4375rem

  strong
    font-weight: 600

  h2
    margin:
      top: 3.125rem
      right: 3.125rem
      left: 3.125rem
    font-weight: 600

.post-comments
  margin:
    top: 3.125rem
    right: 3.125rem
    left: 3.125rem

Fix links color on post-content

.post

  .main
    @extend %flexbox
    +justify-content(space-between)

    .content
      width: 100%

      @media (min-width: 64rem)
        max-width: 75%

.post-item
  @include card-post
  padding-bottom: .9375rem

.post-header
  margin-bottom: 1.875rem
  text-align: center

.post-cover
  @include card-cover

.post-author
  @include author

  &_image
    @include author-img

  &_name
    @include author-name

.post-title
  @include card-title
  font-size: 2.25rem

.post-date
  @include card-date

.post-content

  a
    color: #4596ea
    text-decoration: underline

    &:hover
      text-decoration: none

  p
    margin:
      right: 3.125rem
      left: 3.125rem
    font-size: 1.125rem
    color: lighten($color-dark, 44%)
    line-height: 1.4375rem

  strong
    font-weight: 600

  h2
    margin:
      top: 3.125rem
      right: 3.125rem
      left: 3.125rem
    font-weight: 600

.post-comments
  margin:
    top: 3.125rem
    right: 3.125rem
    left: 3.125rem


.profile--item
  border-bottom: 1px solid #f2f2f2
  font-weight: 500
  position: relative
  background-color: white
  cursor: pointer

  &.premium
    background-color: #eaf4fb

.profile--show
  max-width: 980px
  margin: 50px auto
  position: relative

  .badges
    margin: 10px auto!important

@media(max-width: 500px)
  .profile--show
    .container
      max-width: calc(100% - 40px)

  .profile--item
    padding-bottom: 0

    .stats
      display: none!important

    .links
      display: none!important

Fix avatar size on smaller screen

.profile--item
  border-bottom: 1px solid #f2f2f2
  font-weight: 500
  position: relative
  background-color: white
  cursor: pointer

  &.premium
    background-color: #eaf4fb

.profile--show
  max-width: 980px
  margin: 50px auto
  position: relative

  .badges
    margin: 10px auto!important

@media(max-width: 500px)
  .profile--show
    .container
      max-width: calc(100% - 40px)

  .profile--item
    padding-bottom: 0

    .avatar
      img
        width: 50px!important
        height: 50px!important

    .stats
      display: none!important

    .links
      display: none!important


$fire-color: darkred
$fire-hover-color: orangered

body,
html
  height: 100%
  width: 100%
  overflow: hidden
  cursor: default

  &::selection
    cursor: default

.cannon-ball
  position: absolute
  border-radius: 50%
  background-color: black
  width: 100px
  height: 100px
  z-index: 1

.cannon
  background-color: darkslategray
  border-right: 10px orange solid
  border-radius: 50% 0 0 50%
  cursor: default
  display: none
  position: absolute
  width: 300px
  height: 200px
  margin-top: 200px
  margin-bottom: 100px
  z-index: 2

#coords
  background-color: lightblue
  font-size: 12px
  color: black

#fire
  background-color: $fire-color
  color: white
  font-size: 24px
  border-radius: 100%
  width: 100px
  height: 100px
  cursor: pointer
  transition: all 200ms ease-in-out
  &:hover,
  &:active
    background-color: $fire-hover-color
    transform: scale(1.1)
    font-size: 28px
  &:active
    color: white
    background-color: $fire-color
    transform: translateY(5px)

Use cannon.png for div image

$fire-color: darkred
$fire-hover-color: orangered

body,
html
  height: 100%
  width: 100%
  overflow: hidden
  cursor: default

  &::selection
    cursor: default

.cannon-ball
  position: absolute
  border-radius: 50%
  background-color: black
  width: 100px
  height: 100px
  z-index: 1

.cannon
  background-image: url('../img/cannon.png')
  padding-left: 170px
  width: 512px
  height: 512px
  -webkit-transform-origin: 50% 90%
  z-index: 2

#coords
  background-color: lightblue
  font-size: 12px
  color: black

#fire
  background-color: $fire-color
  color: white
  font-size: 24px
  border-radius: 100%
  width: 100px
  height: 100px
  cursor: pointer
  transition: all 200ms ease-in-out
  &:hover,
  &:active
    background-color: $fire-hover-color
    transform: scale(1.1)
    font-size: 28px
  &:active
    color: white
    background-color: $fire-color
    transform: translateY(5px)


.custom-tooltip
  position: relative
  a
    z-index: 95
  .tooltip-content
    min-width: +emCalc(200px)
    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    z-index: 96
    position: absolute
    margin-top: +emCalc(10px)
    margin-left: +emCalc(-50px)
    background: white
    border: 1px solid $border-color
    padding: +emCalc(20px)

    &:before
      content: ' '
      width: 0
      height: 0
      line-height: 0
      top: +emCalc(-10px)
      left: +emCalc(43px)
      position: absolute
      border-bottom: +emCalc(20px) solid white
      border-right: (+emCalc(20px)*.75) solid transparent
      border-left: (+emCalc(20px)*.75) solid transparent

Add custom tooltip design to foundation tooltip

.custom-tooltip
  position: relative
  a
    z-index: 95
  .tooltip-content
    min-width: +emCalc(200px)
    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
    z-index: 96
    position: absolute
    margin-top: +emCalc(10px)
    margin-left: +emCalc(-50px)
    background: white
    border: 1px solid $border-color
    padding: +emCalc(20px)

    &:before
      content: ' '
      width: 0
      height: 0
      line-height: 0
      top: +emCalc(-10px)
      left: +emCalc(43px)
      position: absolute
      border-bottom: +emCalc(20px) solid white
      border-right: (+emCalc(20px)*.75) solid transparent
      border-left: (+emCalc(20px)*.75) solid transparent

.tooltip
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50)
  background: white
  border: 1px solid $border-color
  color: $body-font-color
  font-weight: normal
  > .nub
    border-bottom-color: white


card
  min-width: 256px
  display: inline-block
  margin: 1em
  vertical-align: top

  sprites > &, tunes > &
    width: 256px

    @include small
      margin: 1em 0 0
      width: 100%

  > .outline
    box-shadow: $item-shadow
    border-radius: 4px
    overflow: hidden

    > a > img
      display: block
      width: 100%
      height: auto
      image-rendering: pixelated

    > .details
      padding: 1em

    > .details
      > .title,
      > .description
        color: $text-color
        word-break: break-word

      > .description
        a
          display: inline-block
          max-width: 100%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap

      > .title
        font-size: 1.5em
        margin-bottom: 0.25em

        > a
          color: $text-color

      > .actions
        > a
          color: $primary-color
          font-weight: bold

Reduce extra margin on first card in mobile view

card
  min-width: 256px
  display: inline-block
  margin: 1em
  vertical-align: top

  sprites > &, tunes > &
    width: 256px

    @include small
      margin: 1em 0 0
      width: 100%

      &:first-child
        margin-top: 0

  > .outline
    box-shadow: $item-shadow
    border-radius: 4px
    overflow: hidden

    > a > img
      display: block
      width: 100%
      height: auto
      image-rendering: pixelated

    > .details
      padding: 1em

    > .details
      > .title,
      > .description
        color: $text-color
        word-break: break-word

      > .description
        a
          display: inline-block
          max-width: 100%
          overflow: hidden
          text-overflow: ellipsis
          white-space: nowrap

      > .title
        font-size: 1.5em
        margin-bottom: 0.25em

        > a
          color: $text-color

      > .actions
        > a
          color: $primary-color
          font-weight: bold


@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,900&subset=cyrillic')

$fa-font-path: "../node_modules/font-awesome/fonts"

$primary-font: 'Roboto', sans-serif

Add additional font weight to Roboto in variables

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,900&subset=cyrillic')

$fa-font-path: "../node_modules/font-awesome/fonts"

$primary-font: 'Roboto', sans-serif


#play-game-dev-level-view
  .container-fluid
    overflow: hidden
    background: #333
    padding: 15px
    min-height: 100vh

  #game-row
    display: flex

  #canvas-wrapper
    width: 100%
    position: relative
    overflow: hidden
    z-index: 0
    border-radius: 5px

  #webgl-surface
    background-color: #333

  #normal-surface
    position: absolute
    top: 0
    left: 0
    pointer-events: none

  canvas#webgl-surface, canvas#normal-surface
    display: block
    z-index: 2

  #info-col
    .panel
      height: 100%
      display: flex
      flex-direction: column

    .panel-body
      flex-grow: 1
      overflow: scroll

    .panel-footer
      min-height: 70px

  #share-panel-body
    display: flex
    align-items: center

    #share-text-div, #copy-url-div
      flex-grow: 1

    #share-text-div
      margin-right: 20px

    #copy-url-input
      width: 50%

    #copy-url-div
      margin-left: 20px

Add max height to info col in PlayGameDevLevelView

#play-game-dev-level-view
  .container-fluid
    overflow: hidden
    background: #333
    padding: 15px
    min-height: 100vh

  #game-row
    display: flex

  #canvas-wrapper
    width: 100%
    position: relative
    overflow: hidden
    z-index: 0
    border-radius: 5px

  #webgl-surface
    background-color: #333

  #normal-surface
    position: absolute
    top: 0
    left: 0
    pointer-events: none

  canvas#webgl-surface, canvas#normal-surface
    display: block
    z-index: 2

  #info-col
    .panel
      height: 100%
      max-height: calc(100vh - 30px)
      display: flex
      flex-direction: column

    .panel-body
      flex-grow: 1
      overflow: scroll

    .panel-footer
      min-height: 70px

  #share-panel-body
    display: flex
    align-items: center

    #share-text-div, #copy-url-div
      flex-grow: 1

    #share-text-div
      margin-right: 20px

    #copy-url-input
      width: 50%

    #copy-url-div
      margin-left: 20px


@import 'styles/colors'

.menu
  top: 0
  right: 0
  min-width: max-content
  font-size: .9rem
  text-transform: uppercase
  position: fixed

  span
    font-size: 1rem
    cursor: default

  div
    align-items: center

  a
    padding: 1rem 0
    margin: 0 .5rem
    transition: .5s ease
    &:hover
      color: $activeColor

Add opacity to hovered item color on LanguageSwitcher

@import 'styles/colors'

.menu
  top: 0
  right: 0
  min-width: max-content
  font-size: .9rem
  text-transform: uppercase
  position: fixed

  span
    font-size: 1rem
    cursor: default

  div
    align-items: center

  a
    padding: 1rem 0
    margin: 0 .5rem
    transition: .5s ease
    &:hover
      color: rgba($activeColor, 0.59)


\:host
    display: flex
    flex: 1

md-sidenav
    width: 320px

md-nav-list, md-nav-list a
    width: 100%

md-sidenav-container, #main-content
    width: 100%
    height: 100%

.sidenav-container
    width: auto
    height: 300px

.sidenav-container md-sidenav
    max-width: 200px

.sidenav-container .mat-sidenav-content,
.sidenav-container md-sidenav
    display: flex
    overflow: visible

.fa
    margin-right: 10px

Change dashboard styles for the container

\:host
    display: flex
    flex: 1

md-sidenav
    width: 320px

md-nav-list, md-nav-list a, md-sidenav-container
    width: 100%

md-sidenav-container
    height: 100%

#main-content
    padding: 3em 5em

.sidenav-container
    width: auto
    height: 300px

.sidenav-container md-sidenav
    max-width: 200px

.sidenav-container .mat-sidenav-content,
.sidenav-container md-sidenav
    display: flex
    overflow: visible

.fa
    margin-right: 10px


body.articles
  h1
    font-size: 2em

  p, .highlight
    font-size: 1.1em
    max-width: 800px
    margin-bottom: 1em

  label
    display: block
  input, textarea
    clear: left
    display: block

  form
    textarea
      margin-bottom: 1em
      min-height: 20em
      min-width: 40em

  footer
    font:
      size: .8em
    text-align: right

  .highlight
    pre
      font:
        size: 0.9em
        family: "SourceCodePro"
      +border-radius(3px)
      padding: 0.5em 1em
      background: #333

body.articles-index
  ul
    clear: both

  .search-bar
    +clearfix
    input[type=text]
      width: 333px
      float: left
      margin-top: 0
    input[type=submit]
      clear: none
      font-size: 1.1em
      height: 36px

Fix overflow of code blocks.

body.articles
  h1
    font-size: 2em

  p, .highlight
    font-size: 1.1em
    max-width: 800px
    margin-bottom: 1em

  label
    display: block
  input, textarea
    clear: left
    display: block

  form
    textarea
      margin-bottom: 1em
      min-height: 20em
      min-width: 40em

  footer
    font:
      size: .8em
    text-align: right

  .highlight
    pre
      overflow: scroll
      color: #fff
      font:
        size: 0.9em
        family: "SourceCodePro"
      +border-radius(3px)
      padding: 0.5em 1em
      background: #333

body.articles-index
  ul
    clear: both

  .search-bar
    +clearfix
    input[type=text]
      width: 333px
      float: left
      margin-top: 0
    input[type=submit]
      clear: none
      font-size: 1.1em
      height: 36px


@import url('//fonts.googleapis.com/css?family=Ubuntu:400,500')
@import compass
@import active_admin/mixins
@import active_admin/base
@import foundation/base_colors
@import active_skin
@import activeadmin-sortable
@import activeadmin_addons/all
@import globals/settings
@import foundation/foundation_and_overrides

@import jquery-ui/core
@import jquery-ui/menu
@import jquery-ui/theme
@import jquery-ui/autocomplete
@import jquery.datetimepicker

@import froala_editor.min
@import froala_style.min
@import themes/royal.min
@import plugins/code_view.min
@import plugins/colors.min
@import plugins/char_counter.min
@import plugins/file.min
@import plugins/image.min
@import plugins/image_manager.min
@import plugins/table.min
@import admin/froala

@import font-awesome
@import mapbox
@import vex
@import vex-theme-plain
@import fotorama

@import modules/logo
@import plugins/mapbox
@import plugins/mapbox-popup
@import admin/base
@import admin/buttons
@import admin/forms
@import admin/header
@import admin/newsletter
@import admin/active_skin_fix
@import admin/vex_fix
@import admin/slick_carousel_fix
@import jquery.minicolors

Move compass import below activeadmin to fix bug with mixin

@import url('//fonts.googleapis.com/css?family=Ubuntu:400,500')
@import active_admin/mixins
@import active_admin/base
@import compass
@import foundation/base_colors
@import active_skin
@import activeadmin-sortable
@import activeadmin_addons/all
@import globals/settings
@import foundation/foundation_and_overrides

@import jquery-ui/core
@import jquery-ui/menu
@import jquery-ui/theme
@import jquery-ui/autocomplete
@import jquery.datetimepicker

@import froala_editor.min
@import froala_style.min
@import themes/royal.min
@import plugins/code_view.min
@import plugins/colors.min
@import plugins/char_counter.min
@import plugins/file.min
@import plugins/image.min
@import plugins/image_manager.min
@import plugins/table.min
@import admin/froala

@import font-awesome
@import mapbox
@import vex
@import vex-theme-plain
@import fotorama

@import modules/logo
@import plugins/mapbox
@import plugins/mapbox-popup
@import admin/base
@import admin/buttons
@import admin/forms
@import admin/header
@import admin/newsletter
@import admin/active_skin_fix
@import admin/vex_fix
@import admin/slick_carousel_fix
@import jquery.minicolors


/* zurb foundation 4 grid column fix for ie8 and below
=columnFix($columns: 12)
  $i: 1
  @while $i < $columns + 1
    $colWidth: $i / $columns * 100%
    $colWidth7: $i / $columns * 98%
    & .large-#{$i}, & .small-#{$i}
      width: $colWidth
      *width: $colWidth7 //sets the width for ie7

    /* allows centering block elements
    & .centered-#{$i}
      margin-left: (100% - $colWidth) / 2
      *margin-left: (98% - $colWidth7) / 2
    $i: $i + 1

  & .columns
    //*padding-left: 1%;
    //*padding-right: 1%;

  & .row .row
    *margin-left: 0 //* fix ie7 margins

Fix large-centered and small-centered for ie

/* zurb foundation 4 grid column fix for ie8 and below
=columnFix($columns: 12)
  $i: 1
  @while $i < $columns + 1
    $colWidth: $i / $columns * 100%
    $colWidth7: $i / $columns * 98%
    & .large-#{$i}, & .small-#{$i}
      width: $colWidth
      *width: $colWidth7 //sets the width for ie7

      /* allows centering block elements
      &.large-centered, &.small-centered
        margin-left: (100% - $colWidth) / 2
        *margin-left: (98% - $colWidth7) / 2
    $i: $i + 1

  & .columns
    //*padding-left: 1%;
    //*padding-right: 1%;

  & .row .row
    *margin-left: 0 //* fix ie7 margins


@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700')

body.rails_admin
  font-family: 'Source Sans Pro', sans-serif
  background: $grayBck

body.rails_admin
  .navbar.navbar-default
    background: $orange
    a.navbar-brand
      color: #a6310f

    .navbar-nav > li > a
      color: #fff

  .nav.nav-tabs
    margin-bottom: 0px

  .sidebar-nav
    background: $grayBck
    .dropdown-header
      font-size: 12px
      font-weight: 600
      margin: 20px 0
      text-transform: uppercase
      color: $cloudyBlue
      padding-left: 15px

    .nav-pills > li
      a
        color: $gray
        font-size: 14px
        i
          display: none
      &.active > a,
      &:hover > a
        background: none
        color: $orange

  .container-fluid
    margin-right: 30px

Use HTTPS instead of HTTP in google font url

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700')

body.rails_admin
  font-family: 'Source Sans Pro', sans-serif
  background: $grayBck

body.rails_admin
  .navbar.navbar-default
    background: $orange
    a.navbar-brand
      color: #a6310f

    .navbar-nav > li > a
      color: #fff

  .nav.nav-tabs
    margin-bottom: 0px

  .sidebar-nav
    background: $grayBck
    .dropdown-header
      font-size: 12px
      font-weight: 600
      margin: 20px 0
      text-transform: uppercase
      color: $cloudyBlue
      padding-left: 15px

    .nav-pills > li
      a
        color: $gray
        font-size: 14px
        i
          display: none
      &.active > a,
      &:hover > a
        background: none
        color: $orange

  .container-fluid
    margin-right: 30px


/* Copyright 2015-2016 Jairo Llopis <jairo.llopis@tecnativa.com>
 * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).

.big-buttons
    .btn
        width: 100%
        white-space: normal

Use bang comment for copyright as recommended in Sass guidelines.

/*! Copyright 2015-2016 Jairo Llopis <jairo.llopis@tecnativa.com>
    License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).

.big-buttons
    .btn
        width: 100%
        white-space: normal


// Place all the styles related to the authors controller here.
// They will automatically be included in application.css.
// You can use Sass here: http://sass-lang.com/

body.authors
  h2
    font:
      size: 1.2em

  ul.authors
    -webkit-column-count: 3
    -webkit-column-gap: 4%
    -moz-column-count: 3
    -moz-column-gap: 4%
    column-count: 3
    column-gap: 4%

body
  .author
    clear: both
    line-height: 1
    .avatar
      float: left
      width: 70px
      height: 70px
      margin-right: 0.5em
      border-radius: 50%
      margin-bottom: 1.5%
    &.inactive
      opacity: .75

    .shtick
      font-weight: bold
      font-size: 0.8em

Fix CSS column overflow bug.

// Place all the styles related to the authors controller here.
// They will automatically be included in application.css.
// You can use Sass here: http://sass-lang.com/

body.authors
  h2
    font:
      size: 1.2em

  ul.authors
    -webkit-column-count: 3
    -webkit-column-gap: 4%
    -moz-column-count: 3
    -moz-column-gap: 4%
    column-count: 3
    column-gap: 4%

body
  .author
    max-width: 92%
    clear: both
    line-height: 1
    .avatar
      float: left
      width: 70px
      height: 70px
      margin-right: 0.5em
      border-radius: 50%
      margin-bottom: 1.5%
    &.inactive
      opacity: .75

    .shtick
      font-weight: bold
      font-size: 0.8em
      max-width: 80%


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

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

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

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

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

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

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

Remove transition on logo hover

#logo img
  &:hover
    opacity: .6

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

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

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

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

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

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


@import fonts
@import colors
@import animations

*
  margin: 0
  padding: 0
  outline: 0
  border: 0
  font-family: 'Montserrat', sans-serif
  list-style: none
  text-decoration: none
  box-sizing: border-box

body, html, .App
  width: 100vw
  height: 100vh
  color: $primaryTextColor
  scroll-behavior: smooth
  -webkit-font-smoothing: antialiased
  overflow: hidden

.App
  display: flex
  align-items: center
  justify-content: center

Add a tag style to receive color by inheritance

@import fonts
@import colors
@import animations

*
  margin: 0
  padding: 0
  outline: 0
  border: 0
  font-family: 'Montserrat', sans-serif
  list-style: none
  text-decoration: none
  box-sizing: border-box

body, html, .App
  width: 100vw
  height: 100vh
  color: $primaryTextColor
  scroll-behavior: smooth
  -webkit-font-smoothing: antialiased
  overflow: hidden

.App
  display: flex
  align-items: center
  justify-content: center

a
  color: inherit


.ls-main
  padding-top: $heightTopbar
  margin-left: 0
  z-index: 2
  overflow: auto
  -webkit-overflow-scrolling: touch
  -moz-overflow-scrolling: touch
  overflow-scrolling: touch
  height: calc(100% - $heightTopbar)
  background-color: #f7f7f7
  position: relative
  z-index: 3
  +single-transition(all, .5s)
  +translate(0, 0)

  .sidebar-visible &
    +translate($sidebarWidth, 0)

.ls-container
  padding: 0 30px

///
/// Titles
///
[class*="ls-title"]
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  -ms-font-smoothing: antialiased
  font-smoothing: antialiased
  font-weight: 400

.ls-title-intro
  font-size: 2.25rem
  font-weight: 300
  color: #000
  padding: 30px 0

  &:before
    margin-right: 10px
    opacity: .15

.ls-title-2, .ls-title-3
  font-size: 1.38rem

@media (min-width: 768px)
  .ls-main
    margin-left: $sidebarWidth
    +single-transition(none)

Remove overflow auto at .ls-main

.ls-main
  padding-top: $heightTopbar
  margin-left: 0
  z-index: 2
  -webkit-overflow-scrolling: touch
  -moz-overflow-scrolling: touch
  overflow-scrolling: touch
  height: calc(100% - $heightTopbar)
  background-color: #f7f7f7
  position: relative
  z-index: 3
  +single-transition(all, .5s)
  +translate(0, 0)

  .sidebar-visible &
    +translate($sidebarWidth, 0)

.ls-container
  padding: 0 30px

///
/// Titles
///
[class*="ls-title"]
  -webkit-font-smoothing: antialiased
  -moz-font-smoothing: antialiased
  -ms-font-smoothing: antialiased
  font-smoothing: antialiased
  font-weight: 400

.ls-title-intro
  font-size: 2.25rem
  font-weight: 300
  color: #000
  padding: 30px 0

  &:before
    margin-right: 10px
    opacity: .15

.ls-title-2, .ls-title-3
  font-size: 1.38rem

@media (min-width: 768px)
  .ls-main
    margin-left: $sidebarWidth
    +single-transition(none)


@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"

#game-dev-track-view
  position: absolute
  display: none
  transition: right 0.25s, opacity 0.125s, z-index 1s
  &:not(playback-float-right)
    right: calc(43% + 10px + #{$api-bar-width})
    z-index: 6
  &.playback-float-right
    right: calc(20% + 10px)
    z-index: 10
  top: 60px

  border: 16px solid black
  border-image: url(/images/pages/play/level-info-background.png) fill 20 stretch

  #listings
    .track-elem
      display: flex
      cursor: default
      .track-icon, .track-text
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        overflow: hidden
        text-align: center
      .track-text
        width: 48px

Fix GameDevTrackView padding for large labels

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "app/styles/play/variables"

#game-dev-track-view
  position: absolute
  display: none
  transition: right 0.25s, opacity 0.125s, z-index 1s
  &:not(playback-float-right)
    right: calc(43% + 10px + #{$api-bar-width})
    z-index: 6
  &.playback-float-right
    right: calc(20% + 10px)
    z-index: 10
  top: 60px

  border: 16px solid black
  border-image: url(/images/pages/play/level-info-background.png) fill 20 stretch

  #listings
    .track-elem
      display: flex
      cursor: default
      .track-icon, .track-text
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        overflow: hidden
        text-align: center
      .track-text
        min-width: 48px
        padding-left: 10px


@import mixins
@import variables
@import branding

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

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

.producer-logo
  max-width: 220px

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

Add a small hero image class

@import mixins
@import variables
@import branding

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

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

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

.producer-logo
  max-width: 220px

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


// Application
@import partials/content/invoice

#balance-sheet form,
#profit-sheet form
  display: none

#balance-sheet, #profit-sheet
  background: white

// Lists
table.list
  border: none

table.list th
  background-color: white
  border-bottom: 1px solid gray

// pagination
.digg_pagination
  display: none

Hide some navigational elements for print.

// Application
@import partials/content/invoice

.topbar,
.tabs,
.sidebar,
.pagination,
#balance-sheet form,
#profit-sheet form
  display: none

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

#balance-sheet, #profit-sheet
  background: white

// Lists
table.list
  border: none

table.list th
  background-color: white
  border-bottom: 1px solid gray

// pagination
.digg_pagination
  display: none


//- 💫 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

p:empty
    margin-bottom: 0

//- 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

Add global focus style for links

//- 💫 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

p:empty
    margin-bottom: 0

//- Links

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

a:focus
    outline: 1px dotted $color-theme

//- Selection

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


.bpe--location-input
  background: white
  position: absolute
  top: 10px
  right: 10px
  z-index: 100
  width: 400px
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25)

.bpe--location-input--input
  display: block
  margin: 20px
  padding: 5px
  padding-right: 30px
  width: calc(100% - 70px)

.bpe--location-input--reset
  position: absolute
  right: 20px
  top: 13px
  z-index: 1000
  font-size: 3rem
  font-weight: 100
  cursor: pointer

.bpe--location-input--reset:hover
  text-decoration: none

Allow hiding location input reset in ms browsers

.bpe--location-input
  background: white
  position: absolute
  top: 10px
  right: 10px
  z-index: 100
  width: 400px
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.25)

.bpe--location-input--input
  display: block
  margin: 20px
  padding: 5px
  padding-right: 30px
  width: calc(100% - 70px)

.bpe--location-input--reset
  position: absolute
  right: 20px
  top: 13px
  z-index: 1000
  font-size: 3rem
  font-weight: 100
  cursor: pointer

  .browser-edge &,
  .browser-msie &
    display: none

.bpe--location-input--reset:hover
  text-decoration: none


.card-footer-item
  &.is-loading
    &> *
      display: none
    &:after
      @extend .round-spinner
    pointer-events: none

  &.is-danger
    @extend .button.is-danger
  &.is-warning
    @extend .button.is-warning
  &.is-success
    @extend .button.is-success

  .icon
    margin-right: 5px

Remove useless SASS rules that generate warnings with ruby SASS binary

.card-footer-item
  &.is-loading
    &> *
      display: none
    &:after
      @extend .round-spinner
    pointer-events: none

  .icon
    margin-right: 5px


@import 'lib/settings'

.mod-navigation
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		max-width: 20vw
		max-height: 20vw
		border-radius: 50%
		position: relative
		margin: 0 auto
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #d4d3d1 url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)

Update navball dimensions and alignment

@import 'lib/settings'

.mod-navigation
	display: flex
	flex-flow: column nowrap
	justify-content: center
	.navball
		background: #555
		box-shadow: inset 0 .1em .8em #000, inset 0 1px 0 #000, 0 1px 0 #fff
		min-width: 10em
		min-height: 10em
		max-width: 20vw
		max-height: 20vw
		border-radius: 50%
		position: relative
		margin: 0 auto
		&::after
			content: ''
			display: block
			position: absolute
			width: 1em
			height: 1em
			top: 50%
			left: 50%
			transform: translate(-50%, -50%)
			border-radius: 50%
			border: 3px solid #f00
	.heading
		position: absolute
		bottom: -1px
		left: 50%
		transform: translate(-50%, 0)
		background: #d4d3d1 url('/img/noise.png')
		padding: ($quarter-gutter / 2) 0 0 0
		width: 5em
		text-align: center
		border-top-left-radius: 2em
		border-top-right-radius: 2em
		box-shadow: 0 -1px 0 rgba(#fff, 1)


// 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%)


article.component-timeline
  article[class^="component-"]
    .inner
      text-align: center

      img
        display: none

      h1
        position: relative
        z-index: 0

        &:before
          content: ''
          position: absolute
          border-radius: 50%
          background-color: $text-black
          +square(8px)
          top: 30px
          left: 50%
          margin-left: -4px

        &:after
          content: ''
          position: absolute
          top: 34px
          border-top: 1px solid $text-black
          width: 100%
          width: calc(100% + 20px)
          left: 0
          z-index: -1

  article[class^="component-"]:nth-child(-n+2)
    .inner
      h1
        &:after
          width: 50%
          left: 50%

  article[class^="component-"]:nth-last-child(2)
    .inner
      h1
        &:after
          width: 50%
          right: 50%

  article[class^="component-"]
    .inner[min-width~="650px"]
      h1:before,
      h1:after
        display: none

      img
        +size(auto, 220px)
        display: block
        float: left
        margin: 0 30px 10px 0

      .text
        text-align: left

Update Timeline Item CSS - Remove padding of nested element to keep timeline's line joined (xs)

article.component-timeline
  .inner
    article[class^="component-"]
      padding: 0 0

      .inner
        text-align: center

        img
          display: none

        h1
          position: relative
          z-index: 0

          &:before
            content: ''
            position: absolute
            border-radius: 50%
            background-color: $text-black
            +square(8px)
            top: 30px
            left: 50%
            margin-left: -4px

          &:after
            content: ''
            position: absolute
            top: 34px
            border-top: 1px solid $text-black
            width: 100%
            width: calc(100% + 20px)
            left: 0
            z-index: -1

    article[class^="component-"]:nth-child(-n+2)
      .inner
        h1
          &:after
            width: 50%
            left: 50%

    article[class^="component-"]:nth-last-child(2)
      .inner
        h1
          &:after
            width: 50%
            right: 50%

    article[class^="component-"]
      .inner[min-width~="650px"]
        h1:before,
        h1:after
          display: none

        img
          +size(auto, 220px)
          display: block
          float: left
          margin: 0 30px 10px 0

        .text
          text-align: left


/**
 * RESET
 */

body
  background-color: white

@-ms-viewport
  width: device-width
@-o-viewport
  width: device-width
@viewport
  width: device-width

*
  +box-sizing( border-box )
  -webkit-text-size-adjust: 100%
  -webkit-tap-highlight-color: rgba( black, 0 )

a
  -webkit-touch-callout: none

h1
  font-size: 32px

h2
  font-size: 24px

h3
  font-size: 18px

h4
  font-size: 16px

h5
  font-size: 13px

h6
  font-size: 10px

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

h1,
h2,
h3,
h4,
h5,
p,
ul,
dl,
dt,
dd
  @extend %no-margin-padding

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal

Add h6, ol and block quote to margin and padding reset

/**
 * RESET
 */

body
  background-color: white

@-ms-viewport
  width: device-width
@-o-viewport
  width: device-width
@viewport
  width: device-width

*
  +box-sizing( border-box )
  -webkit-text-size-adjust: 100%
  -webkit-tap-highlight-color: rgba( black, 0 )

a
  -webkit-touch-callout: none

h1
  font-size: 32px

h2
  font-size: 24px

h3
  font-size: 18px

h4
  font-size: 16px

h5
  font-size: 13px

h6
  font-size: 10px

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

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
dl,
dt,
dd,
blockquote
  @extend %no-margin-padding

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal


// Place all the styles related to the todos controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.activity-items
  .activity-item-todo
    span.activate
    span.deactivate
      text-decoration: line-through

.content-todo-list
  .content-item-todo
    padding-top: 10px
    padding-bottom: 10px
    .spacer
      display: none
    .move-handle
      background: url(/assets/move-todo.png) top center no-repeat
      height: 20px
      margin-left: 14px!important
      margin-top: 12px
    .content-item-options
      width: 90px
      left: -60px
      top: 2px
      ul.nav.nav-pills
        margin: 0
        padding-left: 3px
        display: inline-block
        background: white
        border-radius: 5px

form.todo
  label
    display: none
  .controls
    margin-left: 0
    input
      width: 99%!important

Switch position of item options for todo items

// Place all the styles related to the todos controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.activity-items
  .activity-item-todo
    span.activate
    span.deactivate
      text-decoration: line-through

.content-todo-list
  .content-item-todo
    padding-top: 10px
    padding-bottom: 10px
    .spacer
      display: none
    .move-handle
      background: url(/assets/move-todo.png) top center no-repeat
      height: 20px
      margin-left: 14px!important
      margin-top: 12px
    .content-item-options
      width: 90px
      left: -60px
      top: 2px
      ul.nav.nav-pills
        margin: 0
        padding-left: 3px
        display: inline-block
        background: white
        border-radius: 5px
        > li
          float: right

form.todo
  label
    display: none
  .controls
    margin-left: 0
    input
      width: 99%!important


@import "compass/css3"

@import "base/_variables"
@import "base/_helper-classes"
@import "base/_mixins"
@import "base/_colors"
@import "base/_reset"
@import "base/_base"
@import "base/_fonts"
@import "base/_buttons"

@import "_vendor/bootstrap/grid"

@import "modules/_table"
@import "modules/_topbar"
@import "modules/_sidebar"
@import "modules/_footer"
@import "modules/_well"
@import "modules/_board-info"
@import "modules/_accordeon"
@import "modules/_collapse"
@import "modules/_popover"
@import "modules/_tabs"

Add file style to labels.

@import "compass/css3"

@import "base/_variables"
@import "base/_helper-classes"
@import "base/_mixins"
@import "base/_colors"
@import "base/_reset"
@import "base/_base"
@import "base/_fonts"
@import "base/_buttons"
@import "base/_labels"

@import "_vendor/bootstrap/grid"

@import "modules/_table"
@import "modules/_topbar"
@import "modules/_sidebar"
@import "modules/_footer"
@import "modules/_well"
@import "modules/_board-info"
@import "modules/_accordeon"
@import "modules/_collapse"
@import "modules/_popover"
@import "modules/_tabs"


@import ../../vendor/lib

.AffiliateLinkButton
  transition: background-color $speed ease, color $speed ease
  vertical-align: middle
  overflow: hidden
  width: rem(40)
  height: rem(40)
  border-radius: rem(20)
  line-height: rem(40)
  text-align: center
  white-space: nowrap
  background-color: white
  color: rgba(white, 0)
  position: absolute
  z-index: 2
  top: rem(40)
  right: rem(30)

.AffiliateLinkButton > .SVGIcon.MoneyIcon > g
  fill: black
  stroke-width: 0.5
  stroke: transparent

.editable[contenteditable] + .AffiliateLinkButton
  display: none

.EmbedRegion .AffiliateLinkButton,
.RegionContent .AffiliateLinkButton
  top: rem(10)
  right: rem(10)

.EmbedRegion .embetter a
  line-height: rem(40)

@media(min-width: #{$break-2})
  .no-touch .AffiliateLinkButton:hover
    color: white
    background-color: #00d100
  .no-touch .AffiliateLinkButton:hover > .SVGIcon.MoneyIcon > g
    fill: white
    stroke: white

Move dollar sign up 1px in affiliate link button.

@import ../../vendor/lib

.AffiliateLinkButton
  transition: background-color $speed ease, color $speed ease
  vertical-align: middle
  overflow: hidden
  width: rem(40)
  height: rem(40)
  border-radius: rem(20)
  line-height: rem(39)
  text-align: center
  white-space: nowrap
  background-color: white
  color: rgba(white, 0)
  position: absolute
  z-index: 2
  top: rem(40)
  right: rem(30)

.AffiliateLinkButton > .SVGIcon.MoneyIcon > g
  fill: black
  stroke-width: 0.5
  stroke: transparent

.editable[contenteditable] + .AffiliateLinkButton
  display: none

.EmbedRegion .AffiliateLinkButton,
.RegionContent .AffiliateLinkButton
  top: rem(10)
  right: rem(10)

.EmbedRegion .embetter a
  line-height: rem(40)

@media(min-width: #{$break-2})
  .no-touch .AffiliateLinkButton:hover
    color: white
    background-color: #00d100
  .no-touch .AffiliateLinkButton:hover > .SVGIcon.MoneyIcon > g
    fill: white
    stroke: white