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

Add global style for mdl card background color

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


// https://github.com/wilsonpage/sass-import-once
$modules: () !default
@mixin exports($name)
    @if (index($modules, $name) == false)
        $modules: append($modules, $name) !global
        @content

@import "composer/Image"
@import "composer/Embed"
@import "composer/Text"

Remove the !global because that's a Sass 3.3 thing

// https://github.com/wilsonpage/sass-import-once
$modules: () !default
@mixin exports($name)
    @if (index($modules, $name) == false)
        $modules: append($modules, $name)
        @content

@import "composer/Image"
@import "composer/Embed"
@import "composer/Text"


.post__meta
  +font-size(13)
  color: $feature-copy

  &.text-icon--clock:before
    +font-size(22)
    margin-right: 0.2em
    position: relative
    top: 2px
  .user__username--link
    color: $header-grey
    font-weight: bold
  .timeago
    margin: 0 0.25em

.post-stats__icon
  margin-right: -20px
  width: 60px
.post-stats__icon
  +font-size(13)
  color: $feature-copy
  font-weight: bold
  line-height: 1.5em
  text-align: center

  &:before
    +font-size(35)
    display: block
    font-weight: normal
  &.no-comments
    opacity: 0.4
    position: relative
    &:after
      +transform(rotateZ(40deg))
      background: $feature-copy
      content: ' '
      position: absolute
      height: 2px
      left: 19px
      top: 11px
      width: 22px

Add styling for post view link.

.post__meta
  +font-size(13)
  color: $feature-copy

  &.text-icon--clock:before
    +font-size(22)
    margin-right: 0.2em
    position: relative
    top: 2px
  .user__username--link
    color: $header-grey
    font-weight: bold
  .timeago
    margin: 0 0.25em

.post-stats
  margin-left: 20px
  position: relative
  z-index: 2
.post-stats__icon
  margin-right: -20px
  width: 60px
.post-stats__icon
  +font-size(13)
  color: $feature-copy
  font-weight: bold
  line-height: 1.5em
  text-align: center

  &:before
    +font-size(35)
    display: block
    font-weight: normal
  &.no-comments
    opacity: 0.4
    position: relative
    &:after
      +transform(rotateZ(40deg))
      background: $feature-copy
      content: ' '
      position: absolute
      height: 2px
      left: 19px
      top: 11px
      width: 22px

.post-view-link
  +border-radius-each(0, 4, 4, 0)
  +font-size(40)
  @extend %chevron-right-before
  @extend %transition--base
  background: $details-panel-bg
  color: $feature-copy
  height: 100%
  opacity: 0
  position: absolute
  right: 0
  text-align: center
  top: 0
  width: 60px
  z-index: 1
  .card:hover &
    opacity: 1
    text-decoration: none
  &:before
    position: relative
    top: 45%


@charset "UTF-8"

@import compass/reset
@import compass

@import config
@import type
@import utilities
@import fonts
@import tables
@import typography
@import forms

@import print/non_printing
@import print/layout

Include media mixins in the print stylesheet

@charset "UTF-8"

@import compass/reset
@import compass

@import config
@import media
@import type
@import utilities
@import fonts
@import tables
@import typography
@import forms

@import print/non_printing
@import print/layout


.background
  position: fixed
  $list: $blue, $light-blue
  background: $medium-blue
  @include gradient(to bottom, $list)
  bottom: 0
  width: 100%
  height: 100%
  overflow: hidden
  +max-width($small)
    display: none

  &__front
    background: url(/images/background-front.svg) left bottom no-repeat
    bottom: 0
    left: 10%
    position: absolute
    height: 100%
    width: 100%

  &__back
    background: url(/images/background-back.svg) left bottom repeat-x
    bottom: 0
    left: 0
    position: absolute
    height: 200px
    width: 100%

Make language switcher visible once again

.background
  position: fixed
  $list: $blue, $light-blue
  background: $medium-blue
  @include gradient(to bottom, $list)
  bottom: 0
  width: 100%
  height: 100%
  overflow: hidden
  z-index: -1
  +max-width($small)
    display: none

  &__front
    background: url(/images/background-front.svg) left bottom no-repeat
    bottom: 0
    left: 10%
    position: absolute
    height: 100%
    width: 100%

  &__back
    background: url(/images/background-back.svg) left bottom repeat-x
    bottom: 0
    left: 0
    position: absolute
    height: 200px
    width: 100%


.partner-return-to
  background-color: #CCE3DB
  text-align: center
  height: 30px
  width: 100%
  padding-top: 8px
  position: fixed
  left: 0px
  bottom: 0px

.partner-logo
  height: 22px
  margin-left: .3em
  vertical-align: bottom

Make partner logo & footer height more prominent

.partner-return-to
  background-color: #CCE3DB
  text-align: center
  height: 40px
  width: 100%
  padding-top: 8px
  position: fixed
  left: 0px
  bottom: 0px

.partner-logo
  height: 32px
  margin-left: .3em
  vertical-align: bottom


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

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

Add default to color variable

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

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


.Comments
  position: relative

.Comments > .SVGIcon
  position: absolute
  top: rem(22)
  left: 0

.CommentsLink
  +sanserif
  margin-left: rem(60)
  color: #aaa
  border-bottom: 1px solid #aaa
  line-height: rem(10)

.CommentUsername
  transition: color $speed
  color: #aaa
.no-touch .CommentHeader .PostHeaderLink:hover .CommentUsername
  color: black

.Comments .TimeAgoTool
  color: #aaa

.PostHeader.CommentHeader
  height: rem(45)

.CommentBody
  padding-left: rem(60)

.PostTools.CommentTools
  padding-left: rem(60)
  padding-top: inherit

Fix coloring of timeago in comments

.Comments
  position: relative

.Comments > .SVGIcon
  position: absolute
  top: rem(22)
  left: 0

.CommentsLink
  +sanserif
  margin-left: rem(60)
  color: #aaa
  border-bottom: 1px solid #aaa
  line-height: rem(10)

.CommentUsername
  transition: color $speed
  color: #aaa
.no-touch .CommentHeader .PostHeaderLink:hover .CommentUsername
  color: black

.Comments .TimeAgoTool,
.CommentTools .TimeAgoTool
  color: #aaa

.PostHeader.CommentHeader
  height: rem(45)

.CommentBody
  padding-left: rem(60)

.PostTools.CommentTools
  padding-left: rem(60)
  padding-top: inherit


.row--secondary
  @extend %secondary-gradient
  @extend %clearfix
  @include box-shadow(0, 2, 1, 1, rgba(0, 0, 0, 0.1), true)
  padding: 11px 0

.row__title--secondary
  @extend %benton-regular
  @extend %no-margin
  @extend %prevent-text-breakouts
  background: none
  color: #fff
  float: left
  font-size: 28px
  line-height: 32px
  max-width: 380px
  > h1
    font-size: 28px

.row__inner--secondary
  min-height: 32px

// ----------------------------------------------------------------------------
//
// secondary-nav
//
// ----------------------------------------------------------------------------

.nav--secondary
  @extend %absolute-bottom
  @extend %helvetica-neue
  @extend %uppercase
  right: 0
  text-align: right

.nav__item--secondary
  @extend %small-type
  @extend %inline-block
  padding: 7px 8px 7px
  line-height: 18px
  color: $nav-secondary-type--legacy
  &:hover
    color: $nav-secondary-type-hover--legacy
    text-decoration: none
  &:active
    color: $nav-secondary-type--legacy
  &.current
    @include border-radius(4)
    background-color: $nav-secondary-current-item-bck--legacy
    color: $nav-secondary-type-active--legacy

Stop hover state on legacy second level heading and increase width of it

.row--secondary
  @extend %secondary-gradient
  @extend %clearfix
  @include box-shadow(0, 2, 1, 1, rgba(0, 0, 0, 0.1), true)
  padding: 11px 0

.row__title--secondary
  @extend %benton-regular
  @extend %no-margin
  @extend %prevent-text-breakouts
  background: none
  color: #fff
  float: left
  font-size: 28px
  line-height: 32px
  max-width: 400px
  > h1
    font-size: 28px
  &:hover
    max-width: 400px

.row__inner--secondary
  min-height: 32px

// ----------------------------------------------------------------------------
//
// secondary-nav
//
// ----------------------------------------------------------------------------

.nav--secondary
  @extend %absolute-bottom
  @extend %helvetica-neue
  @extend %uppercase
  right: 0
  text-align: right

.nav__item--secondary
  @extend %small-type
  @extend %inline-block
  padding: 7px 8px 7px
  line-height: 18px
  color: $nav-secondary-type--legacy
  &:hover
    color: $nav-secondary-type-hover--legacy
    text-decoration: none
  &:active
    color: $nav-secondary-type--legacy
  &.current
    @include border-radius(4)
    background-color: $nav-secondary-current-item-bck--legacy
    color: $nav-secondary-type-active--legacy


/**
 *
 */
.view-board
	.content
		@include display(flex)
		@include flex-direction(column)

		.scrollable
			@include flex(1)
/**
 *
 */
.board
	background-size:  cover
	background-color: $gallery

	.board-helper
		color:     $silver-chalice
		font-size: 20px

		@include position(fixed, 180px null null 256px)

Fix overflow issues on Firefox.

/**
 *
 */
.view-board
	.content
		@include display(flex)
		@include flex-direction(column)

		// Fix issues with Firefox not respecting ANYTHING
		overflow: hidden

		.scrollable
			@include flex(1)
/**
 *
 */
.board
	background-size:  cover
	background-color: $gallery

	.board-helper
		color:     $silver-chalice
		font-size: 20px

		@include position(fixed, 180px null null 256px)


// *************************************
//
//   Guide
//   -> A guide card
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .guide
//   .guide-content
//     .guide-title
//     .guide-meta
//
// *************************************

.guide
  animation: guide-slide 5s infinite linear
  animation-play-state: paused
  background-image: image-url('bg-pattern.svg')
  background-position: 0 0
  background-repeat: repeat
  letter-spacing: 0.05em
  min-height: 5em
  position: relative

  +state
    animation-play-state: running

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

// ----- Content ----- //

.guide-content
  left: 50%
  position: absolute
  text-align: center
  top: 50%
  transform: translate(-50%, -50%)
  width: 90%

// ----- Meta ----- //

.guide-meta
  color: rgba($c-text-invert, 0.45)
  font-weight: normal
  margin-bottom: 0

// ----- Title ----- //

.guide-title
  color: $c-text-invert
  font-size: 160%
  margin-bottom: 0

// -------------------------------------
//   Animation
// -------------------------------------

@keyframes guide-slide
  from
    background-position: 0 0
  to
    background-position: 320px 0

Improve contrast between guide title & background

// *************************************
//
//   Guide
//   -> A guide card
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// .guide
//   .guide-content
//     .guide-title
//     .guide-meta
//
// *************************************

.guide
  animation: guide-slide 5s infinite linear
  animation-play-state: paused
  background-image: image-url('bg-pattern.svg')
  background-position: 0 0
  background-repeat: repeat
  letter-spacing: 0.05em
  min-height: 5em
  position: relative
  text-shadow: rgba(0,0,0,.4) 0 0 0.5em

  +state
    animation-play-state: running

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

// ----- Content ----- //

.guide-content
  left: 50%
  position: absolute
  text-align: center
  top: 50%
  transform: translate(-50%, -50%)
  width: 90%

// ----- Meta ----- //

.guide-meta
  color: rgba($c-text-invert, 0.45)
  font-weight: normal
  margin-bottom: 0

// ----- Title ----- //

.guide-title
  color: $c-text-invert
  font-size: 160%
  margin-bottom: 0

// -------------------------------------
//   Animation
// -------------------------------------

@keyframes guide-slide
  from
    background-position: 0 0
  to
    background-position: 320px 0


.blog-posts_title
  font:
    size: 1.1875rem
    weight: 600
  text-transform: uppercase
  color: lighten($color-dark, 65%)

.posts-carousel
  @extend %flexbox
  +align-items(stretch)
  height: 10.9375rem

.posts-carousel_item
  @extend %flexbox
  +align-items(center)
  overflow: hidden
  max-width: 28.125rem
  margin-right: 1.5625rem
  border-radius: .3125rem
  box-shadow: 0 .1875rem .3125rem rgba(0,0,0,.1)

.posts-carousel_image
  width: 10.9375rem
  margin: 0

.posts-carousel_title
  margin: 0 1.5625rem
  font:
    size: 1.3125rem
    weight: 600
  color: lighten($color-dark, 44%)

.posts-more
  @extend %flexbox
  +align-items(center)
  +justify-content(center)
  width: 10.9375rem
  font:
    size: 3.75rem
    weight: 900
  color: lighten($color-dark, 44%)
  background-color: lighten($color-dark, 93%)
  border-radius: .3125rem

Fix margin in blog posts title

.blog-posts_title
  margin: 1.5625rem 0
  font:
    size: 1.1875rem
    weight: 600
  text-transform: uppercase
  color: lighten($color-dark, 65%)

.posts-carousel
  @extend %flexbox
  +align-items(stretch)
  height: 10.9375rem

.posts-carousel_item
  @extend %flexbox
  +align-items(center)
  overflow: hidden
  max-width: 28.125rem
  margin-right: 1.5625rem
  border-radius: .3125rem
  box-shadow: 0 .1875rem .3125rem rgba(0,0,0,.1)

.posts-carousel_image
  width: 10.9375rem
  margin: 0

.posts-carousel_title
  margin: 0 1.5625rem
  font:
    size: 1.3125rem
    weight: 600
  color: lighten($color-dark, 44%)

.posts-more
  @extend %flexbox
  +align-items(center)
  +justify-content(center)
  width: 10.9375rem
  font:
    size: 3.75rem
    weight: 900
  color: lighten($color-dark, 44%)
  background-color: lighten($color-dark, 93%)
  border-radius: .3125rem


@import "bourbon/bourbon"
@import "util/exports"
@import "select/select-box"
@import "vars/radio"
@import "vars/radio-group"

+exports("radio/radio-group")

  .#{$prefix}#{$radio-group-class}
    padding-left: 0

Correct share var import path.

@import "bourbon/bourbon"
@import "util/exports"
@import "select/select-box"
@import "vars/radio-button"
@import "vars/radio-group"

+exports("radio/radio-group")

  .#{$prefix}#{$radio-group-class}
    padding-left: 0


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

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

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

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

Configure overflow on feedback info blocks

.feedback-info
  background: $light-grey
  border-radius: 2px
  float: left
  margin: 0.5em
  overflow: hidden
  padding: 0.5em
  text-overflow: ellipsis
  white-space: nowrap
  width: 30%

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

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

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


.social-links
  list-style: none
  margin: 0
  padding: 0

  li
    margin: 0 0 0 10px
    padding: 0
    float: none
    display: inline-block

    &:first-child
      margin: 0

Remove text-decoration on social media icons hover

.social-links
  list-style: none
  margin: 0
  padding: 0

  li
    margin: 0 0 0 10px
    padding: 0
    float: none
    display: inline-block

    &:first-child
      margin: 0

    a:hover
      text-decoration: none


@import ./homePanel
@import ./boardPanel
@import ./threadPanel
@import ./globalPanel
@import ./settingsPanel

$background-color1: $grey-dark
$background-color2: $black

// set pages offscreen
.page
    +set-dims(100vw, 100vh)
    position: fixed
    top: 100%
    background: $black
    background: linear-gradient(135deg, $background-color2, $background-color1, $background-color2)

.page-home
    z-index: 1

.page-board
    z-index: 10

.page-thread
    z-index: 100

.page-settings
    z-index: 1000

.page-global
    z-index: 10000

Add background image to pages and tint with primary

@import ./homePanel
@import ./boardPanel
@import ./threadPanel
@import ./globalPanel
@import ./settingsPanel

$background-color1: $grey-dark
$background-color2: $black

// set pages offscreen
.page
    +set-dims(100vw, 100vh)
    position: fixed
    top: 100%
    background: $black
    // background: linear-gradient(135deg, $background-color2, $background-color1, $background-color2)
    background: url('/backgrounds/dark_wall.png')

    &:after
        content: ""
        position: absolute
        pointer-events: none
        background: primary-opacity(0.01)
        +set-dims(inherit, inherit)
        top: 0
        left: 0
        z-index: 1

    > *
        z-index: 2

.page-home
    z-index: 1

.page-board
    z-index: 10

.page-thread
    z-index: 100

.page-settings
    z-index: 1000

.page-global
    z-index: 10000


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

.tag-header
  margin:
    bottom: 80px

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

.large-bumper
  margin-bottom: $large-margin / 2

Remove bumper spacing from last tag list item

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

.tag-header
  margin:
    bottom: 80px

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

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


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

html, body
  width: 100%
#wak
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 48px
  color: #333333
  text-align: center
  width: 100%

Fix width bug on html and body

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

#wak
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 48px
  color: #333333
  text-align: center


@import "utils"
@import "colors"

=image($path, $width, $heigth)
  background: url($path)
  background-size: $width $heigth
  display: inline-block
  width: $width
  height: $heigth

.brand
  +image("assets/tldr.svg", 105px, 30px)

.brand.small
  +image("assets/tldr.svg", 52px, 15px)
  position: relative
  top: 3px

nav
  +reset
  height: 64px
  border-bottom: 1px solid $outline

  .content
    +reset
    margin: 0 auto
    +adaptive("max-width", 300px, 720px, 720px)

  a.brand
    margin-top: 16px

  input
    display: inline-block
    position: absolute
    margin-top: 12px
    +adaptive("margin-left", 5px, 30px, 30px)

    height: 38px
    +adaptive("width", 165px, 220px, 220px)
    +adaptive("max-width", 165px, 60%, 60%)

    border: 1px solid $outline

    font-size: 16pt
    +adaptive("padding", 0px 6px, 0px 12px, 0px 12px)

    &:focus
      outline-color: $outline

Set radius 0 for when it's defaulted to something else

@import "utils"
@import "colors"

=image($path, $width, $heigth)
  background: url($path)
  background-size: $width $heigth
  display: inline-block
  width: $width
  height: $heigth

.brand
  +image("assets/tldr.svg", 105px, 30px)

.brand.small
  +image("assets/tldr.svg", 52px, 15px)
  position: relative
  top: 3px

nav
  +reset
  height: 64px
  border-bottom: 1px solid $outline

  .content
    +reset
    margin: 0 auto
    +adaptive("max-width", 300px, 720px, 720px)

  a.brand
    margin-top: 16px

  input
    display: inline-block
    position: absolute
    margin-top: 12px
    +adaptive("margin-left", 5px, 30px, 30px)

    height: 38px
    +adaptive("width", 165px, 220px, 220px)
    +adaptive("max-width", 165px, 60%, 60%)

    border: 1px solid $outline
    border-radius: 0px

    font-size: 16pt
    +adaptive("padding", 0px 6px, 0px 12px, 0px 12px)

    &:focus
      outline-color: $outline


@import "rails-sass-images"

*
  margin: 0
  padding: 0

body
  color: #333
  background: #f8f8f8
  background-image: inline("noise.png")
  text-align: center
  font: 15px Cuprum, sans-serif
  text-shadow: 1px 1px 0 white

.person
  padding: 10px

.images
  width: 220px
  height: 220px
  position: relative
  margin: 70px auto 80px auto

.mask
  position: absolute
  top: 0
  left: -8px
  +hidpi-inline("mask.png")

.photo
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: 50%
  background-size: 100% 100%
  box-shadow: 1px 1px 0 white

.images
  perspective: 400px
  cursor: pointer
.mask, .photo
  backface-visibility: hidden
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1)
.photo
  transform: rotateY(-180deg)

.name
  font-weight: normal
  font-size: 46px

Fix no tap highlight on mobile

@import "rails-sass-images"

@mixin no-tap-highlight
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0)

*
  margin: 0
  padding: 0

body
  color: #333
  background: #f8f8f8
  background-image: inline("noise.png")
  text-align: center
  font: 15px Cuprum, sans-serif
  text-shadow: 1px 1px 0 white

.person
  padding: 10px

.images
  width: 220px
  height: 220px
  position: relative
  margin: 70px auto 80px auto

.mask, .photo
  cursor: pointer
  +no-tap-highlight

.mask
  position: absolute
  top: 0
  left: -8px
  +hidpi-inline("mask.png")

.photo
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  border-radius: 50%
  background-size: 100% 100%
  box-shadow: 1px 1px 0 white

.images
  perspective: 400px
.mask, .photo
  backface-visibility: hidden
  transition: transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1)
.photo
  transform: rotateY(-180deg)

.name
  font-weight: normal
  font-size: 46px


// Custom sass code

div#toc-container
  float: right
  display: block
  margin: 1em
  max-width: 35%

div.alert-box
  display: flex !important

h1
  border-bottom: 2px solid black

h2
  border-bottom: 1px solid black

div#article_content
  margin-bottom: 3em

div#footer
  position: fixed
  height: 2em
  bottom: 0
  color: #aaa
  width: 100%
  background-color: $oil

.gist-file
  margin-bottom: 1em !important
  margin-top: 1em !important
  border-radius: 0px !important

Add maximum width to article content.

// Custom sass code

div#toc-container
  float: right
  display: block
  margin: 1em
  max-width: 35%

div.alert-box
  display: flex !important

h1
  border-bottom: 2px solid black

h2
  border-bottom: 1px solid black

div#article_content
  margin-bottom: 3em
  max-width: 1000px

div#footer
  position: fixed
  height: 2em
  bottom: 0
  color: #aaa
  width: 100%
  background-color: $oil

.gist-file
  margin-bottom: 1em !important
  margin-top: 1em !important
  border-radius: 0px !important


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

.hv-glow
	transition: box-shadow .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		box-shadow: 0 0 12px rgba(0, 0 , 0, .4)

.hv-opacity
	transition: opacity .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		opacity: .750

.hv-opacity-reverse
	opacity: .750
	transition: opacity .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		opacity: 1

.hv-underline
	&:hover,
	&:focus,
	&:active
		text-decoration: underline

.hv-pointer
	&:hover
		cursor: pointer

Use .hover-name instead of .hv-name

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

.hover-glow
	transition: box-shadow .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		box-shadow: 0 0 12px rgba(0, 0 , 0, .4)

.hover-opacity
	transition: opacity .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		opacity: .750

.hover-opacity-reverse
	opacity: .750
	transition: opacity .2s ease-in-out
	&:hover,
	&:focus,
	&:active
		opacity: 1

.hover-underline
	&:hover,
	&:focus,
	&:active
		text-decoration: underline

.hover-pointer
	&:hover
		cursor: pointer


@import ../../vendor/lib

.SearchBar
  max-width: rem(680)
  padding: rem(20) rem(10) rem(10)

.Search .FormControl
  max-width: none

.Search .SearchControl .FormControlInput
  +sans-bold-family
  font-size: rem(24)

.Search .SearchControl .FormControlLabel
  display: none

.Search .SearchTabList
  margin-top: rem(20)

@media(min-width: #{$break-2})
  .SearchBar
    margin: 0 auto
    padding: rem(40) rem(20) rem(10)
  .Search .SearchTabList
    margin-top: rem(18)
  .SearchBar + .StreamComponent .Users.asList
    margin: 0 auto
    max-width: rem(680)

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

Add some bottom padding to the search view.

@import ../../vendor/lib

.Search
  padding-bottom: rem(80)

.SearchBar
  max-width: rem(680)
  padding: rem(20) rem(10) rem(10)

.Search .FormControl
  max-width: none

.Search .SearchControl .FormControlInput
  +sans-bold-family
  font-size: rem(24)

.Search .SearchControl .FormControlLabel
  display: none

.Search .SearchTabList
  margin-top: rem(20)

@media(min-width: #{$break-2})
  .SearchBar
    margin: 0 auto
    padding: rem(40) rem(20) rem(10)
  .Search .SearchTabList
    margin-top: rem(18)
  .SearchBar + .StreamComponent .Users.asList
    margin: 0 auto
    max-width: rem(680)

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


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

.glow
	transition: box-shadow .2s ease-in-out
	&:hover,
	&:focus
		box-shadow: 0 0 12px rgba(0, 0 , 0, .4)

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

.pointer
	&:hover
		cursor: pointer

Delete .glow and add active state to grow class

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

	&:active
		transform: scale(.90)

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

.pointer
	&:hover
		cursor: pointer


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

.currency
  text-align: right

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

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

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

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

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

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

Drop duplicate style in accounting.

// Accounting
.currency
  text-align: right

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

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

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

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

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

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


// Year graph svg element _includes/svg/year-graph.html

@mixin decade-col-fill($i, $color)
  .decade-col-#{$i}
    fill: $color
  $hover-color: lighten($color, 5%)
  .decade-col-#{$i}:hover
    fill: $hover-color

.year-graph-svg
  @include respond-down(mob-land)
    // Just don't bother on mobile
    display: none

  height: 200px
  width: 100%

  // Prevent seams and blurry edges
  shape-rendering: crispEdges

  // Colour generator for decade cols
  $background-base: adjust-hue($color-decades-base, 220%)
  $background-items: -3

  @for $i from 194 through 201
    $shift: (100% / $background-items) * (201-$i)
    $shift-color: adjust-hue($background-base, $shift)

    @include decade-col-fill($i, $shift-color)

Include 202* in year graph

// Year graph svg element _includes/svg/year-graph.html

@mixin decade-col-fill($i, $color)
  .decade-col-#{$i}
    fill: $color
  $hover-color: lighten($color, 5%)
  .decade-col-#{$i}:hover
    fill: $hover-color

.year-graph-svg
  @include respond-down(mob-land)
    // Just don't bother on mobile
    display: none

  height: 200px
  width: 100%

  // Prevent seams and blurry edges
  shape-rendering: crispEdges

  // Colour generator for decade cols
  $background-base: adjust-hue($color-decades-base, 220%)
  $background-items: -3

  @for $i from 194 through 202
    $shift: (100% / $background-items) * (202-$i)
    $shift-color: adjust-hue($background-base, $shift)

    @include decade-col-fill($i, $shift-color)


@keyframes #{fade-in}
    0%
        opacity: 0

    5%
        opacity: 0

    100%
        opacity: 1

[data-language] code, pre [data-language]
    opacity: 0

    // IE9 supports unprefixed opacity property but does not support keyframe
    // animations.  This means in order to get the code to show up in IE 9 when
    // javascript is disabled we have to include this ugly bad boy.
    //
    // IE 10+ and all modern browsers support CSS animations
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

    animation: 50ms ease-in-out 1000ms forwards fade-in

    &.decrease-delay
        animation-delay: 75ms

    &.stop-animation
        opacity: 0
        // background: red
        animation-play-state: paused

Use rainbow class to decrease animation delay

@keyframes #{fade-in}
    0%
        opacity: 0

    5%
        opacity: 0

    100%
        opacity: 1

[data-language] code, pre [data-language]
    opacity: 0

    // IE9 supports unprefixed opacity property but does not support keyframe
    // animations.  This means in order to get the code to show up in IE 9 when
    // javascript is disabled we have to include this ugly bad boy.
    //
    // IE 10+ and all modern browsers support CSS animations
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

    animation: 50ms ease-in-out 1000ms forwards fade-in

    &.rainbow
        animation-delay: 75ms

    &.stop-animation
        opacity: 0
        // background: red
        animation-play-state: paused


table.compare_scenarios
  border-collapse: collapse
  tr.header th
    background-color: #ffd7a1
    border: 1px solid white
  th.tab, th.sidebar_item, th.slide, th.slider, td.cell
    text-align: right
  th.tab
    background: #ccc
  th.sidebar_item
    background: #ddd
  th.slide
    background: #eee
  td.cell
    border: 1px solid #eee

// used to highlight scenarios that belong to students
table.default
  tr.highlight
    td
      background: rgb(255, 204, 51) // The Fallback for IE < 9
      background-color: rgba(255,204,51, 0.4)

// Used on scenario index/new/show pages
.scenario_wrapper
  padding: 5px 20px 110px 20px

  &#show_scenario
    margin-right: 25%
    margin-left: 25%

  .warning
    margin-top: 10px
    padding: 5px 10px
    background-color: rgba(255,0,0,0.1)
    border: 1px solid #f00
    border-radius: 5px

  h1
    display: inline-block
    vertical-align: middle

  a.button
    display: inline-block
    margin-top: 15px
    margin-right: 0px
    float: right

Adjust <hr> styles on preset information page

table.compare_scenarios
  border-collapse: collapse
  tr.header th
    background-color: #ffd7a1
    border: 1px solid white
  th.tab, th.sidebar_item, th.slide, th.slider, td.cell
    text-align: right
  th.tab
    background: #ccc
  th.sidebar_item
    background: #ddd
  th.slide
    background: #eee
  td.cell
    border: 1px solid #eee

// used to highlight scenarios that belong to students
table.default
  tr.highlight
    td
      background: rgb(255, 204, 51) // The Fallback for IE < 9
      background-color: rgba(255,204,51, 0.4)

// Used on scenario index/new/show pages
.scenario_wrapper
  padding: 5px 20px 110px 20px

  &#show_scenario
    margin-right: 25%
    margin-left: 25%

  .warning
    margin-top: 10px
    padding: 5px 10px
    background-color: rgba(255,0,0,0.1)
    border: 1px solid #f00
    border-radius: 5px

  h1
    display: inline-block
    vertical-align: middle

  a.button
    display: inline-block
    margin: 15px 0 15px 15px
    float: right

  hr
    border: none
    border-bottom: 1px solid #ddd
    height: 1px


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

  .form-group
    padding: 0 10px

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

  &:first-child
    margin-top: 0

Fix the widget box bar title font size

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

  .form-group
    padding: 0 10px

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

  &:first-child
    margin-top: 0


.thread-wrap
    position: fixed
    display: none
    +set-dims($thread-width, 100vh)
    top: 0
    left: 0
    right: 0
    margin: 0 auto
    z-index: 10

    @include breakpoint(to-tablet)
        width: 100% !important

    &.thread-wrap-active
        display: initial !important

    .nano-content
        top: 100%

    .nano-pane
        width: 5px
        cursor: grab
        background: grey(9)

        &:hover
            width: 12px
            transition: width .2 ease-in

        &:active
            width: 12px

.thread
    position: absolute
    top: 100%
    overflow: hidden
    line-height: $thread-line-height
    background: $thread-color

    // gap for header at top of thread
    .header-gap
        height: $header-height

Remove header-gap from thread; is a global class


// Available $project types
// 'web'
//      - 'epatient'
// 'edetail'

Define browser support for edetails

// Available $project types
// 'web'
//      - 'epatient'
// 'edetail'

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


*
  @include box-sizing(border-box)

body
  margin: 0

main
  font: 1em "Helvetica Neue", sans-serif
  margin: 0 auto

Cover :before and :after with box sizing.

*, *:before, *:after
  @include box-sizing(border-box)

body
  margin: 0

main
  font: 1em "Helvetica Neue", sans-serif
  margin: 0 auto


// Custom styles for the main scenario page (sliders, charts), which hides many
// of the extraneous elements such that the tabs, slides, and sliders may be
// shown in a small iframe.
body.liteui
  header#top, footer, #charts_wrapper, #title .help
    display: none !important

  #wrapper, #content
    min-width: initial

  #content #active-content
    padding-bottom: 20px

Disable scenario nav in lite-ui view (MYC)

// Custom styles for the main scenario page (sliders, charts), which hides many
// of the extraneous elements such that the tabs, slides, and sliders may be
// shown in a small iframe.
body.liteui
  header#top, #scenario-nav, footer, #charts_wrapper, #title .help
    display: none !important

  #wrapper, #content
    min-width: initial

  #content #active-content
    padding-bottom: 20px


pre
  background: #49483E
  padding: 0.5em 1em
  border-radius: 0.3em
  white-space: pre
  overflow-x: scroll

article
  img
    display: block
    margin: 0 auto 2em auto
    width: 80%
    height: auto
    padding: 0.4em
    border: solid 1px $sw_lightest_gray
    background-color: lighten($sw_lightest_gray, 5%)

  time.published
    font-size: 0.9em
    color: $sw_light_gray

ul.tags
  padding: 0
  text-align: right
  margin-top: -1.2em
  li
    font-size: 0.9em
    list-style: none
    display: inline-block
    margin-right: 1em
    margin-bottom: 1em
    a
      color: $sw_lighter_gray
      &:hover
        color: $sw_light_gray
    i
      color: $sw_light_gray

.author
  text-align: right
  vertical-align: middle
  height: $avatarSize / 2
  line-height: $avatarSize / 2
  .avatar
    display: inline-block
    margin-left: 1em
    width: $avatarSize / 2
    height: $avatarSize / 2
    border: ($avatarSize/4) solid rgba(black, 0.6)
    background-size: $avatarSize/2 $avatarSize/2
    vertical-align: middle

Fix code overflow in blog

pre
  background: #49483E
  padding: 0.5em 1em
  border-radius: 0.3em
  white-space: pre
  overflow-x: auto

article
  img
    display: block
    margin: 0 auto 2em auto
    width: 80%
    height: auto
    padding: 0.4em
    border: solid 1px $sw_lightest_gray
    background-color: lighten($sw_lightest_gray, 5%)

  time.published
    font-size: 0.9em
    color: $sw_light_gray

ul.tags
  padding: 0
  text-align: right
  margin-top: -1.2em
  li
    font-size: 0.9em
    list-style: none
    display: inline-block
    margin-right: 1em
    margin-bottom: 1em
    a
      color: $sw_lighter_gray
      &:hover
        color: $sw_light_gray
    i
      color: $sw_light_gray

.author
  text-align: right
  vertical-align: middle
  height: $avatarSize / 2
  line-height: $avatarSize / 2
  .avatar
    display: inline-block
    margin-left: 1em
    width: $avatarSize / 2
    height: $avatarSize / 2
    border: ($avatarSize/4) solid rgba(black, 0.6)
    background-size: $avatarSize/2 $avatarSize/2
    vertical-align: middle


.activity-list
  color: $body-copy

.activity-list__title
  color: $feature-copy
  margin-bottom: 20px

.activity-list__container
  list-style: none

.activity-list__item
  +font-size(15)
  line-height: 1em
  margin-bottom: 12px

.activity-list__icon
  &:before
    +size(20px)
    display: inline-block
    margin-right: 0.2em
    margin-top: -0.5em
    position: relative
    top: 5px

.activity-list__link
  font-weight: bold
  &:before
    font-weight: normal

.activity-list__time
  margin-left: 20px

Fix cropped descenders in font on activity list

.activity-list
  color: $body-copy

.activity-list__title
  color: $feature-copy
  margin-bottom: 20px

.activity-list__container
  list-style: none

.activity-list__item
  +font-size(15)
  line-height: 1em
  margin-bottom: 12px

.activity-list__icon
  &:before
    +size(20px)
    display: inline-block
    margin-right: 0.2em
    margin-top: -0.5em
    position: relative
    top: 5px

.activity-list__link
  font-weight: bold
  &:before
    font-weight: normal

.activity-list__time
  margin-left: 20px

.activity-list__message
  padding-bottom: 2px


nav
  padding: .5em
  @include container(45em)

  ul
    list-style-type: none
    margin: 0

    li
      @include span(3)

      &:last-child
        @include span(3 last)

      a
        color: $dark

      &.current a
        text-decoration: none
        color: $green + #333

Align nav items by center

nav
  padding: .5em
  @include container(45em)

  ul
    list-style-type: none
    margin: 0
    padding-left: 0

    li
      text-align: center
      @include span(3)

      &:last-child
        @include span(3 last)

      a
        color: $dark

      &.current a
        text-decoration: none
        color: $green + #333


$video-width: 720px !default
$video-aspect-ratio: 9 / 16 !default

.video-wrapper
    max-width: $video-width
    .video-inner
        position: relative
        padding:
            bottom: $video-aspect-ratio * 100%
        margin:
            bottom: $site-padding * 2
        video,
        object,
        .poster a,
        .poster img
            display: block
        video,
        object,
        .poster
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%

Add base play button styles.

$video-width: 720px !default
$video-aspect-ratio: 9 / 16 !default

.video-wrapper
    max-width: $video-width
    .video-inner
        position: relative
        padding:
            bottom: $video-aspect-ratio * 100%
        margin:
            bottom: $site-padding * 2
        video,
        object,
        .poster a,
        .poster img
            display: block
        video,
        object,
        .poster
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
        .play-button
            pointer-events: none
            position: absolute
            top: 50%
            left: 50%
            margin:
                top: -50px
                left: -25px
            width: 0
            height: 0
            border: 50px solid transparent
                left-color: rgba(#000, 0.3)


@mixin language($name)
    [data-language="#{$name}"], .lang-#{$name}, .language-#{$name}
        @content

@keyframes #{fade-in}
    0%
        opacity: 0

    100%
        opacity: 1

[data-language] code, [class^="lang"] code,
pre [data-language], pre [class^="lang"]
    opacity: 0

    // IE9 supports unprefixed opacity property but does not support keyframe
    // animations.  This means in order to get the code to show up in IE 9 when
    // javascript is disabled we have to include this ugly bad boy.
    //
    // IE 10+ and all modern browsers support CSS animations
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

    animation: 40ms ease-in-out 1000ms forwards fade-in

    &.rainbow
        animation-delay: 0ms

    &.stop-animation
        opacity: 0
        // background: red
        animation-play-state: paused

Add support for passing a list of languages

$name: ""
@mixin language($names)
    @if length($names) == 1
        [data-language="#{$name}"], .lang-#{$name}, .language-#{$name}
            @content
    @else
        @each $name in $names
            [data-language="#{$name}"], .lang-#{$name}, .language-#{$name}
                @content

@keyframes #{fade-in}
    0%
        opacity: 0

    100%
        opacity: 1

[data-language] code, [class^="lang"] code,
pre [data-language], pre [class^="lang"]
    opacity: 0

    // IE9 supports unprefixed opacity property but does not support keyframe
    // animations.  This means in order to get the code to show up in IE 9 when
    // javascript is disabled we have to include this ugly bad boy.
    //
    // IE 10+ and all modern browsers support CSS animations
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"

    animation: 40ms ease-in-out 1000ms forwards fade-in

    &.rainbow
        animation-delay: 0ms

    &.stop-animation
        opacity: 0
        // background: red
        animation-play-state: paused


// Social Buttons
aside.social-buttons
  visibility: hidden
  height: 22px

  // Like button is misaligned because it sets vertical-align: bottom
  div.fb-like.fb_iframe_widget > span
    vertical-align: initial !important

  // Hide Google +1 button (it shows even if parent is hidden).
  div.g-plus-container
    display: inline-block
    iframe
      visibility: hidden !important

Fix Tweet button width bug.

// Social Buttons
aside.social-buttons
  visibility: hidden
  height: 22px

  // Fix Tweet button width bug.
  iframe
    width: auto !important

  // Like button is misaligned because it sets vertical-align: bottom
  div.fb-like.fb_iframe_widget > span
    vertical-align: initial !important

  // Hide Google +1 button (it shows even if parent is hidden).
  div.g-plus-container
    display: inline-block
    iframe
      visibility: hidden !important


@import compass/typography

body
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

#content
  h3
    color: $dark-grey
    font-size: 1.1em
    text-transform: uppercase
    margin-bottom: 0.8em
    width: 100%
    float: left

Use the Dosis face for the content h3s.

@import compass/typography

body
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

#content
  h3
    font-family: 'Dosis Medium'
    color: $dark-grey
    font-size: 1.1em
    text-transform: uppercase
    letter-spacing: 0.07em
    margin-bottom: 0.8em
    width: 100%
    float: left


//- 💫 CSS > BASE > LAYOUT

//- HTML

html
    font-size: $type-base

//- Body

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

//- Paragraphs

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

//- Links

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

//- Selection

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

Fix formatting and add link styling to all asides

//- 💫 CSS > BASE > LAYOUT

//- HTML

html
    font-size: $type-base

//- Body

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

//- Paragraphs

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

//- Links

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

//- Selection

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


.people-section
  #person
    dl
      +clearfix

    dt
      clear: left
      float: left
      width: 100px
      font-weight: bold

    dd.gender
      margin-bottom: 10px

    .siblings
      margin-top: 10px
      p
        font-weight: bold

      ul
        list-style: disc

  #comments
    textarea
      width: 500px
      height: 150px
    li
      padding: 10px
      &:nth-child(odd)
        background-color: #e7cddc

      .info
        font-size: 0.8em

ul.people
  li
    +clearfix
    margin-bottom: 10px

    .person
      .image
        float: left
        margin-right: 5px

      .name a
        color: #333

      .village
        color: #666
        font-size: 0.7em
        line-height: 1em
        a
          color: #666

Add margin to 'make student' button

.people-section
  .student-status
    margin-bottom: 5px

  #person
    dl
      +clearfix

    dt
      clear: left
      float: left
      width: 100px
      font-weight: bold

    dd.gender
      margin-bottom: 10px

    .siblings
      margin-top: 10px
      p
        font-weight: bold

      ul
        list-style: disc

  #comments
    textarea
      width: 500px
      height: 150px
    li
      padding: 10px
      &:nth-child(odd)
        background-color: #e7cddc

      .info
        font-size: 0.8em

ul.people
  li
    +clearfix
    margin-bottom: 10px

    .person
      .image
        float: left
        margin-right: 5px

      .name a
        color: #333

      .village
        color: #666
        font-size: 0.7em
        line-height: 1em
        a
          color: #666


html, body
  // Sticky footer
  height: 100%

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

a
  transition: color .2s ease-in

.no-margin-bottom
  margin-bottom: 0

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

.no-margin
  margin: 0 auto

.video-figure
  margin: 0 auto 3rem auto

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

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

/* Clearfix */
.clearfix
  *zoom: 1

  &:before, &:after
    content: " "
    display: table

  &:after
    clear: both

a.button
  border-radius: 0 !important

// Maildev
.maildev
  position: absolute
  top: 20px
  right: 0

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

// Sticky footer
.wrapper
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto (-$footer-height)

Add default background-color for homepage if no video or background available

html, body
  // Sticky footer
  height: 100%

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

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

a
  transition: color .2s ease-in

.no-margin-bottom
  margin-bottom: 0

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

.no-margin
  margin: 0 auto

.video-figure
  margin: 0 auto 3rem auto

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

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

/* Clearfix */
.clearfix
  *zoom: 1

  &:before, &:after
    content: " "
    display: table

  &:after
    clear: both

a.button
  border-radius: 0 !important

// Maildev
.maildev
  position: absolute
  top: 20px
  right: 0

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

// Sticky footer
.wrapper
  min-height: 100%
  height: auto !important
  height: 100%
  margin: 0 auto (-$footer-height)


.project-page
  .backers-page
    .backer
      padding: +emCalc(15px)
      border: 1px solid $border-color
      margin-bottom: +emCalc(20px)
      .custom-tooltip
        float: left

      .infos
        margin-top: +emCalc(5px)
        i
          margin-right: +emCalc(5px)
          font-size: 150%

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

Hide long text on backers page

.project-page
  .backers-page
    .backer
      overflow: hidden
      padding: +emCalc(15px)
      border: 1px solid $border-color
      margin-bottom: +emCalc(20px)
      .custom-tooltip
        float: left

      .infos
        margin-top: +emCalc(5px)
        i
          margin-right: +emCalc(5px)
          font-size: 150%

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


.btn
  text-decoration: none
  border-radius: 4px
  padding: 0.5em 0.8em
  font-size: 15px
  color: #ffffff !important
  line-height: 1.3 !important
  height: 35px
  max-width: 17em
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  &:hover,
  &:active
    color: #ffffff
    cursor: pointer
  &:before
    content: none !important
  &:disabled
    background-color: lighten($grey-mid, 15)
    pointer-events: none

.btn-edit
  background-color: $blue
  &:hover,
  &:active
    background-color: darken($blue, 15)

.btn-delete
  background-color: $red
  &:hover,
  &:active
    background-color: darken($red, 15)

.btn-save
  background-color: $green
  display: inline
  width: auto
  border: none
  &:hover,
  &:active
    background-color: darken($green, 15)

.btn-external
  background-color: $orange
  &:hover,
  &:active
    background-color: darken($orange, 15)

.button_to
  display: inline-block

.hint
  color: lighten($grey-dark, 10)
  margin-left: .4em
  font-size: 12px
  vertical-align: bottom

Remove border on default btn class

.btn
  text-decoration: none
  border-radius: 4px
  border: none
  padding: 0.5em 0.8em
  font-size: 15px
  color: #ffffff !important
  line-height: 1.3 !important
  height: 35px
  max-width: 17em
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  &:hover,
  &:active
    color: #ffffff
    cursor: pointer
  &:before
    content: none !important
  &:disabled
    background-color: lighten($grey-mid, 15)
    pointer-events: none

.btn-edit
  background-color: $blue
  &:hover,
  &:active
    background-color: darken($blue, 15)

.btn-delete
  background-color: $red
  &:hover,
  &:active
    background-color: darken($red, 15)

.btn-save
  background-color: $green
  display: inline
  width: auto
  border: none
  &:hover,
  &:active
    background-color: darken($green, 15)

.btn-external
  background-color: $orange
  &:hover,
  &:active
    background-color: darken($orange, 15)

.button_to
  display: inline-block

.hint
  color: lighten($grey-dark, 10)
  margin-left: .4em
  font-size: 12px
  vertical-align: bottom


#active_admin_content
  form li.input, fieldset:not(.actions) ol li
    clear: both

  form fieldset > ol > li fieldset:not(.has_many_fields) ol li:not(.hidden)
    padding: 10px !important

form fieldset > ol > li.boolean
  height: auto

.active_admin .activeadmin-translations
  margin-left: 30px
  margin-right: 30px

form.slider fieldset > ol > li p.inline-hints
  margin-left: 0

#active_admin_content form.slider fieldset > ol li fieldset.inputs.has_many_fields > ol > li.input
  float: left
  clear: none
  width: 47%

  &:nth-child(2)
    float: right

  &:not(.input)
    clear: both

form fieldset > ol > li fieldset:not(.has_many_fields) ol
  padding-left: 0

#active_admin_content form li.input, #active_admin_content fieldset:not(.actions) ol li
  clear: none

form fieldset#referencement legend span
  font-size: 2em

form fieldset > ol > li.select p.inline-hints
  margin-left: 0
  margin-top: 10px

// Logo footer site
#setting_logo_footer_input
  margin-top: 15px

.logo-footer
  background-color: rgba(0, 0, 0, .2)
  padding: 5px

Set NewsletterUserRole form on two columns

#active_admin_content
  form li.input, fieldset:not(.actions) ol li
    clear: both

  form fieldset > ol > li fieldset:not(.has_many_fields) ol li:not(.hidden)
    padding: 10px !important

form fieldset > ol > li.boolean
  height: auto

.active_admin .activeadmin-translations
  margin-left: 30px
  margin-right: 30px

form.slider fieldset > ol > li p.inline-hints
  margin-left: 0

#active_admin_content form.slider fieldset > ol li fieldset.inputs.has_many_fields > ol > li.input
  float: left
  clear: none
  width: 47%

  &:nth-child(2)
    float: right

  &:not(.input)
    clear: both

form fieldset > ol > li fieldset:not(.has_many_fields) ol
  padding-left: 0

#active_admin_content form li.input, #active_admin_content fieldset:not(.actions) ol li
  clear: none

form fieldset#referencement legend span
  font-size: 2em

form fieldset > ol > li.select p.inline-hints
  margin-left: 0
  margin-top: 10px

// Logo footer site
#setting_logo_footer_input
  margin-top: 15px

.logo-footer
  background-color: rgba(0, 0, 0, .2)
  padding: 5px

form fieldset ol > li.newsletter_user_roles
  &>fieldset.has_many_fields
    width: 47%
    float: left
    margin-left: 1%


@import color
@import layout

.footer
  position: relative
  clear: both
  width: calc(100% - 4rem)
  padding: 4rem 2rem
  background-color: $color-grey-2
  opacity: .9
  height: 60px
  color: $color-grey-5
  font-size: 1rem

  ul
    margin: 0
    padding: 0

    li
      display: inline
      list-style-type: none
      text-transform: uppercase
      margin-right: 1rem
      a
        color: $color-grey-5
        &:hover
          color: $color-blue-4
    &.social
      font-size: 1.75rem

@media (max-width: $media-small-max)
  .footer
    height: 100px

    .right
      width: 100%

Reduce footer height on logged in state

@import color
@import layout

.footer
  position: relative
  clear: both
  width: calc(100% - 4rem)
  padding: 4rem 2rem
  background-color: $color-grey-2
  opacity: .9
  height: 60px
  color: $color-grey-5
  font-size: 1rem

  ul
    margin: 0
    padding: 0

    li
      display: inline
      list-style-type: none
      text-transform: uppercase
      margin-right: 1rem
      a
        color: $color-grey-5
        &:hover
          color: $color-blue-4
    &.social
      font-size: 1.75rem

.logged-in .footer
  padding: 1rem 2rem

@media (max-width: $media-small-max)
  .footer
    height: 100px

    .right
      width: 100%


.button
  @extend .radius
  text-transform: uppercase
  border-width: 0px
  border-bottom: 2px $button-border-style
  box-shadow: none
  border-bottom-color: darken($primary-color, $button-border-color-darken)
  &.success
    border-bottom-color: darken($success-color, $button-border-color-darken)
  &.alert
    border-bottom-color: darken($alert-color, $button-border-color-darken)
  &.secondary
    border-bottom-color: darken($secondary-color, $button-border-color-darken)

Add top when click on button

.button
  @extend .radius
  text-transform: uppercase
  border-width: 0px
  border-bottom: 2px $button-border-style
  box-shadow: none
  border-bottom-color: darken($primary-color, $button-border-color-darken)
  &.success
    border-bottom-color: darken($success-color, $button-border-color-darken)
  &.alert
    border-bottom-color: darken($alert-color, $button-border-color-darken)
  &.secondary
    border-bottom-color: darken($secondary-color, $button-border-color-darken)
  &:active
    position: relative
    top: 2px


button,
.btn
  display: inline-block
  appearance: none
  margin: 0
  padding: third($spacing-unit) halve($spacing-unit)
  border: 0
  border-radius: $border-radius-base
  vertical-align: middle
  white-space: nowrap
  cursor: pointer
  background-color: $color-btn
  color: $color-white
  text-decoration: none
  transition: background-color .2s ease

  &:hover
    background-color: lighten($color-btn, 5%)

  &:active
    background-color: darken($color-btn, 5%)

button[disabled],
.btn-disabled
  background-color: $color-muted
  cursor: not-allowed

  &:hover
    background-color: $color-muted

  &:active
    background-color: $color-muted

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

.btn-proceed
  background-color: $color-positive

  &:hover
    background-color: lighten($color-positive, 5%)

  &:active
    background-color: darken($color-positive, 5%)

.btn-danger
  background-color: $color-negative

  &:hover
    background-color: lighten($color-negative, 5%)

  &:active
    background-color: darken($color-negative, 5%)

.btn-block
  display: block
  padding-left: 0
  padding-right: 0
  text-align: center

Drop transition effect from buttons

button,
.btn
  display: inline-block
  appearance: none
  margin: 0
  padding: third($spacing-unit) halve($spacing-unit)
  border: 0
  border-radius: $border-radius-base
  vertical-align: middle
  white-space: nowrap
  cursor: pointer
  background-color: $color-btn
  color: $color-white
  text-decoration: none

button[disabled],
.btn-disabled
  background-color: $color-muted

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

.btn-proceed
  background-color: $color-positive

.btn-danger
  background-color: $color-negative

.btn-block
  display: block
  padding-left: 0
  padding-right: 0
  text-align: center


.aae-header
  display: -webkit-flex
  display: flex
  -webkit-justify-content: space-between
  justify-content: space-between
  position: fixed
  top: 0
  left: 0
  right: 0
  padding: 10px 10px 15px 10px
  height: 36px
  background-color: rgba(255,255,255,0.9)

@media (max-width: 1023px)
  .wide
    display: none

  .narrow
    display: block

@media (min-width: 1024px)
  .wide
    display: block

  .narrow
    display: none

Set correct padding in header

section
  display: -webkit-flex
  display: flex
  -webkit-justify-content: space-between
  justify-content: space-between
  position: fixed
  top: 0
  left: 0
  right: 0
  padding: 10px 27px 15px 10px
  height: 36px
  background-color: rgba(255,255,255,0.9)

@media (max-width: 1023px)
  .wide
    display: none

  .narrow
    display: block

@media (min-width: 1024px)
  .wide
    display: block

  .narrow
    display: none


.asciinema-player
  .start-prompt
    +player-overlay
    z-index: 20
    cursor: pointer

    .play-button
      font-size: 100px

    .play-button
      position: absolute
      left: 0
      top: 0
      right: 0
      bottom: 0
      text-align: center
      color: white

      display: table
      width: 100%
      height: 100%

      div
        vertical-align: middle
        display: table-cell

        span
          width: 96px
          height: 96px
          display: inline-block

Fix vertical centering of big play button

.asciinema-player
  .start-prompt
    +player-overlay
    z-index: 20
    cursor: pointer

    .play-button
      font-size: 0px

    .play-button
      position: absolute
      left: 0
      top: 0
      right: 0
      bottom: 0
      text-align: center
      color: white

      display: table
      width: 100%
      height: 100%

      div
        vertical-align: middle
        display: table-cell

        span
          width: 96px
          height: 96px
          display: inline-block


@import "~font-awesome/scss/_variables"

$fa-font-path: "~font-awesome/fonts"

@import "~font-awesome/scss/_mixins"
@import "~font-awesome/scss/_path"
@import "~font-awesome/scss/_core"
@import "~font-awesome/scss/_larger"
@import "~font-awesome/scss/_fixed-width"
@import "~font-awesome/scss/_list"
@import "~font-awesome/scss/_bordered-pulled"
@import "~font-awesome/scss/_animated"
@import "~font-awesome/scss/_rotated-flipped"
@import "~font-awesome/scss/_stacked"
@import "~font-awesome/scss/_icons"

// Custom variables go here.
$primary: #58bae1 // Worona blue

@import "~bulma/sass/utilities/_all"
// $link-visited: $link
@import "~bulma/sass/base/_all"
@import "~bulma/sass/elements/_all"
@import "~bulma/sass/components/_all"
@import "~bulma/sass/grid/_all"
@import "~bulma/sass/layout/_all"

Fix overflow in bulma columns.

@import "~font-awesome/scss/_variables"

$fa-font-path: "~font-awesome/fonts"

@import "~font-awesome/scss/_mixins"
@import "~font-awesome/scss/_path"
@import "~font-awesome/scss/_core"
@import "~font-awesome/scss/_larger"
@import "~font-awesome/scss/_fixed-width"
@import "~font-awesome/scss/_list"
@import "~font-awesome/scss/_bordered-pulled"
@import "~font-awesome/scss/_animated"
@import "~font-awesome/scss/_rotated-flipped"
@import "~font-awesome/scss/_stacked"
@import "~font-awesome/scss/_icons"

// Custom variables go here.
$primary: #58bae1 // Worona blue

@import "~bulma/sass/utilities/_all"
// $link-visited: $link
@import "~bulma/sass/base/_all"
@import "~bulma/sass/elements/_all"
@import "~bulma/sass/components/_all"
@import "~bulma/sass/grid/_all"
@import "~bulma/sass/layout/_all"

.column
  padding: .75rem 0

.columns
  margin-left: 0
  margin-right: 0


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

.st--th_clickable
  color: $color5 !important
  cursor: pointer
  &:hover
    text-decoration: underline
    background: $color1

Add sr-only global css style

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

.st--th_clickable
  color: $color5 !important
  cursor: pointer
  &:hover
    text-decoration: underline
    background: $color1

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


@import url('https://fonts.googleapis.com/css?family=Fira+Sans:600')
@import colors
@import mixins
@import buttons
@import progress_bars
@import wrapper
@import project

Use self-hosted font instead of Google

@import url('https://betterplace-assets.betterplace.org/packs/media/fira-sans-v10-latin/fira-sans-v11-latin-ext_latin-600-0bc8595c.woff2')
@import colors
@import mixins
@import buttons
@import progress_bars
@import wrapper
@import project


@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700)

$font: "Avenir Next", "Roboto", "Helvetica", sans-serif

$color-red: #cb7972
$color-green: #72CB99
$color-blue: #466D98

$background-color: #F8F8FA
$foreground-color: #333
$foreground-color-lighter: darken($background-color, 5)
$foreground-color-light: darken($background-color, 15)
$accent-color: $color-red

$max-width: 1024px

.wrap, .wrap *, header, header *, footer, footer *, .info, .info *
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-font-smoothing: antialiased
    font-family: $font

span.confidential
    font-size: 0.75rem
    background-color: $foreground-color
    color: $background-color
    padding: 0.25rem 0.5rem
    vertical-align: middle
    text-transform: uppercase
    font-weight: 500

body
    background-color: $background-color
    margin: 0

a, a:hover, a:active, a:visited
    color: $foreground-color

h1, h2, h3, h4, h5, h6, input[type="submit"], button
    font-family: $font

Revert to roboto, sorry @ItsDaGeek

@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700)

$font: "Roboto", "Helvetica", sans-serif

$color-red: #cb7972
$color-green: #72CB99
$color-blue: #466D98

$background-color: #F8F8FA
$foreground-color: #333
$foreground-color-lighter: darken($background-color, 5)
$foreground-color-light: darken($background-color, 15)
$accent-color: $color-red

$max-width: 1024px

.wrap, .wrap *, header, header *, footer, footer *, .info, .info *
    box-sizing: border-box
    -moz-box-sizing: border-box
    -webkit-font-smoothing: antialiased
    font-family: $font

span.confidential
    font-size: 0.75rem
    background-color: $foreground-color
    color: $background-color
    padding: 0.25rem 0.5rem
    vertical-align: middle
    text-transform: uppercase
    font-weight: 500

body
    background-color: $background-color
    margin: 0

a, a:hover, a:active, a:visited
    color: $foreground-color

h1, h2, h3, h4, h5, h6, input[type="submit"], button
    font-family: $font


@import branding
@import animations.sass

.darkswarm
  products
    product
      .product-thumb
        @include csstrans
        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
        i
          @include csstrans
          transition-delay: 150ms
          position: absolute
          left: 45%
          top: 45%
          z-index: 99999
          color: white
          font-size: 1rem
          opacity: 0
        img
          @include csstrans
          opacity: 1
          @include transform-scale(scale(1))

        &:hover, &:focus, &:active
          background-color: $clr-brick
          i
            left: 32%
            top: 30%
            font-size: 3rem
            opacity: 1
          img
            opacity: 0.5
            @include transform-scale(scale(1.1))

        @media all and (max-width: 768px)
          top: 2px
          width: 4rem
          height: 4rem
          &:hover, &:focus, &:active
            i
              left: 30%
              top: 30%
              font-size: 2rem
        @media all and (max-width: 640px)
          display: none
          width: 0rem
          height: 0rem

Remove border on product thumbnail to clean up UI

@import branding
@import animations.sass

.darkswarm
  products
    product
      .product-thumb
        @include csstrans
        position: absolute
        top: 2px
        left: 0px
        width: 7rem
        height: 7rem
        float: left
        display: block
        z-index: 999999
        background-color: white
        overflow: hidden
        i
          @include csstrans
          transition-delay: 150ms
          position: absolute
          left: 45%
          top: 45%
          z-index: 99999
          color: white
          font-size: 1rem
          opacity: 0
        img
          @include csstrans
          opacity: 1
          @include transform-scale(scale(1))

        &:hover, &:focus, &:active
          background-color: $clr-brick
          i
            left: 32%
            top: 30%
            font-size: 3rem
            opacity: 1
          img
            opacity: 0.5
            @include transform-scale(scale(1.1))

        @media all and (max-width: 768px)
          top: 2px
          width: 4rem
          height: 4rem
          &:hover, &:focus, &:active
            i
              left: 30%
              top: 30%
              font-size: 2rem
        @media all and (max-width: 640px)
          display: none
          width: 0rem
          height: 0rem


// -----------------------------------------------------------------------------
//  These classes set up the architecture for our unicode icons
// -----------------------------------------------------------------------------

// -----------------------------------------------------------------------------
//  Icon sizes

%icon
  display: block
  background-repeat: no-repeat

%small-icon
  @extend %icon
  width: 16px
  height: 16px

%regular-icon
  @extend %icon
  width: 32px
  height: 32px

// -----------------------------------------------------------------------------
// Helper extends for positioning icons at the horizontal extremes of an
// element
// -----------------------------------------------------------------------------

%left-icon
  @extend %relative
  &:before
    @extend %benton-regular
    @extend %absolute-left
    @extend %small-icon
    pointer-events: none
    display: block

%right-icon
  @extend %relative
  &:after
    @extend %benton-regular
    @extend %absolute-right
    @extend %small-icon
    pointer-events: none
    display: block

// -----------------------------------------------------------------------------
// Hidden text with Icon
//
// When you want to have the element text for accessibility reasons, but want
// it hidden: use either %left-icon or %right-icon and extend with one of the
// below classes

%left-icon--hidden-text
  text-indent: -999em
  &:before
    text-indent: 0

%right-icon--hidden-text
  @extend %visually-hide
  &:after
    text-indent: 0

Remove extends from icon setup

// -----------------------------------------------------------------------------
//  These classes set up the architecture for our unicode icons
// -----------------------------------------------------------------------------

// -----------------------------------------------------------------------------
//  Icon sizes

%small-icon
  width: 16px
  height: 16px

%regular-icon
  width: 32px
  height: 32px

// -----------------------------------------------------------------------------
// Helper extends for positioning icons at the horizontal extremes of an
// element
// -----------------------------------------------------------------------------

%left-icon
  position: relative
  &:before
    @extend %small-icon
    font-family: 'bentonsansregular'
    position: absolute
    left: 0
    display: block
    pointer-events: none

%right-icon
  position: relative
  &:after
    @extend %small-icon
    font-family: 'bentonsansregular'
    position: absolute
    right: 0
    display: block
    pointer-events: none

// -----------------------------------------------------------------------------
// Hidden text with Icon
//
// When you want to have the element text for accessibility reasons, but want
// it hidden: use either %left-icon or %right-icon and extend with one of the
// below classes

%left-icon--hidden-text
  text-indent: -999em
  &:before
    text-indent: 0

%right-icon--hidden-text
  @extend %visually-hide
  &:after
    text-indent: 0


$body_font_family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif

body
  margin: 0
  font: 13px/20px $body_font_family

h1
  line-height: 1em
img
  border-style: none
a
  color: #63A0C9

table.default
  border: 0
  border-collapse: collapse
  thead
    th
      background: #5DA1CB
      border: 1px solid #528DC3
    a
      color: white
  td,th
    padding: 2px 4px
  td
    vertical-align: top
    border: 1px solid #ddd
  tr.odd
    td,th
      background-color: #eee

.tar
  text-align: right
.tal
  text-align: left
.tac
  text-align: center

.clear
  clear: both

.hidden
  display: none

Fix uneven vertical spacing around <sup> and <sub>

$body_font_family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif

body
  margin: 0
  font: 13px/20px $body_font_family

h1
  line-height: 1em
img
  border-style: none
a
  color: #63A0C9

sub, sup
  line-height: 1

table.default
  border: 0
  border-collapse: collapse
  thead
    th
      background: #5DA1CB
      border: 1px solid #528DC3
    a
      color: white
  td,th
    padding: 2px 4px
  td
    vertical-align: top
    border: 1px solid #ddd
  tr.odd
    td,th
      background-color: #eee

.tar
  text-align: right
.tal
  text-align: left
.tac
  text-align: center

.clear
  clear: both

.hidden
  display: none


@import 'styles/shared.sass'

.SiteHeader
  align-items: center
  background-color: $pink
  // border: 1px solid red
  border-bottom: 2px solid $gray
  box-sizing: border-box
  display: flex
  justify-content: center
  padding: 10px
  +from($breakpoint-mobile-large)
    justify-content: flex-start

.SiteHeader__branding
  // border: 1px solid green
  display: flex
  align-items: center
  justify-content: space-between

.SiteHeader__clock-logo
  // border: 1px solid blue
  width: 40px
  margin-right: 10px

.SiteHeader__headline
  // border: 1px solid orange
  color: white
  font-family: 'Great Vibes', cursive
  font-size: 1.5em
  margin-top: 3px
  text-align: center
  +from($breakpoint-mobile-large)
    font-size: 2em
    margin-top: 7px

Remove scaffolding borders from sass

@import 'styles/shared.sass'

.SiteHeader
  align-items: center
  background-color: $pink
  border-bottom: 2px solid $gray
  box-sizing: border-box
  display: flex
  justify-content: center
  padding: 10px
  +from($breakpoint-mobile-large)
    justify-content: flex-start

.SiteHeader__branding
  display: flex
  align-items: center
  justify-content: space-between

.SiteHeader__clock-logo
  width: 40px
  margin-right: 10px

.SiteHeader__headline
  color: white
  font-family: 'Great Vibes', cursive
  font-size: 1.5em
  margin-top: 3px
  text-align: center
  +from($breakpoint-mobile-large)
    font-size: 2em
    margin-top: 7px


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

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

Improve the style of the reference a little.

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

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


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

  .mdl-card__title-text
    color: $color1

  .mdl-card__supporting-text

.user-settings-line
  color: $color2

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

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

.settings-value
  color: $color2

Add css styles for settings dialog

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

  .mdl-card__title-text
    color: $color1

  .mdl-card__supporting-text

.user-settings-line
  color: $color2

.user-settings
  padding: 0 10px
  margin-bottom: 30px

.settings-item
  position: relative
  overflow: hidden !important
  padding-right: 60px
  height: 35px
  line-height: 35px
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1)

.settings-value
  margin-left: 5px
  color: $color2

.settings-edit-btn
  +position(absolute, 0 0 null null)

.settings-input
  display: inline-block
  width: 160px !important


/* Base Variables */
$line-height: 1.6
$font-size-small: 13px
$font-size-medium: 16px
$font-size-large: 20px

/* Content */
$thread-width: 236px
$thread-height: 450px

$thread-line-height: 1.618

$board-color: $black
$board-post-color: $grey-dark

$header-width: 992px
$header-height: 60px

$settings-color: shade($grey-hightlight, 30%)

$settings-font-size-ratio: 1.2
$settings-font-size-large: $font-size-large * $settings-font-size-ratio
$settings-font-size-medium: $font-size-medium * $settings-font-size-ratio
$settings-font-size-small: $font-size-small * $settings-font-size-ratio

Add variables for navbar and preloader

/* Base Variables */
$line-height: 1.6
$font-size-small: 13px
$font-size-medium: 16px
$font-size-large: 20px

/* Content */
$thread-width: 236px
$thread-height: 450px

$thread-line-height: 1.618

$board-color: $black
$board-post-color: $grey-dark

$header-width: 992px
$header-height: 60px
$header-icon-size: 20px

$settings-color: shade($grey-highlight, 30%)

$settings-font-size-ratio: 1.2
$settings-font-size-large: $font-size-large * $settings-font-size-ratio
$settings-font-size-medium: $font-size-medium * $settings-font-size-ratio
$settings-font-size-small: $font-size-small * $settings-font-size-ratio

$navbar-width: 385px
$navbar-height: calc(100vh - #{$header-height})
$navbar-icon-size: 18px
$navbar-button-effect-amount: 20%

// $preloader-color-inner: $primary
// $preloader-color-middle: adjust-hue($primary, 120deg)
// $preloader-color-outer: adjust-hue($primary, -120deg)

$preloader-base-color: $primary-light
$preloader-color-outer: darken($preloader-base-color, 25%)
$preloader-color-middle: darken($preloader-base-color, 10%)
$preloader-color-inner: $preloader-base-color

$preloader-arc-width: 3px
$preloader-spin-multiplier: 1
$preloader-size: 150px

$preloader-text-box-size: 400px


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

body.modal-open
  margin: 0

.container
  padding-left: 30px
  padding-right: 30px
  max-width: none

.alert-step
  color: #c09853
  background-color: #fcf8e3
  border-color: #fbeed5

.highlight-tool
  color: #fafafa
  background-color: #f0ad4e

#controls-data dl > dt
  text-align: left
  width: 20%

#controls-data dl > dd
  width: 70%
  margin: 0
  overflow: hidden

#guided-canvas
  width: 100%
  height: 100%
  border: solid 1px #999999
  cursor: crosshair !important

#shortcuts h5,
#shortcuts dl > dt
  width: 70%

#shortcuts dl > dt
  font-weight: normal
  cursor: pointer

#shortcuts dl > dd
  margin-left: 85%

Remove margin: 0 from body.modal-open

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

.container
  padding-left: 30px
  padding-right: 30px
  max-width: none

.alert-step
  color: #c09853
  background-color: #fcf8e3
  border-color: #fbeed5

.highlight-tool
  color: #fafafa
  background-color: #f0ad4e

#controls-data dl > dt
  text-align: left
  width: 20%

#controls-data dl > dd
  width: 70%
  margin: 0
  overflow: hidden

#guided-canvas
  width: 100%
  height: 100%
  border: solid 1px #999999
  cursor: crosshair !important

#shortcuts h5,
#shortcuts dl > dt
  width: 70%

#shortcuts dl > dt
  font-weight: normal
  cursor: pointer

#shortcuts dl > dd
  margin-left: 85%


*
  box-sizing: border-box

body
  margin: 1em

.header>form
  max-width: 600px
.field, textarea
  margin-bottom: 5px

.field
  display: flex
label
  margin-right: 0.5em

input[type=text]
  flex: 1 0 auto
textarea
  width: 100%
  height: 5em
input[type=submit]
  width: 150px
  height: 3em
  font-size: 1em

// Image upload switch
.field.image
  height: 1.5em

  a.switch
    flex: 0 0 auto
  input
    flex: 1 0 auto
    margin-right: 0.5em

Fix reply form to the right of page.

*
  box-sizing: border-box

body
  margin: 1em

.header>form
  max-width: 600px
.field, textarea
  margin-bottom: 5px

.field
  display: flex
label
  margin-right: 0.5em

input[type=text]
  flex: 1 0 auto
textarea
  width: 100%
  height: 5em
input[type=submit]
  width: 150px
  height: 3em
  font-size: 1em

// Image upload switch
.field.image
  height: 1.5em

  a.switch
    flex: 0 0 auto
  input
    flex: 1 0 auto
    margin-right: 0.5em

@media screen and (min-width: 1000px)
  body.topics.show
    section.topic
      width: 60%

    .header
      right: 0
      top: 4em
      position: fixed
      width: 40%
      padding: 0 2em 0 1em

      textarea
        height: 10em


.left-nav
  @extend %white-background
  @extend %standard-shadow
  @extend %stacked-nav
  @extend %smooth-text
  margin-top: 46px

  .item
    @extend %relative
    @extend %regular-type-size
    // @extend %chevron-horizontal
    color: $header-gray
    padding: 15px 40px 15px 15px
    text-decoration: none
    &:after
      @extend %no-line-height
      right: 10px
      top: 25px

    &.current, &.current:hover
      @extend %active-background
      font-weight: bold
      &:after
        color: #fff

    &:hover
      background-color: $nav-hover-background
      .facet-count
        background-color: #fff

  .nav-heading
    @extend %reset-line-height
    @extend %larger-type
    @extend %stacked-nav
    font-weight: bold
    color: $header-gray
    padding: 22px 15px 0
    border-top: 1px solid $section-separator

  .nav-standfirst
    @extend %small-type
    @extend %serif
    @extend %italic-text
    display: block
    color: $body-copy

Adjust spacing on the left nav facet counts

.left-nav
  @extend %white-background
  @extend %standard-shadow
  @extend %stacked-nav
  @extend %smooth-text
  margin-top: 46px

  .item
    @extend %relative
    @extend %regular-type-size
    // @extend %chevron-horizontal
    color: $header-gray
    padding: 15px 50px 15px 15px
    text-decoration: none
    &:after
      @extend %no-line-height
      right: 10px
      top: 25px

    &.current, &.current:hover
      @extend %active-background
      font-weight: bold
      &:after
        color: #fff

    &:hover
      background-color: $nav-hover-background
      .facet-count
        background-color: #fff

  .nav-heading
    @extend %reset-line-height
    @extend %larger-type
    @extend %stacked-nav
    font-weight: bold
    color: $header-gray
    padding: 22px 15px 0
    border-top: 1px solid $section-separator

  .nav-standfirst
    @extend %small-type
    @extend %serif
    @extend %italic-text
    display: block
    color: $body-copy


// fGrid import file

@import "settings"

// Core modules
@import "core/extra"
@import "core/border-box"
@import "core/transitions"
@import "core/responsive"
@import "core/grid"

// Experimental modules
@import "experimental/abs-padding"
@import "experimental/sticky-footer"

Break stuff to test travis

// fGrid import file

@import "settings"

// Core modules
@import "core/extra"
@import "core/border-box"
@import "core/transitions"
@import "core/responsive"
@import "core/grid"

// Experimental modules
@import "experimental/abs-paddingg"
@import "experimental/sticky-footer"


// this file is meant to export variables
// to be used in other projects. We should not
// need to import it within reimagine2.
$include-html-classes: false
@import 'reimagine2/foundation/config'
@import 'foundation/components/global'
@import 'reimagine2/config'

Load reimagine2/config (includung colors) before foundation

// this file is meant to export variables
// to be used in other projects. We should not
// need to import it within reimagine2.
$include-html-classes: false
@import 'reimagine2/config'
@import 'reimagine2/foundation/config'
@import 'foundation/components/global'


#overview
  ul
    +no-bullets
    +horizontal-list
    li#accounting,
    li#invoicing,
    li#basic_claims_data
      width: 120px
    li
      background: no-repeat top left
      padding-left: 58px
      padding-right: 40px
      min-height: 58px
      a
        border-bottom: 1px solid black
        display: block
      &#overview
        display: none
      &#store
        background-image: url(/images/48x48/store.png)
      &#accounting
        background-image: url(/images/48x48/accounting.png)
      &#invoicing
        background-image: url(/images/48x48/invoicing.png)
      &#basic_claims_data
        background-image: url(/images/48x48/basic_claims_data.png)
      &#user_settings
        background-image: url(/images/48x48/user_settings.png)
    ul
      width: inherit
      margin-top: 5px
      li
        display: block
        float: none
        padding-left: 0px
        width: inherit
        min-height: 1em
        a
          border-bottom: none

Use mixin for overview icon.

@mixin icon-48($ident)
  &##{$ident}
    background-image: url("/images/48x48/#{$ident}.png")

#overview
  ul
    +no-bullets
    +horizontal-list
    li#accounting,
    li#invoicing,
    li#basic_claims_data
      width: 120px
    li
      background: no-repeat top left
      padding-left: 58px
      padding-right: 40px
      min-height: 58px
      a
        border-bottom: 1px solid black
        display: block
      &#overview
        display: none
      +icon-48('store')
      +icon-48('accounting')
      +icon-48('invoicing')
      +icon-48('basic_claims_data')
      +icon-48('user_settings')
    ul
      width: inherit
      margin-top: 5px
      li
        display: block
        float: none
        padding-left: 0px
        width: inherit
        min-height: 1em
        a
          border-bottom: none


html,
body
    width: 300px
    margin: 0

body
    width: 290px
    padding: 5px
    font-family: "Buttercup-OpenSans"
    background-color: rgba(41, 44, 51, 1.0)
    color: #FFF

#app
    height: 100%
    position: relative

h1,
h2,
h3
    margin-top: 0px
    &.green
        color: rgb(0, 183, 172)

h2
    font-size: 24px

button.configure
    position: absolute
    top: 3px
    right: 3px

Fix min height for chrome

html,
body
    width: 300px
    margin: 0

body
    width: 290px
    padding: 5px
    font-family: "Buttercup-OpenSans"
    background-color: rgba(41, 44, 51, 1.0)
    color: #FFF
    min-height: 100px

#app
    height: 100%
    position: relative

h1,
h2,
h3
    margin-top: 0px
    &.green
        color: rgb(0, 183, 172)

h2
    font-size: 24px

button.configure
    position: absolute
    top: 3px
    right: 3px


+block(motd-form)

  +element(body)
    +make-sm-column(7)
    padding-bottom: 20px

    &:after
      content: ""
      border-bottom: 1px solid $app-color-gray
      position: absolute
      left: 15px
      right: 0

  +element(aside)
    +make-sm-column(5)
    padding-left: 45px

  +element(motd-type)
    text-transform: uppercase

  +element(motd-type-description)
    color: $app-color-gray

  +element(title-error)
    padding-left: 15px
    font-weight: bold
    font-size: 15px
    color: $app-color-pink
    text-transform: uppercase

  +element(submit)
    min-width: 150px

  +element(delete)
    min-width: 150px

  +element(cancel)
    text-transform: uppercase

+block(motd-field)
  @extend .form-group
  @extend .field

  +element(aside)
    +make-sm-column(3)
    @extend .field__aside

  +element(body)
    @extend .field__body

  +element(label)
    @extend .field__label

  +element(body)
    +make-sm-column(9)

  +element(input)
    @extend .field__input
    margin-right: 10px !important

  +element(textarea)
    @extend .field__input--textarea

  +element(feedback)
    @extend .field__feedback

  +element(member)
    padding-top: 10px

  +element(member-remove)
    float: right

Update edit SASS to support markdown.

+block(motd-form)

  +element(body)
    +make-sm-column(7)
    padding-bottom: 20px

    &:after
      content: ""
      border-bottom: 1px solid $app-color-gray
      position: absolute
      left: 126px
      right: 0

  +element(aside)
    +make-sm-column(5)
    padding-left: 45px

  +element(title-error)
    padding-left: 15px
    font-weight: bold
    font-size: 15px
    color: $app-color-pink
    text-transform: uppercase

  +element(submit)
    min-width: 150px

  +element(delete)
    min-width: 150px

  +element(cancel)
    text-transform: uppercase

+block(motd-field)
  @extend .form-group
  @extend .field

  +element(aside)
    +make-sm-column(3)
    @extend .field__aside

  +element(body)
    @extend .field__body

  +element(label)
    @extend .field__label

  +element(body)
    +make-sm-column(9)

    +modifier(markdown)
      border: 1px solid $app-color-gray
      border-radius: 5px
      background-color: $app-color-white
      padding: 6px 12px

  +element(input)
    @extend .field__input
    margin-right: 10px !important

  +element(textarea)
    @extend .field__input--textarea

  +element(feedback)
    @extend .field__feedback


@import branding
@import mixins

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

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

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

Tweak taxon background color so it shows up against white

@import branding
@import mixins

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

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

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


nav.top-bar
  h1
    text-transform: capitalize

.navbar-toggle
  float: left
  margin-left: 15px

a.navbar-brand
  color: #ff5555 !important
  font-family: Georgia, "Times New Roman", Serif
  font-size: 1.5em
  font-style: italic
  font-weight: bold
  line-height: 1.307692307692308
  word-spacing: .1em
  &:hover
    color: #5e5e5e !important

.navbar
  form[role=search]
    @media (max-width: $screen-sm)
      border: none
      display: block
      margin: -52px -15px 0 45px
      padding-bottom: 0
    @media (min-width: $screen-sm)
      padding-right: 0
      input#search
        width: 280px

Fix media queries to display search form on iPad

nav.top-bar
  h1
    text-transform: capitalize

.navbar-toggle
  float: left
  margin-left: 15px

a.navbar-brand
  color: #ff5555 !important
  font-family: Georgia, "Times New Roman", Serif
  font-size: 1.5em
  font-style: italic
  font-weight: bold
  line-height: 1.307692307692308
  word-spacing: .1em
  &:hover
    color: #5e5e5e !important

.navbar
  form[role=search]
    @media (max-width: $screen-xs-max)
      border: none
      display: block
      margin: -52px -15px 0 45px
      padding-bottom: 0
    @media (min-width: $screen-sm-min)
      margin: 8px 0
      padding-right: 0
      input#search
        width: 280px


@import compass/typography

body
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

#content
  h3
    color: $dark-grey
    font-size: 1.2em
    margin-bottom: 0.4em
    width: 100%
    float: left

Switch to using Lucida Grande as the base type-face.

@import compass/typography

body
  font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: 13px
  -webkit-font-smoothing: anti-aliased

#content
  h3
    color: $dark-grey
    font-size: 1.2em
    margin-bottom: 0.4em
    width: 100%
    float: left


@import mixins

#active-table-search
  position: relative

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

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

Change z index of icon so it sits behind fixed menu at top

@import mixins

#active-table-search
  position: relative

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

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


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

.producer-hero
  position: relative
  padding: 0

.producer-hero-img
  background-color: #999
  width: 100%
  min-height: 160px
  height: inherit
  max-height: 260px
  overflow: hidden
  margin-top: 2em
  margin-bottom: 1em

h3.producer-name
  background-color: rgba(255,255,255,0.65)
  height: 2.5em
  width: 100%
  position: absolute
  bottom: 0
  padding: 0.5em

.producer-logo
  max-width: 220px

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

Update images styling to make more generic / modular and remove styling specific to producers to make more scalable.

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

.producer-hero
  position: relative
  padding: 0

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


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

// Overview
+overview-icon-48('store')
+overview-icon-48('accounting')
+overview-icon-48('invoicing')
+overview-icon-48('basic_claims_data')
+overview-icon-48('user_settings')

Set min-height for overview items to 9em.

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

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

+overview-icon-48('store')
+overview-icon-48('accounting')
+overview-icon-48('invoicing')
+overview-icon-48('basic_claims_data')
+overview-icon-48('user_settings')


@import "_mixins/all"

#tools
  position: relative
  float: right
  top: 2px
  & > a
    display: block
    width: 39px
    height: 21px
    margin-top: -27px
    background: inline-image('ui/tools-button.png') no-repeat
    cursor: pointer

  .menu
    display: none
    position: absolute
    right: 0
    top: -3px
    width: 135px
    background-color: $color-bg-menu
    border: 1px solid $color-border-light
    @include border-bottom-radius(4px)
    @include single-box-shadow(rgba(black, 0.1), 3px, 3px, 8px)
    a
      display: block
      padding: 5px 25px 5px 25px
      &:hover:not(.disabled)
        background-color: $color-bg-menu-hover
      &:last-child
        @include border-bottom-radius(4px)
      &.disabled
        cursor: default
        color: $color-link-disabled

#actions
  float: right
  text-align: right

Disable links when permissions isn't granted.

@import "_mixins/all"

#tools
  position: relative
  float: right
  top: 2px
  & > a
    display: block
    width: 39px
    height: 21px
    margin-top: -27px
    background: inline-image('ui/tools-button.png') no-repeat
    cursor: pointer

  .menu
    display: none
    position: absolute
    right: 0
    top: -3px
    width: 135px
    background-color: $color-bg-menu
    border: 1px solid $color-border-light
    @include border-bottom-radius(4px)
    @include single-box-shadow(rgba(black, 0.1), 3px, 3px, 8px)
    a
      display: block
      padding: 5px 25px 5px 25px
      &:hover:not(.disabled)
        background-color: $color-bg-menu-hover
      &:last-child
        @include border-bottom-radius(4px)
      &.disabled
        cursor: default
        color: $color-link-disabled

#actions
  float: right
  text-align: right

  a
    &.disabled
      cursor: default
      color: $color-link-disabled
      text-decoration: none