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

Fix padding on comment tools

.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


.hero
    background-color: $black
    color: $white
    margin: 0 calc(0px - #{$normal-space})
    padding: 0 $normal-space 1px
    .hero-title
        position: relative
        img.hero-logo
            width: 7em
        h1
            position: absolute
            display: inline-block
            top: 50%
            transform: translateY(-50%)
            margin: 0 0 0 0.5em
            font-weight: bold
            font-size: 4em
    h2
        margin-top: $normal-space
    h3
        margin-top: $large-space
        margin-bottom: $large-space
        text-align: center
        display: block
        a
            +box_link($lime-light, $black, $lime-light)
            letter-spacing: 0
            display: inline-block

.homepage-bottom-cta
    margin: $normal-space 0

.features
    ul
        margin-bottom: 0
    h1, h2, h3
        text-align: center
        a
            display: inline-block
            +box_link()
            letter-spacing: 0

@media only screen and (max-width: 680px)
    .hero
        .page-body
            padding-top: $normal-space
        .hero-title
            img.hero-logo
                width: 3em
            h1
                font-size: 2em
                top: 0.75em
        h2
            font-size: 1.2em

Fix hero title image alignment

.hero
    background-color: $black
    color: $white
    margin: 0 calc(0px - #{$normal-space})
    padding: 0 $normal-space 1px
    .hero-title
        img.hero-logo
            width: 7em
            vertical-align: bottom
        h1
            display: inline-block
            margin: 0 0 0 0.5em
            font-weight: bold
            font-size: 4em
    h2
        margin-top: $normal-space
    h3
        margin-top: $large-space
        margin-bottom: $large-space
        text-align: center
        display: block
        a
            +box_link($lime-light, $black, $lime-light)
            letter-spacing: 0
            display: inline-block

.homepage-bottom-cta
    margin: $normal-space 0

.features
    ul
        margin-bottom: 0
    h1, h2, h3
        text-align: center
        a
            display: inline-block
            +box_link()
            letter-spacing: 0

@media only screen and (max-width: 680px)
    .hero
        .page-body
            padding-top: $normal-space
        .hero-title
            img.hero-logo
                width: 3em
            h1
                font-size: 2em
                top: 0.75em
        h2
            font-size: 1.2em


@import "_mixins/all"

.maximized
  #right
    width: 0
    padding: 0
    *:not(#slider):not(.icon):not(.ember-view)
      display: none

  #slider
    left: -20px
    width: 20px
    height: 20px
    background-image: inline-image('ui/slider-open.png')
    background-position: 6px 5px
    @include border-bottom-left-radius(4px)

#top .profile
  margin-right: 50px

Fix sidebar not fully collapsing.

@import "_mixins/all"

.maximized
  #right
    width: 0
    padding: 0
    flex: 0
    *:not(#slider):not(.icon):not(.ember-view)
      display: none

  #slider
    left: -20px
    width: 20px
    height: 20px
    background-image: inline-image('ui/slider-open.png')
    background-position: 6px 5px
    @include border-bottom-left-radius(4px)

#top .profile
  margin-right: 50px


.back-to-top-button
  display: block
  background-color: rgba(0,0,0,0.7)
  color: white
  font-size: 0.8rem
  position: fixed
  right: 3%
  bottom: 3%
  padding: 0.8em
  opacity: 0
  visibility: hidden

  &:hover
    color: $orange

  &.show
    opacity: 1
    visibility: visible

Make Back to top Button rounded

.back-to-top-button
  display: block
  background-color: rgba(0,0,0,0.7)
  color: white
  font-size: 0.8rem
  position: fixed
  right: 3%
  bottom: 3%
  padding: 0.8em
  border-radius: 9999px
  opacity: 0
  visibility: hidden

  &:hover
    color: $orange

  &.show
    opacity: 1
    visibility: visible


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


@import core/_settings
@import core/_foundation
@import font-awesome

@import core/**/*
@import modules/**/*
@import modules/**/**/*
//@import resources/**/*
//@import resources/**/**/*

Add pages folder to css

@import core/_settings
@import core/_foundation
@import font-awesome

@import core/**/*
@import modules/**/*
@import modules/**/**/*
@import pages/**/*
@import pages/**/**/*


.footer
  background-color: get-color(air)
  box-shadow: 0 -1px 2px 0 get-color((color: dark, opacity: .1))
  width: 100%

  &__content
    align-items: center
    display: flex
    justify-content: space-between
    padding: 40px 0

  &__summary
    display: flex

  &__logo
    margin-right: 30px
    width: 125px

  &__links
    list-style: none
    padding: 0

  &__link
    display: inline-block
    font-size: 12px
    font-weight: 700
    margin-left: 20px
    text-transform: uppercase

  &__socials
    align-self: right
    list-style: none
    padding: 0

  &__social
    background-color: get-color((color: raiz, opacity: .9))
    border-radius: 100%
    display: inline-block
    height: 30px
    margin-left: 5px
    width: 30px

  &__info
    background-color: get-color(rumba)
    color: get-color((color: dark, opacity: .4))
    font-size: 14px
    font-style: italic
    padding: 15px
    text-align: center

Add footer style in mobile

.footer
  background-color: get-color(air)
  box-shadow: 0 -1px 2px 0 get-color((color: dark, opacity: .1))
  width: 100%

  &__content
    display: block
    padding: 40px 0

  &__summary
    display: block
    width: 100%

  &__logo
    display: block
    margin-left: auto
    margin-right: auto
    width: 125px

  &__links
    list-style: none
    margin: 30px 0
    padding: 0

  &__link
    font-size: 12px
    font-weight: 700
    margin-bottom: 15px
    text-align: center
    text-transform: uppercase

  &__socials
    list-style: none
    padding: 0
    text-align: center

  &__social
    background-color: get-color((color: raiz, opacity: .9))
    border-radius: 100%
    display: inline-block
    height: 30px
    margin-right: 5px
    width: 30px

    &:last-child
      margin-right: 0

  &__info
    background-color: get-color(rumba)
    color: get-color((color: dark, opacity: .4))
    font-size: 14px
    font-style: italic
    padding: 15px
    text-align: center

  +media($breakpoint-normal)
    &__content
      align-items: center
      display: flex
      justify-content: space-between

    &__summary
      display: flex
      height: 36px
      width: auto

    &__logo
      margin-right: 30px

    &__links
      margin: 0

    &__link
      display: inline-block
      line-height: 36px
      margin-bottom: 0
      margin-left: 20px

    &__socials
      align-self: right
      text-align: left


html
  background: $body-bg

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

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

ul.no-style
  list-style: none

.reveal-modal
  border-radius: 4px

.white
  background: white

.clearfix
  +clearfix

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

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

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

Fix reveal model bg z-index

html
  background: $body-bg

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

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

ul.no-style
  list-style: none

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

.reveal-modal-bg
  z-index: 100

.white
  background: white

.clearfix
  +clearfix

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

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

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


.row
  max-width: 100%

.query-list
  background-color: #C2FFA3

.timeline
  background-color: #85B5E6

.item-detail
  background-color: #FFAD33

Enlarge columns to use full window height

#app, .home, .query-list, .timeline, .item-detail
  height: 100%

.row
  max-width: 100%

.query-list
  background-color: #C2FFA3

.timeline
  background-color: #85B5E6

.item-detail
  background-color: #FFAD33


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

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

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

Set the web variables to be global

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

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

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


$font-path: "/assets/fonts" !default

@import "/app/stylesheets/huxtable/fonts/bitsans"
@import "/app/stylesheets/huxtable/fonts/symbolset"

$sans-serif: 'Bit Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
=sans-serif
  font-family: $sans-serif

$serif: 'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif
=serif
  font-family: $serif

Update paths for font styles

$font-path: "/assets/fonts" !default

@import "huxtable/fonts/bitsans"
@import "huxtable/fonts/symbolset"

$sans-serif: 'Bit Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
=sans-serif
  font-family: $sans-serif

$serif: 'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif
=serif
  font-family: $serif


// rem.sass
//
// @package assetify/helpers
// @media screen
// @version 1.0
// @see https://github.com/bitmanic/rem

// Baseline, measured in pixels. The value should be the same as the font-size value for the html element.
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the
// variable below would be 10px.
$baseline-px: 10px !default

=rem($property, $px-values)
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / 1rem

  // Print the first line in pixel values
  #{$property}: $px-values

  // If there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"
    #{$property}: $px-values / $baseline-rem
  @else
    // Create an empty list that we can dump values into
    $rem-values: ()

    @each $value in $px-values

      // If the value is zero or not a number, return it
      @if $value == 0 or type-of( $value ) != "number"
        $rem-values: append($rem-values, $value)
      @else
        $rem-values: append($rem-values, $value / $baseline-rem)

    // Return the property and its list of converted values
    #{$property}: $rem-values

Use “@mixin” instead of “=”.

// rem.sass
//
// @package assetify/helpers
// @media screen
// @version 1.0
// @see https://github.com/bitmanic/rem

// Baseline, measured in pixels. The value should be the same as the font-size value for the html element.
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px), then the
// variable below would be 10px.
$baseline-px: 10px !default

@mixin rem($property, $px-values)
  // Convert the baseline into rems
  $baseline-rem: $baseline-px / 1rem

  // Print the first line in pixel values
  #{$property}: $px-values

  // If there is only one (numeric) value, return the property/value line for it.
  @if type-of($px-values) == "number"
    #{$property}: $px-values / $baseline-rem
  @else
    // Create an empty list that we can dump values into
    $rem-values: ()

    @each $value in $px-values

      // If the value is zero or not a number, return it
      @if $value == 0 or type-of( $value ) != "number"
        $rem-values: append($rem-values, $value)
      @else
        $rem-values: append($rem-values, $value / $baseline-rem)

    // Return the property and its list of converted values
    #{$property}: $rem-values


// **
// * Generic typefaces for Western (Latin-based)
// * characters
// *
$mre-sans:    'Helvetica Neue', Helvetica, Arial  !default
$mre-serif:   Georgia, 'Times New Roman'          !default
$mre-cursive: 'Apple Chancery', 'Snell Roundhand' !default
$mre-mono:    Menlo, Courier                      !default

// **
// * Generic typefaces for Chinese
// *
$mre-sans-zh:    ''                               !default
$mre-serif-zh:   ''                               !default
$mre-cursive-zh: ''                               !default
$mre-mono-zh:    $mre-sans-zh                     !default

// **
// * Import Han module
// *
@import ../sass/han

.sans
  +han-typeface-by-lang( sans )
.sans-italic
  +han-typeface-by-lang( sans-italic )
.mono
  +han-typeface-by-lang( mono )
.serif
  +han-typeface-by-lang( serif )
.cursive
  +han-typeface-by-lang( cursive )
.cursive-italic
  +han-typeface-by-lang( cursive-italic )

Update test examples for v3.0.1

// **
// * Generic typefaces for Western (Latin-based)
// * characters
// *
$mre-sans:    'Helvetica Neue', Helvetica, Arial  !default
$mre-serif:   Georgia, 'Times New Roman'          !default
$mre-cursive: 'Apple Chancery', 'Snell Roundhand' !default
$mre-mono:    Menlo, Consolas, Courier            !default

// **
// * Generic typefaces for Chinese
// *
$mre-sans-zh:    ''                               !default
$mre-serif-zh:   ''                               !default
$mre-cursive-zh: ''                               !default
$mre-mono-zh:    $mre-sans-zh                     !default

// **
// * Import Han module
// *
@import ../sass/han

.sans
  +han-typeface-by-lang( sans )
.sans-italic
  +han-typeface-by-lang( sans-italic )
.mono
  +han-typeface-by-lang( mono )
.serif
  +han-typeface-by-lang( serif )
.cursive
  +han-typeface-by-lang( cursive )
.cursive-italic
  +han-typeface-by-lang( cursive-italic )


=shared-secret
  span#shared-secret
    background-color: #FFFD9E
    color: #555
    padding: 4px
    border: 1px solid $color_grey_medium

Modify journalist 2fa TOTP secret style

=shared-secret
  span#shared-secret
    background-color: $color_grey_light
    color: #555
    padding: 8px 16px
    font-family: monospace
    font-size: 1.15em
    font-weight: bold


//- 💫 CSS > COMPONENTS > BUTTONS

.c-button
    display: inline-block
    font-weight: bold
    padding: 0.75em 1em
    border: 2px solid
    border-radius: 2px
    text-align: center
    transition: background 0.25s ease

    &.c-button--primary
        background: $color-theme
        color: $color-back
        border-color: $color-theme

        &:hover
            background: $color-theme-dark
            border-color: $color-theme-dark

    &.c-button--secondary
        background: $color-back
        color: $color-theme
        border-color: $color-theme

Add bottom margin hack to prevent overlaps

//- 💫 CSS > COMPONENTS > BUTTONS

.c-button
    display: inline-block
    font-weight: bold
    padding: 0.75em 1em
    margin-bottom: 1px
    border: 2px solid
    border-radius: 2px
    text-align: center
    transition: background 0.25s ease

    &.c-button--primary
        background: $color-theme
        color: $color-back
        border-color: $color-theme

        &:hover
            background: $color-theme-dark
            border-color: $color-theme-dark

    &.c-button--secondary
        background: $color-back
        color: $color-theme
        border-color: $color-theme


.user-profile-page
  header.hero
    position: relative

  .profile-image
    position: absolute
    bottom: 0
    left: 50%
    border: 6px solid white
    margin-bottom: -75px
    margin-left: -75px
    background: white
    &.company
      margin-left: -150px

  section.content
    padding: 1.5em 0

  .hero-bio
    padding: 5em 0 2em
    text-align: center
    background: white
    h2
      text-transform: uppercase
      margin-bottom: 0
    .bio
      margin: 1em auto
      color: $secondary-font-color
      font:
        size: 1.05em
        weight: 300

  .user-social
    li
      display: inline-block
    .social-link
      display: block
      width: 30px
      height: 30px
      padding: 5px
      background: $primary-color
      color: white
      text-align: center
      line-height: 1.3em
      border-radius: 50%
      margin: 0 .3em
      +transition(.3s)
      &:hover
        background: darken($primary-color, 15%)

  .projects
    [class*="column"]:last-child
      float: left

Add border size to with and height on user profile page

.user-profile-page
  header.hero
    position: relative

  .profile-image
    position: absolute
    bottom: 0
    left: 50%
    border: 6px solid white
    margin-bottom: -75px
    margin-left: -75px
    background: white
    &.company
      width: 312px
      height: 162px
      margin-left: -150px

  section.content
    padding: 1.5em 0

  .hero-bio
    padding: 5em 0 2em
    text-align: center
    background: white
    h2
      text-transform: uppercase
      margin-bottom: 0
    .bio
      margin: 1em auto
      color: $secondary-font-color
      font:
        size: 1.05em
        weight: 300

  .user-social
    li
      display: inline-block
    .social-link
      display: block
      width: 30px
      height: 30px
      padding: 5px
      background: $primary-color
      color: white
      text-align: center
      line-height: 1.3em
      border-radius: 50%
      margin: 0 .3em
      +transition(.3s)
      &:hover
        background: darken($primary-color, 15%)

  .projects
    [class*="column"]:last-child
      float: left


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

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

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

Patch support legacy browser function.

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

// Patching the support-legacy-browser function with an unmerged commit in compass. See: https://github.com/chriseppstein/compass/pull/1524
// Check whether the browser is supported according to the supported browsers,
// declared minimum support and usage thresholds.
@function support-legacy-browser($browser, $min-version, $max-version: null, $threshold: $critical-usage-threshold)
    @if not index($supported-browsers, $browser)
        @return false

    // Check against declared minimums.
    $min-required-version: map-get($browser-minimum-versions, $browser)
    @if $min-required-version
        @return compare-browser-versions($browser, $max-version or $min-version, $min-required-version) >= 0
    @else
        // Check against usage stats.
        $usage: if($max-version, omitted-usage($browser, $min-version, $max-version), omitted-usage($browser, $min-version))
        @return $usage > $threshold

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

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


.hero-header
  padding: +emCalc(60px) 0
  min-height: +emCalc(200px)
  background-size: cover
  background-position: center
  text-align: center
  h2, h3
    color: white

Make some adjustments on hero header

.hero-header
  background-color: $secondary-color
  padding: +emCalc(60px) 0
  min-height: +emCalc(200px)
  background-size: cover
  background-position: center
  text-align: center
  h2, h3
    color: white
  h2
    font-weight: bold
  h3
    text-transform: uppercase
    font-weight: 300
    padding-top: +emCalc(8px)


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

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

.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

Set page max witdth to 960px

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


@import init

*
  box-sizing: border-box

body
  margin: 1em

  @media screen and (max-width: $tablet-large)
    margin: $small-screen-body-margin

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

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

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

.file-section
  margin-bottom: 15px

  .field
    height: 1.6em

  a.add
    margin-right: 0.5em

  .actions
    display: inline
    line-height: 2em

img.loading
  display: none
  vertical-align: bottom

.hide
  display: none

.break-word
  -ms-word-break: break-all
  -ms-word-wrap: break-all
  -webkit-word-break: break-word
  -webkit-word-wrap: break-word
  word-break: break-word
  word-wrap: break-word
  -webkit-hyphens: auto
  -moz-hyphens: auto
  hyphens: auto

Apply box-sizing to pseudo elements too

@import init

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

body
  margin: 1em

  @media screen and (max-width: $tablet-large)
    margin: $small-screen-body-margin

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

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

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

.file-section
  margin-bottom: 15px

  .field
    height: 1.6em

  a.add
    margin-right: 0.5em

  .actions
    display: inline
    line-height: 2em

img.loading
  display: none
  vertical-align: bottom

.hide
  display: none

.break-word
  -ms-word-break: break-all
  -ms-word-wrap: break-all
  -webkit-word-break: break-word
  -webkit-word-wrap: break-word
  word-break: break-word
  word-wrap: break-word
  -webkit-hyphens: auto
  -moz-hyphens: auto
  hyphens: auto


@import './variables'

.ql-container.ql-snow
  font-family: $font-family
  font-size: .8em
  border: none
  background: $picnic-white

  .ql-editor
    min-height: 25vh
    border: $picnic-border
    border-radius: $picnic-radius

    &:focus
      border-color: $picnic-primary

.ql-toolbar.ql-snow
  font-family: $font-family
  position: sticky
  top: $picnic-nav-height
  border: none
  box-shadow: 0px 1px 0px $picnic-dull
  z-index: 1000
  background: $light-gray

Revert "blue border on editor focus"

@import './variables'

.ql-container.ql-snow
  font-family: $font-family
  font-size: .8em
  border: $picnic-border !important
  border-radius: $picnic-radius
  background: $picnic-white
  min-height: 25vh

.ql-toolbar.ql-snow
  font-family: $font-family
  position: sticky
  top: $picnic-nav-height
  border: none
  box-shadow: 0px 1px 0px $picnic-dull
  z-index: 1000
  background: $light-gray


// -----------------------------------------------------------------------------
// Styling for moderator tools. Wherever they may be found.
// -----------------------------------------------------------------------------

.moderation-tools

  .nav__item
    margin-right: 10px

.moderation-tools__inline-btn
  margin-left: 10px
  text-align: center
  width: 75px

.avatar-review
  .user-info
    .btn
      @extend %transition--base
      opacity: 0.5
    &:hover .btn
      opacity: 1

.analytics
  .btn
    float: right

Remove awkward avatar button opacity.


@import "blueprint/liquid"
@import "compass/utilities/lists/horizontal-list"

body
  +blueprint-liquid-grid
  font

#container
  +container
  margin-top: $h2_size

#main-menu
  ul
    +horizontal-list

#content
  +column($column_content)

#sidebar
  +column($column_sidebar)
  +last
  padding-top: $h2_size * 2

#sidebar,
#content
  margin-top: 20px

Use sans-serif font by default.

@import "blueprint/liquid"
@import "compass/utilities/lists/horizontal-list"

body
  +blueprint-liquid-grid
  +sanserif-font

#container
  +container
  margin-top: $h2_size

#main-menu
  ul
    +horizontal-list

#content
  +column($column_content)

#sidebar
  +column($column_sidebar)
  +last
  padding-top: $h2_size * 2

#sidebar,
#content
  margin-top: 20px


@import './helpers/mixins.sass'

body
  margin: 0
  font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', 'HelveticaNeue-Light', 'Arial', 'sans-serif'
  overflow-x: hidden

  +at-desktop()
    margin-left: 200px

ul
  margin: 0
  padding: 0

li
  list-style: none
  box-sizing: border-box

a
  text-decoration: none
  margin: 0

.Content
  width: 100%
  margin: 0em auto

  +at-desktop()
    width: 90%
    margin-top: 3em

Fix top padding on Content class

@import './helpers/mixins.sass'

body
  margin: 0
  font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', 'HelveticaNeue-Light', 'Arial', 'sans-serif'
  overflow-x: hidden

  +at-desktop()
    margin-left: 200px

ul
  margin: 0
  padding: 0

li
  list-style: none
  box-sizing: border-box

a
  text-decoration: none
  margin: 0

.Content
  width: 100%
  margin-top: 3em

  +at-desktop()
    width: 90%
    margin: 0em auto


[data-action="index"][data-controller="explore"]
  #page_content
    .container
      div.project
        margin: 5px
      #explore_results
        margin-bottom: 20px
      .sidebar
        section
          &.highlights
            h2
              background-image: image-url('neighborly/min_star12x11.png')
          &.categories
            margin-bottom: 20px
            border-bottom: 1px rgba(black, 0.1) solid
            h2
              background-image: image-url('neighborly/category_icon14x14.png')

          h2
            text-transform: none
          ul
            li
              a
                padding: 10px

Adjust margin between project on explore page

[data-action="index"][data-controller="explore"]
  #page_content
    .container
      .main
        margin-left: 0
        margin-right: 0
        width: 720px
        .section_header
          margin-left: 10px
      div.project
        margin: 10px
      #explore_results
        margin-bottom: 20px
      .sidebar
        section
          &.highlights
            h2
              background-image: image-url('neighborly/min_star12x11.png')
          &.categories
            margin-bottom: 20px
            border-bottom: 1px rgba(black, 0.1) solid
            h2
              background-image: image-url('neighborly/category_icon14x14.png')

          h2
            text-transform: none
          ul
            li
              a
                padding: 10px


// Master layouts file - import all needed layout styles here
@import layouts/navbar
@import layouts/header
@import layouts/footer

Add l-content and l-container to layouts

// Master layouts file - import all needed layout styles here
@import layouts/navbar
@import layouts/header
@import layouts/footer
@import layouts/l-container
@import layouts/l-content


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

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

.l-row

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

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

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

.l-grid

.l-grid-box

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

.l-card

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

.l-bucket

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

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

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

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

Add new base utilities to the Core Layout module

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

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

.l-row

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

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

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

.l-grid

.l-grid-box

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

.l-card

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

.l-bucket

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

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

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

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

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

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

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


.error-container
  background: white
  border-radius: 5px
  margin: 0 auto
  position: relative
  top: 8em
  width: 720px
  +max-width($small)
    top: 2.75em
    width: 100%

  &__content
    padding: 2em 2em 0 2em

  &__footer
    margin-top: 2em

Add margin to bottom of container

.error-container
  background: white
  border-radius: 5px
  margin: 0 auto
  position: relative
  top: 8em
  width: 720px
  +max-width($small)
    top: 2.75em
    width: 100%
    margin-bottom: 3em

  &__content
    padding: 2em 2em 0 2em

  &__footer
    margin-top: 2em


input.ui-autocomplete-loading
  padding-right: 3px
  background: white url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif') no-repeat right center
  @include transition(none)
  &:focus
    background: white url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif') no-repeat right center
    @include transition(none)

.autocomplete-content
  padding-left: 5px
  font-size: 10px

.ui-menu .ui-menu-item
  padding-left: 3px

Fix bug with broken style in autocomplete search form

input.ui-autocomplete-loading
  padding-right: 3px
  background: white url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif') no-repeat right center
  @include transition(none)
  &:focus
    background: white url('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif') no-repeat right center
    @include transition(none)

.autocomplete-content
  padding-left: 5px
  font-size: 10px

.ui-menu .ui-menu-item
  padding-left: 3px
  list-style-image: none


.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

Fix tooltip on backers page

.project-page
  .backers-page
    .backer
      padding: +emCalc(15px)
      border: 1px solid $border-color
      margin-bottom: +emCalc(20px)
      p
        overflow: hidden
      .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


/* _banner.sass */

.banner
  background-color: $dark-gray
  background-image: url(/img/bg-banner.png)
  background-repeat: no-repeat
  background-size: cover
  color: $lighter-gray
  height: 783px
  text-align: center
  .logo
    background-image: url(/img/logo.png)
    background-position: top center
    background-repeat: no-repeat
    height: 125px
    margin: 105px 0 80px 0
    h1
      text-indent: -9999px
  h2
    font-family: "bebas-neue", Helvetica, Arial, sans-serif
    font-size: 3.857em
    text-shadow: 0 1px 3px rgba(0,0,0,0.5)

Change Sass img() to point to relative URLs

/* _banner.sass */

.banner
  background-color: $dark-gray
  background-image: url("../img/bg-banner.png")
  background-repeat: no-repeat
  background-size: cover
  color: $lighter-gray
  height: 783px
  text-align: center
  .logo
    background-image: url("../img/logo.png")
    background-position: top center
    background-repeat: no-repeat
    height: 125px
    margin: 105px 0 80px 0
    h1
      text-indent: -9999px
  h2
    font-family: "bebas-neue", Helvetica, Arial, sans-serif
    font-size: 3.857em
    text-shadow: 0 1px 3px rgba(0,0,0,0.5)


@import "compass/typography/text/force-wrap"

.form-inputs, .form-actions
  margin-bottom: 10px

.input
  margin-bottom: 10px

  // General form styles
  input, select, textarea
    background-color: white
    border-radius: 4px
    border: 1px solid $black
    font-size: 14px
    height: 40px

  // String inputs
  input.string, input.numeric, input.password, select
    padding: 4px 8px
    width: 100%

  input[type=checkbox]
    height: auto

  span.radio
    label
      display: block

    input[type=radio]
      height: auto

.btn, a.btn:visited
  +force-wrap
  background-color: #0266c8
  border-radius: 4px
  border: 0
  color: white
  cursor: pointer
  font-size: 16px
  max-width: 100%
  padding: 12px

  &:hover
    background-color: #1188cc
    text-decoration: none
  &:active
    color: $black

Add css for datetime fields

@import "compass/typography/text/force-wrap"

.form-inputs, .form-actions
  margin-bottom: 10px

.input
  margin-bottom: 10px

  // General form styles
  input, select, textarea
    background-color: white
    border-radius: 4px
    border: 1px solid $black
    font-size: 14px
    height: 40px

  // String inputs
  input.string, input.numeric, input.password, select
    padding: 4px 8px
    width: 100%

  input[type=checkbox]
    height: auto

  span.radio
    label
      display: block

    input[type=radio]
      height: auto

  select.datetime
    width: auto

.btn, a.btn:visited
  +force-wrap
  background-color: #0266c8
  border-radius: 4px
  border: 0
  color: white
  cursor: pointer
  font-size: 16px
  max-width: 100%
  padding: 12px

  &:hover
    background-color: #1188cc
    text-decoration: none
  &:active
    color: $black


//- 💫 CSS > COMPONENTS > SIDEBAR

//- Sidebar container

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

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

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

//- Sidebar section

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

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

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

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

Add subtle background to active items

//- 💫 CSS > COMPONENTS > SIDEBAR

//- Sidebar container

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

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

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

//- Sidebar section

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

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

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

    .is-active
        font-weight: bold
        color: $color-theme
        background: rgba($color-subtle, 0.4)


.error-title
  text-align: center
  width: 100%
  &__heading
    color: $blue
    font-size: $f-xl
    font-weight: bold
    line-height: $f-xl + 5
    padding: 0.5em 0 0.75em
  &__error-message
    color: $dark-grey
    font-size: $f-large
    font-weight: bold
    line-height: 1.5em
    text-align: justify
    h2
      line-height: 3em
    i
      font-style: italic
    ul
      list-style: disc
      margin: 0.5em 0 0.5em 1.5em

Improve image padding in error text

.error-title
  text-align: center
  width: 100%
  &__heading
    color: $blue
    font-size: $f-xl
    font-weight: bold
    line-height: $f-xl + 5
    padding: 0.5em 0 0.75em
  &__error-message
    color: $dark-grey
    font-size: $f-large
    font-weight: bold
    line-height: 1.5em
    text-align: justify
    h2
      line-height: 3em
    i
      font-style: italic
    ul
      list-style: disc
      margin: 0.5em 0 0.5em 1.5em
    img
      padding: 0 0 1em 1em


.whos-online
  .results
    margin: 15px -10px 0 0

  .user-info
    @extend %clearfix
    float: left
    margin-bottom: 15px
    width: 192px
    .card
      +css-arrow(left, 10px, 40px, -4px, 21px)
      border-radius: 4px
      box-sizing: border-box
      float: left
      padding: 16px 16px 8px
      position: relative
      width: 132px
      &:after
        color: #fff
        position: absolute
        text-shadow: -1px 0 1px rgba(0,0,0,0.1)

  .user-info__avatar
    float: left
    margin-right: 10px

  .user-info__details
    border-radius: 0 0 4px 4px
    margin: 16px -16px -8px // to counteract the padding of the parent container
    padding: 8px 6px 8px 16px

  .user-info__location
    margin-top: 11px

  .filters
    +font-size(13)
  .filters__label
    color: $feature-copy
    float: left
    font-weight: bold
    margin: 8px 10px 0 0
    text-transform: uppercase

Reorganize and tidy up the who's online stylesheet.

// -----------------------------------------------------------------------------
// Styling for the who's online page.
// -----------------------------------------------------------------------------
.whos-online

  .filters
    +font-size(13)
  .filters__label
    color: $feature-copy
    float: left
    font-weight: bold
    margin: 8px 10px 0 0
    text-transform: uppercase

  .results
    margin: 15px -10px 0 0

  // Styling for each individual user card/thing.
  .user-info
    @extend %clearfix
    float: left
    margin-bottom: 15px
    width: 192px
    .card
      +css-arrow(left, 10px, 40px, -4px, 21px)
      border-radius: 4px
      box-sizing: border-box
      float: left
      padding: 16px 16px 8px
      position: relative
      width: 132px
      &:after
        color: #fff
        position: absolute
        text-shadow: -1px 0 1px rgba(0,0,0,0.1)
  .user-info__avatar
    float: left
    margin-right: 10px
  .user-info__details
    border-radius: 0 0 4px 4px
    margin: 16px -16px -8px // to counteract the padding of the parent container
    padding: 8px 6px 8px 16px
  .user-info__location
    margin-top: 11px


#main, .posts
  +outer-container

.posts p,  article.article-detail, .index-article
  +shift(2)
  +span-columns(8)

.soundcloud-player-small
  margin:
    top: $small-margin

.index-article
  margin:
    bottom: ($small-margin + $medium-margin)

.topic-list
  color: $medium-gray
  line-height: 1.8em

.post-title
  a
    color: darken($medium-gray, 30%)
    font-size: 1.7em

.posts, .article-detail
  p
    color: darken($medium-gray, 30%)
    font-size: 1.05em
    line-height: 1.35em
    margin:
      bottom: $medium-margin

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

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

Adjust date color for posts

#main, .posts
  +outer-container

.posts p,  article.article-detail, .index-article
  +shift(2)
  +span-columns(8)

.soundcloud-player-small
  margin:
    top: $small-margin

.index-article
  margin:
    bottom: ($small-margin + $medium-margin)

.topic-list
  color: $medium-gray
  line-height: 1.8em

.post-title
  a
    color: darken($medium-gray, 30%)
    font-size: 1.7em

.posts, .article-detail
  p
    color: darken($medium-gray, 30%)
    font-size: 1.05em
    line-height: 1.35em
    margin:
      bottom: $medium-margin

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

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


/**
 * RESET
 */

body
  background-color: white

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

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

a
  -webkit-touch-callout: none

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

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal

Reset heading font sizes to px and force font-weight normal

/**
 * RESET
 */

body
  background-color: white

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

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

a
  -webkit-touch-callout: none

h1
  font-size: 32px

h2
  font-size: 24px

h3
  font-size: 18px

h4
  font-size: 16px

h5
  font-size: 13px

h6
  font-size: 10px

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

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

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal


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

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

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

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

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

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

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

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

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

Fix spacing issue with about page headers

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

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

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

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

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

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

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

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

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

h3.about-header
  margin-top: em(20px)


// Styles for drawing a laptop

$screen-border-color: #333
$body-color: #bbb
$trackpad-color: #666
$shadow-color: rgba(0, 0, 0, .5)

.laptop
  width: 50vw
  height: 29vw

  position: absolute
  top: 50%
  left: 50%

  z-index: 50

  transform: translate(-50%, -50%)

  .laptop-screen
    position: relative
    left: 7%
    height: 94%
    width: 86%
    background-color: $screen-border-color
    border-radius: 2vw 2vw 0 0
    padding: 3.5%

    box-shadow: 3px 3px 4px 0 $shadow-color
    z-index: 1

    .laptop-content
      width: 100%
      height: 100%

  .laptop-base
    position: relative
    background-color: $body-color
    height: 6%
    border-radius: 0 0 1vw 1vw

    z-index: 2
    box-shadow: 3px 3px 4px 0 $shadow-color

    .laptop-trackpad
      position: relative
      left: 50%
      background-color: $trackpad-color
      width: 20%
      height: 30%
      border-radius: 0 0 1vw 1vw
      transform: translateX(-50%)

Store all shadow aspects in a variable

// Styles for drawing a laptop

$screen-border-color: #333
$body-color: #bbb
$trackpad-color: #666
$shadow-color: rgba(0, 0, 0, .5)

$shadow: 3px 3px 4px 0 $shadow-color

.laptop
  width: 50vw
  height: 29vw

  position: absolute
  top: 50%
  left: 50%

  z-index: 50

  transform: translate(-50%, -50%)

  .laptop-screen
    position: relative
    left: 7%
    height: 94%
    width: 86%
    background-color: $screen-border-color
    border-radius: 2vw 2vw 0 0
    padding: 3.5%

    box-shadow: $shadow
    z-index: 1

    .laptop-content
      width: 100%
      height: 100%

  .laptop-base
    position: relative
    background-color: $body-color
    height: 6%
    border-radius: 0 0 1vw 1vw

    z-index: 2
    box-shadow: $shadow

    .laptop-trackpad
      position: relative
      left: 50%
      background-color: $trackpad-color
      width: 20%
      height: 30%
      border-radius: 0 0 1vw 1vw
      transform: translateX(-50%)


#conversation
  :overflow auto
  :font-size 11px
  :height 400px
  :line-height 14px
  :border 1px solid #ccc
  :background #fff
  :margin-right 10px
  :margin-bottom 10px

  .message
    .time
      :color #aaa

    .sender
      :color #66f
      :font-weight bold

    .content
      :color #333

    &.sys
      .time
        :color #aaa

      .sender
        :color #5b0
        :font-weight bold

      .content
        :color #5b0
        :font-weight bold

    &.action .content
      :color #66f
      :font-weight bold

#userlist
  :float right
  :overflow auto
  :width 160px
  :height 400px
  :background-color #fff
  :line-height 14px
  :border 1px solid #ccc

  .user
    :border-bottom 1px solid #ccc
    :padding 4px

td#handle
  :padding 0 6px
  :font-weight bold

table#typebox
  :background #efefef
  :width 100%

#entryfield
  :font-size 14px
  :width 100%

div.group_entry
  :border-bottom 1px solid #ccc
  :margin 1em 0

  a
    :font-weight bold

  img
    :vertical-align top
    :float left
    :padding 0 1em 1em 0

Make enter/leave room messages not bold. Make messages not yet recieved by the server italic.

#conversation
  :overflow auto
  :font-size 11px
  :height 400px
  :line-height 14px
  :border 1px solid #ccc
  :background #fff
  :margin-right 10px
  :margin-bottom 10px

  .message
    .time
      :color #aaa

    .sender
      :color #66f
      :font-weight bold

    .content
      :color #333

    &.sys
      .time
        :color #aaa

      .sender
        :color #5b0
        :font-weight normal

      .content
        :color #5b0

    &.action .content
      :color #66f
      :font-weight bold

    &.tmp
      :font-style italic

#userlist
  :float right
  :overflow auto
  :width 160px
  :height 400px
  :background-color #fff
  :line-height 14px
  :border 1px solid #ccc

  .user
    :border-bottom 1px solid #ccc
    :padding 4px

td#handle
  :padding 0 6px
  :font-weight bold

table#typebox
  :background #efefef
  :width 100%

#entryfield
  :font-size 14px
  :width 100%

div.group_entry
  :border-bottom 1px solid #ccc
  :margin 1em 0

  a
    :font-weight bold

  img
    :vertical-align top
    :float left
    :padding 0 1em 1em 0


@import foundation/colors
@import globals/mixins
@import globals/settings

// Menu déroulant sur une colonne
@media only screen and (max-width : $menu-breakpoint-three)
  .l-nav-container
    ul
      display: block

    a#pull
      display: none

Hide admin_bar if javascript is disabled

@import foundation/colors
@import globals/mixins
@import globals/settings

#admin_bar
  display: none

// Menu déroulant sur une colonne
@media only screen and (max-width : $menu-breakpoint-three)
  .l-nav-container
    ul
      display: block

    a#pull
      display: none


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

.aae-article
  position: relative
  margin: $section-margin-top 0 $section-margin-bottom

  .aae-article-pattern
    position: absolute
    bottom: 0
    right: 0
    height: 1000px
    width: 856px
    background: url("/assets/img/pattern_1.png") right bottom no-repeat
    opacity: .05
    z-index: 5

  .aae-article-wrapper
    background-color: $grey-100
    margin: $wrapper-margin auto
    padding: $wrapper-padding
    width: $wrapper-width-narrow
    position: relative
    z-index: 10

Correct z-index and pattern url

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

.aae-article
  position: relative
  margin: $section-margin-top 0 $section-margin-bottom

  .aae-article-pattern
    position: absolute
    bottom: 0
    right: 0
    height: 1000px
    width: 856px
    background: url("/assets/img/pattern-1.png") right bottom no-repeat
    opacity: .05
    z-index: 10

  .aae-article-wrapper
    background-color: $grey-100
    margin: $wrapper-margin-small auto
    padding: $wrapper-padding
    width: $wrapper-width-narrow
    position: relative
    z-index: 20


thread
  display: block
  margin-left: 20px

  .thread-children li
    list-style-type: none

  &.focused > .thread-body > message::before
    display: inline-block

    position: absolute
    top: 0
    right: 100%

    margin-right: 10px

    content: "⇒"

  &.focused::after
    display: inline-block
    content: "Depth: " attr(depth)

    position: absolute
    bottom: 0
    right: 0

    z-index: 10

    opacity: 0.4
    margin: 0.5em

    font-family: monospace
    font-size: 0.7em

  ul
    padding: 0

    message:before
      content: ""
      position: absolute
      width: 15px
      top: 50%
      left: 0
      height: 10000%
      border-top: 2px solid gray
      border-left: 2px solid gray

    li.last > thread > .thread-body > message:before
      border-left-color: white

    li.first > thread > .thread-body > message:before
      top: 50%

Fix crazy scroll, thanks @adamschwartz.

.messages-container > thread
  overflow: hidden

thread
  display: block
  margin-left: 20px

  .thread-children li
    list-style-type: none

  &.focused > .thread-body > message::before
    display: inline-block

    position: absolute
    top: 0
    right: 100%

    margin-right: 10px

    content: "⇒"

  &.focused::after
    display: inline-block
    content: "Depth: " attr(depth)

    position: absolute
    bottom: 0
    right: 0

    z-index: 10

    opacity: 0.4
    margin: 0.5em

    font-family: monospace
    font-size: 0.7em

  ul
    padding: 0

    message:before
      content: ""
      position: absolute
      width: 15px
      top: 50%
      left: 0
      height: 10000%
      border-top: 2px solid gray
      border-left: 2px solid gray

    li.last > thread > .thread-body > message:before
      border-left-color: white

    li.first > thread > .thread-body > message:before
      top: 50%


/**
 *
 */
.scrollable
	overflow:         hidden
	background-color: $silver-chalice

Fix issue with Safari and Scrollable being non co-operative.

/**
 *
 */
.scrollable
	overflow:         hidden
	position:         relative
	background-color: $silver-chalice


@import "blueprint/buttons"

a.button, input.button
  @include anchor-button
  @include background-image(linear-gradient(#f9f9f9, #dfdfdf))
  @include border-radius(3px)
  @include box-shadow(inset 0 1px 0 white, 0 1px 0px #eee)

  color: #333
  font-size: 13px
  border-color: #ccc
  border-color: #b7b7b7 #b7b7b7 #aaa
  padding: 8px 12px 6px
  text-shadow: 0 1px 0 white

  &:active
    border-color: #999
    @include background(linear-gradient(#e5e5e5, #ccc))
    @include box-shadow(inset 0 1px 4px rgba(0, 0, 0, 0.3))

  span
    font-size: 16px
    margin-right: 2px
    vertical-align: middle

h2
  a.button, input.button
    font-weight: normal
    margin: 0

Add a background colour for IE8/9.

@import "blueprint/buttons"

a.button, input.button
  @include anchor-button
  @include background-image(linear-gradient(#f9f9f9, #dfdfdf))
  @include border-radius(3px)
  @include box-shadow(inset 0 1px 0 white, 0 1px 0px #eee)

  background-color: #eee
  color: #333
  font-size: 13px
  border-color: #ccc
  border-color: #b7b7b7 #b7b7b7 #aaa
  padding: 8px 12px 6px
  text-shadow: 0 1px 0 white

  &:active
    border-color: #999
    @include background(linear-gradient(#e5e5e5, #ccc))
    @include box-shadow(inset 0 1px 4px rgba(0, 0, 0, 0.3))

  span
    font-size: 16px
    margin-right: 2px
    vertical-align: middle

h2
  a.button, input.button
    font-weight: normal
    margin: 0


/* http://codepo8.github.io/css-fork-on-github-ribbon/

#forkongithub a
  background: purple
  color: white
  text-decoration: none
  font-family: Arial, sans-serif
  text-align: center
  font-weight: bold
  padding: 5px 40px
  font-size: 1rem
  line-height: 2rem
  position: relative
  transition: 0.5s

#forkongithub a::before, #forkongithub a::after
  content: ""
  width: 100%
  display: block
  position: absolute
  top: 1px
  left: 0
  height: 1px
  background: #fff

#forkongithub a::after
  bottom: 1px
  top: auto

#forkongithub
  position: absolute
  bottom: 5vh
  margin: 0 auto
  left: 0
  right: 0

@media screen and (min-width:600px)
  #forkongithub
    position: absolute
    display: block
    top: 0
    left: auto
    right: 0
    width: 200px
    overflow: hidden
    height: 200px

  #forkongithub a
    width: 200px
    position: absolute
    top: 60px
    right: -60px
    transform: rotate(45deg)
    -webkit-transform: rotate(45deg)
    box-shadow: 4px 4px 10px rgba(0,0,0,0.8)

Fix github banner on mobile so it doesn't overlap hint rules.

/* http://codepo8.github.io/css-fork-on-github-ribbon/

#forkongithub a
  background: purple
  color: white
  text-decoration: none
  font-family: Arial, sans-serif
  text-align: center
  font-weight: bold
  padding: 5px 40px
  font-size: 1rem
  line-height: 2rem
  position: relative
  transition: 0.5s

#forkongithub a::before, #forkongithub a::after
  content: ""
  width: 100%
  display: block
  position: absolute
  top: 1px
  left: 0
  height: 1px
  background: #fff

#forkongithub a::after
  bottom: 1px
  top: auto

@media screen and (min-width:600px)
  #forkongithub
    position: absolute
    display: block
    top: 0
    left: auto
    right: 0
    width: 200px
    overflow: hidden
    height: 200px

  #forkongithub a
    width: 200px
    position: absolute
    top: 60px
    right: -60px
    transform: rotate(45deg)
    -webkit-transform: rotate(45deg)
    box-shadow: 4px 4px 10px rgba(0,0,0,0.8)


@import "modules/globals"

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

Change the style for search result panel

@import "modules/globals"

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

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


#content
  padding-left: 2%
  padding-right: 2%

.codeTextarea
  min-height: 30px
  display: inline
  width: 50%
  font-size: 14px

.immutableCode
  font-size: 18px

.rootSelect
  font-size: 18px

.root
  width: 100%
  display: block
  padding-top: 5px
  padding-bottom: 5px

.rootDescriptionContainer
  width: 70%
  display: inline-flex
  align-items: center

.operator
  width: 100%
  display: inline-block

.loadOptions
  height: 60vh
  overflow: auto

.simulationHeader
  width: 100%
  display: inline-block
  min-height: 30px

.simulationArea
  max-width: 30%
  min-height: 30px
  float: right

.simulationTimeWrapper
  display: inline-block
  min-height: 30px
  text-align: -webkit-center

.simulationValue
  min-height: 30px
  min-width: 80px
  max-width: 80px
  overflow: auto
  padding: 0px 2px 0px 2px
  display: table-cell

.loadOption
  display: inline-block
  padding-bottom: 5px
  width: 100%

.loadDescription
  width: 60%
  float: right

Fix not wrapping simulation values

#content
  padding-left: 2%
  padding-right: 2%

.codeTextarea
  min-height: 30px
  display: inline
  width: 50%
  font-size: 14px

.immutableCode
  font-size: 18px

.rootSelect
  font-size: 18px

.root
  width: 100%
  display: block
  padding-top: 5px
  padding-bottom: 5px

.rootDescriptionContainer
  width: 60%
  display: inline-flex
  align-items: center

.operator
  width: 100%
  display: inline-block

.loadOptions
  height: 60vh
  overflow: auto

.simulationHeader
  width: 100%
  display: inline-block
  min-height: 30px

.simulationArea
  max-width: 30%
  min-height: 30px
  float: right
  white-space: nowrap
  margin-right: 10px

.simulationTimeWrapper
  display: inline-block
  min-height: 30px
  text-align: -webkit-center

.simulationValue
  min-height: 30px
  min-width: 80px
  max-width: 80px
  overflow: auto
  padding: 0px 2px 0px 2px
  display: table-cell

.loadOption
  display: inline-block
  padding-bottom: 5px
  width: 100%

.loadDescription
  width: 60%
  float: right


.error-message
  white-space: pre
  max-width: 700px
  overflow-x: auto

Set max error height to 75% of the display height

.error-message
  white-space: pre
  max-width: 700px
  max-height: 75vh
  overflow-x: auto


#logo img
  &:hover
    opacity: .6

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

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

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

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

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

.pagination-link
  &:hover
    background-color: #0060ff
  &:hover a
    color: white
  &:active a
    opacity: .7

Add transition for footer links

#logo img
  &:hover
    opacity: .6

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

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

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

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

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

.pagination-link
  &:hover
    background-color: #0060ff
  &:hover a
    color: white
  &:active a
    opacity: .7

footer a:hover
  color: rgba(#0060ff, .6)


@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

Tweak background color to taxons

@import branding
@import mixins

.fat-taxons
  @include csstrans
  display: inline-block
  line-height: 1
  margin-right: 0.5rem
  margin-bottom: 0.35rem
  text-transform: uppercase
  font-weight: 300
  font-size: 0.875rem
  background: rgba(235,235,235,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


footer
  +outer-container
  border:
    top: 1px solid #E5E5E5
  margin:
    bottom: 5px
  h3
    color: $light-gray
    margin:
      top: 5px
      bottom: $small-margin

.recent-posts, .footer-tags
  line-height: 1.4em
  margin:
    top: $medium-margin
  a
    color: darken($medium-gray, 30%)
  li
    font-size: 1.05em
    margin:
      bottom: $small-margin
      top: $small-margin

.footer-tags
  li
    display: inline
    margin:
      right: $small-margin

.recent-posts
  margin:
    bottom: $medium-margin
  li
    text-indent: -12px

Increase line-height for footer text

footer
  +outer-container
  border:
    top: 1px solid #E5E5E5
  margin:
    bottom: 5px
  h3
    color: $light-gray
    margin:
      top: 5px
      bottom: $small-margin

.recent-posts, .footer-tags
  line-height: 1.6em
  margin:
    top: $medium-margin
  a
    color: darken($medium-gray, 30%)
  li
    font-size: 1.05em
    margin:
      bottom: $small-margin
      top: $small-margin

.footer-tags
  li
    display: inline
    margin:
      right: $small-margin

.recent-posts
  margin:
    bottom: $medium-margin
  li
    text-indent: -12px


#st--btn-add-expense
  margin-right: 35px

#spending-meter-cont
  position: relative

Add color css class isInPast-color.That changes bg and test color

#st--btn-add-expense
  margin-right: 35px

#spending-meter-cont
  position: relative

.isInPast-color
  background-color: #E4E4E4 !important
  color: black !important


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

.aae-sidebar
  width: 600px

  ul
    list-style: none
    margin: 0
    padding: 0
    text-align: center

    li
      text-transform: uppercase
      padding: 10px 0

      .aae-sidebar-link
        cursor: pointer
        outline: none

        &:hover .aae-sidebar-name,
        &:active .aae-sidebar-name
          color: $primary-light

        .aae-sidebar-name
          color: $white
          font-size: 26px
          font-weight: 900
          padding: 5px
          -webkit-transition: color 250ms ease-out
          -moz-transition: color 250ms ease-out
          -o-transition: color 250ms ease-out
          transition: color 250ms ease-out

      .aae-sidebar-info
        color: $white
        font-size: 14px
        font-weight: 300
        line-height: 20px
        letter-spacing: 1px
        height: 0
        opacity: 0
        overflow: hidden
        -webkit-transition: opacity 500ms ease-out
        -moz-transition: opacity 500ms ease-out
        -o-transition: opacity 500ms ease-out
        transition: opacity 500ms ease-out

      &.show-info
        .aae-sidebar-info
          height: 100%
          opacity: 1

Set dark text on light background

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

.aae-sidebar
  width: 600px

  ul
    list-style: none
    margin: 0
    padding: 0
    text-align: center

    li
      text-transform: uppercase
      padding: 10px 0

      .aae-sidebar-link
        cursor: pointer
        outline: none

        &:hover .aae-sidebar-name,
        &:active .aae-sidebar-name
          color: $primary-light

        .aae-sidebar-name
          color: $grey-800
          font-size: 26px
          font-weight: 900
          padding: 5px
          -webkit-transition: color 250ms ease-out
          -moz-transition: color 250ms ease-out
          -o-transition: color 250ms ease-out
          transition: color 250ms ease-out

      .aae-sidebar-info
        color: $grey-900
        font-size: 14px
        font-weight: 300
        line-height: 20px
        letter-spacing: 1px
        height: 0
        opacity: 0
        overflow: hidden
        -webkit-transition: opacity 500ms ease-out
        -moz-transition: opacity 500ms ease-out
        -o-transition: opacity 500ms ease-out
        transition: opacity 500ms ease-out

      &.show-info
        .aae-sidebar-info
          height: 100%
          opacity: 1


.form-view
  form, form.formtastic
    background-color: transparent
    padding:          0px

    input, textarea, select
      border:        1px dashed #DDDDDD
      border-radius: 3px
      padding:       3px
      &.changed, &:focus
        background-color: #FFFFE0
        background-image: none // Fix for combobox

    fieldset.buttons
      display: none

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button
    -webkit-appearance: none
    margin: 0

Make select fields visualy closer to input.

.form-view
  form, form.formtastic
    background-color: transparent
    padding:          0px

    input, textarea, select
      border:        1px dashed #DDDDDD
      border-radius: 3px
      padding:       3px
      &.changed, &:focus
        background-color: #FFFFE0
        background-image: none // Fix for combobox

    fieldset.buttons
      display: none

  // Select fields visualy closer to input
  select
    background-color: white

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button
    -webkit-appearance: none
    margin: 0


$btn-block-spacing: 0.5em !default
$btn-speed: $speed !default
$btn-timing-function: linear !default
$btn-base-font-size: $base-font-size !default
$btn-base-line-height: $base-line-height !default
$btn-size-multiplier: 2 !default

.btn-block
  display: block
  width: 100%

.btn-block + .btn-block
  margin-top: $btn-block-spacing

.btn-transition
  +transition(all $btn-speed $btn-timing-function)

.btn-xsmall
  +font-size($btn-base-font-size - ($btn-size-multiplier * 2))
  line-height: $btn-base-line-height - (($btn-size-multiplier * 2) * 0.1)

.btn-small
  +font-size($btn-base-font-size - $btn-size-multiplier)
  line-height: $btn-base-line-height - ($btn-size-multiplier * 0.1)

.btn-large
  +font-size($btn-base-font-size + $btn-size-multiplier)
  line-height: $btn-base-line-height + ($btn-size-multiplier * 0.1)

.btn-xlarge
  +font-size($btn-base-font-size + ($btn-size-multiplier * 2))
  line-height: $btn-base-line-height + (($btn-size-multiplier * 2) * 0.1)

Add hardware acceleration to a button transitions

$btn-block-spacing: 0.5em !default
$btn-speed: $speed !default
$btn-timing-function: linear !default
$btn-base-font-size: $base-font-size !default
$btn-base-line-height: $base-line-height !default
$btn-size-multiplier: 2 !default

.btn-block
  display: block
  width: 100%

.btn-block + .btn-block
  margin-top: $btn-block-spacing

.btn-transition
  +transition(all $btn-speed $btn-timing-function)
  +hardware-accelerate
  font-weight: bold

.btn-xsmall
  +font-size($btn-base-font-size - ($btn-size-multiplier * 2))
  line-height: $btn-base-line-height - (($btn-size-multiplier * 2) * 0.1)

.btn-small
  +font-size($btn-base-font-size - $btn-size-multiplier)
  line-height: $btn-base-line-height - ($btn-size-multiplier * 0.1)

.btn-large
  +font-size($btn-base-font-size + $btn-size-multiplier)
  line-height: $btn-base-line-height + ($btn-size-multiplier * 0.1)

.btn-xlarge
  +font-size($btn-base-font-size + ($btn-size-multiplier * 2))
  line-height: $btn-base-line-height + (($btn-size-multiplier * 2) * 0.1)


@charset "UTF-8";
@import google-fonts
@import icomoon
@import normalize-rails
@import bourbon
@import neat
$landscape-mobile-width: 488px
$desktop-width: 1000px
$landscape-mobile: new-breakpoint(min-width $landscape-mobile-width max-width $desktop-width - 1)
$desktop: new-breakpoint(min-width $desktop-width)
@import *

body
  font-family: 'Open Sans', Helvetica, sans-serif
  color: #000
  font-size: 14px
  font-weight: 300

*
  box-sizing: border-box

a
  color: #8D8D8D
  text-decoration: none
  &:hover,
  &:focus
    text-decoration: none
    color: #000

h1, h2, h3, h4, p
  margin: 0

h1
  font-size: 3em

h2
  font-size: 1.6em

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

#container
  +outer-container(1200px)
  margin-top: 20px

.parens
  &:before
    content: "("
  &:after
    content: ")"

Add a bottom margin to portfolios

@charset "UTF-8";
@import google-fonts
@import icomoon
@import normalize-rails
@import bourbon
@import neat
$landscape-mobile-width: 488px
$desktop-width: 1000px
$landscape-mobile: new-breakpoint(min-width $landscape-mobile-width max-width $desktop-width - 1)
$desktop: new-breakpoint(min-width $desktop-width)
@import *

body
  font-family: 'Open Sans', Helvetica, sans-serif
  color: #000
  font-size: 14px
  font-weight: 300

*
  box-sizing: border-box

a
  color: #8D8D8D
  text-decoration: none
  &:hover,
  &:focus
    text-decoration: none
    color: #000

h1, h2, h3, h4, p
  margin: 0

h1
  font-size: 3em

h2
  font-size: 1.6em

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

#container
  +outer-container(1200px)
  margin: 20px auto

.parens
  &:before
    content: "("
  &:after
    content: ")"


#title_bar
  .action_items
    span.action_item > a, span.action_item > .dropdown_menu > a
      @include rounded(0)
      background: $skinActiveColor
      color: #fff
      @include no-shadow()
      text-shadow: none
      border: none
      padding: 17px
      font-size: 14px
      &:hover
        background: lighten( $skinActiveColor, 10% ) !important

.active_admin
  .status_tag
    &.blue
      background: #63B8FF

table.index_table td a.button
  color: #fff

  &.success
    background-color: #007637

    &:hover
      background-color: lighten(#007637, 10%) !important

// Site title
#header h1.site_title
  background: #FFF
  padding-left: 30px
  text-indent: 0

  a
    color: #313131

// Breadcrumb
#titlebar_left
  .breadcrumb
    a
      @include link-colors(#FFF, #FFF, #FFF, #FFF, #FFF)
    .breadcrumb_sep
      color: #FFF
    &:before
      content: "Vous êtes ici: "
      color: #FFF
      margin-right: 6px

Decrease font-size and padding for item_actions in AA views

#title_bar
  .action_items
    span.action_item > a, span.action_item > .dropdown_menu > a
      @include rounded(0)
      background: $skinActiveColor
      color: #fff
      @include no-shadow()
      text-shadow: none
      border: none
      padding: 17px
      font-size: 14px
      &:hover
        background: lighten( $skinActiveColor, 10% ) !important

.active_admin
  .status_tag
    &.blue
      background: #63B8FF

table.index_table td a.button
  color: #fff

  &.success
    background-color: #007637

    &:hover
      background-color: lighten(#007637, 10%) !important

// Site title
#header h1.site_title
  background: #FFF
  padding-left: 30px
  text-indent: 0

  a
    color: #313131

// Breadcrumb
#titlebar_left
  .breadcrumb
    a
      @include link-colors(#FFF, #FFF, #FFF, #FFF, #FFF)
    .breadcrumb_sep
      color: #FFF
    &:before
      content: "Vous êtes ici: "
      color: #FFF
      margin-right: 6px

// Action items
#title_bar .action_items span.action_item > a, #title_bar .action_items span.action_item > .dropdown_menu > a
  font-size: 11px
  padding: 12px


#devpost-footer
  background-color: $grey-2
  text-align: center
  font-size: 1rem
  text-align: left
  padding: 2em 0

  a
    +link-colors($dark)
    +hover-link
    display: inline

  ul
    margin-bottom: 0
    list-style: none
    margin: 0

    li
      margin: 0 2.5em 0 0

      @media #{$small}
        display: inline-block

  .social-links
    float: right
    text-align: right

    li
      margin: 0 0 0 1em
      display: inline-block

    a
      +link-colors($grey-4)
      opacity: 0.6
      @include single-transition(opacity, 200ms)

      &:hover, &:focus
        opacity: 1

  a.ss-icon
    font-size: 2.25rem

    &:hover
      text-decoration: none

  .ss-heart
    color: $red-1

#site-footer-primary-nav
  margin-bottom: 0.7em

#site-footer-legal
  ul
    li
      margin-right: 2em

      a
        +link-colors($grey-4)

Convert footer links to border bottom to allow for transition.

#devpost-footer
  background-color: $grey-2
  text-align: center
  font-size: 1rem
  text-align: left
  padding: 2em 0

  a
    +link-colors($dark)
    display: inline
    transition: border-bottom-color 0.5 ease

    &:hover
      border-bottom: 1px solid $dark

  ul
    margin-bottom: 0
    list-style: none
    margin: 0

    li
      margin: 0 2.5em 0 0

      @media #{$small}
        display: inline-block

  .social-links
    float: right
    text-align: right

    li
      margin: 0 0 0 1em
      display: inline-block

    a
      +link-colors($grey-4)
      opacity: 0.6
      @include single-transition(opacity, 200ms)

      &:hover, &:focus
        opacity: 1

  a.ss-icon
    font-size: 2.25rem

    &:hover
      text-decoration: none

  .ss-heart
    color: $red-1

#site-footer-primary-nav
  margin-bottom: 0.7em

#site-footer-legal
  ul
    li
      margin-right: 2em

      a
        +link-colors($grey-4)
        transition: border-bottom-color 0.5 ease

        &:hover
          border-bottom: 1px solid $grey-4


@mixin img-replace($img-path, $img-width, $img-height)
  background-repeat: no-repeat
  background-image: url($img-path)
  width: $img-width
  height: $img-height
  text-indent: -9999px
  white-space: nowrap

img
  vertical-align: middle

.img-responsive
  display: block
  height: auto
  max-width: 100%

.img-rounded
  border-radius: $ui-border-radius

.img-circle
  border-radius: 50%

Drop `display` attr for `.img-responsive`

@mixin img-replace($img-path, $img-width, $img-height)
  background-repeat: no-repeat
  background-image: url($img-path)
  width: $img-width
  height: $img-height
  text-indent: -9999px
  white-space: nowrap

img
  vertical-align: middle

.img-responsive
  height: auto
  max-width: 100%

.img-rounded
  border-radius: $ui-border-radius

.img-circle
  border-radius: 50%


@charset "UTF-8"

@import 'base'
@import 'common'

body
  +standard-font
  background: $body-color

#root
  width: $root-width
  margin: 0 auto
  position: relative
  z-index: 2

#subroot
  padding-top: 20px
  margin-bottom: 20px

#controls
  position: fixed
  left: 50%
  margin-left: $root-width / 2
  top: -$footer
  z-index: 1
  height: 100%
  width: 300px
  +box-sizing(border-box)
  padding: $footer 0 0 20px
  .wrap
    position: relative

@import 'flash'
@import 'button'
@import 'signin'
@import 'menu'
@import 'article'
@import 'footer'
@import 'open_source'

Add styles for selected text

@charset "UTF-8"

@import 'base'
@import 'common'

body
  +standard-font
  background: $body-color

#root
  width: $root-width
  margin: 0 auto
  position: relative
  z-index: 2

#subroot
  padding-top: 20px
  margin-bottom: 20px

#controls
  position: fixed
  left: 50%
  margin-left: $root-width / 2
  top: -$footer
  z-index: 1
  height: 100%
  width: 300px
  +box-sizing(border-box)
  padding: $footer 0 0 20px
  .wrap
    position: relative

::-moz-selection, ::selection
  background: complement($green)
  color: white

@import 'flash'
@import 'button'
@import 'signin'
@import 'menu'
@import 'article'
@import 'footer'
@import 'open_source'


@import '~sass/partials'

.SearchBarWithIcons
    display: flex
    position: relative
    background-color: inherit
    +size(inherit, 3em)
    font-size: inherit
    line-height: 1

    .Icon
        padding: 1em

        &.close-icon
            +clickable
            position: absolute
            right: 0

    .Searchbar
        flex: 1
        border-left: 1px solid transparent
        padding-left: 0

Remove inner border (clashes with gradient)

@import '~sass/partials'

.SearchBarWithIcons
    display: flex
    position: relative
    background-color: inherit
    +size(inherit, 3em)
    font-size: inherit
    line-height: 1

    .Icon
        padding: 1em

        &.close-icon
            +clickable
            position: absolute
            right: 0

    .Searchbar
        flex: 1
        padding-left: 0


.typography-base
  font: 12px/16px 'Neuzeit', sans-serif
  font-weight: 400

.typography-header
  font-size: 46px
  line-height: 56px
  @extend .font-smoothing
  @extend .optimize-legibility
  letter-spacing: 0.01em

.typography-header-small
  @extend .typography-header
  font-size: 16px
  line-height: 20px
  margin-bottom: 22px

.typography-medium
  font-size: 14px

.typography-small
  font-size: 10px

.typography-action-heavy
  text-transform: uppercase
  font-size: 11px
  font-weight: 700
  letter-spacing: 0.17em
  color: $color-orange

.typography-action
  @extend .typography-action-heavy
  font-size: 10px
  letter-spacing: 0.17em

Add letter spacing to base typograhpy

.typography-base
  font: 12px/16px 'Neuzeit', sans-serif
  font-weight: 400
  letter-spacing: 0.03em

.typography-header
  font-size: 46px
  line-height: 56px
  @extend .font-smoothing
  @extend .optimize-legibility
  letter-spacing: 0.01em

.typography-header-small
  @extend .typography-header
  font-size: 16px
  line-height: 20px
  margin-bottom: 22px

.typography-medium
  font-size: 14px

.typography-small
  font-size: 10px

.typography-action-heavy
  text-transform: uppercase
  font-size: 11px
  font-weight: 700
  letter-spacing: 0.17em
  color: $color-orange

.typography-action
  @extend .typography-action-heavy
  font-size: 10px
  letter-spacing: 0.17em


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

a
  color: $link-color

  transition: all, 0.4s

  &:hover
    color: $link-color-hover

    text-decoration: none

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

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

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

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

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

Add margin bottom on <h1>.

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

a
  color: $link-color

  transition: all, 0.4s

  &:hover
    color: $link-color-hover

    text-decoration: none

h1
  margin-bottom: 5px

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

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

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

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

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

p
  margin-top: 7px
  margin-bottom: 10px


@import "compass/typography/text/force-wrap"

.form-inputs, .form-actions
  margin-bottom: 10px

.input
  margin-bottom: 10px

  // General form styles
  input, select, textarea
    background-color: white
    border-radius: 4px
    border: none
    font-size: 14px
    height: 40px

  // String inputs
  input.string, input.numeric, input.password, select
    padding: 4px 8px
    width: 100%

  input[type=checkbox]
    height: auto

  span.radio
    label
      display: block

    input[type=radio]
      height: auto

.btn, a.btn:visited
  +force-wrap
  background-color: #0266c8
  border-radius: 4px
  border: 0
  color: white
  cursor: pointer
  font-size: 16px
  max-width: 100%
  padding: 12px

  &:hover
    background-color: #1188cc
    text-decoration: none
  &:active
    color: $black

Add border to inputs so they can be seen on white background

@import "compass/typography/text/force-wrap"

.form-inputs, .form-actions
  margin-bottom: 10px

.input
  margin-bottom: 10px

  // General form styles
  input, select, textarea
    background-color: white
    border-radius: 4px
    border: 1px solid $black
    font-size: 14px
    height: 40px

  // String inputs
  input.string, input.numeric, input.password, select
    padding: 4px 8px
    width: 100%

  input[type=checkbox]
    height: auto

  span.radio
    label
      display: block

    input[type=radio]
      height: auto

.btn, a.btn:visited
  +force-wrap
  background-color: #0266c8
  border-radius: 4px
  border: 0
  color: white
  cursor: pointer
  font-size: 16px
  max-width: 100%
  padding: 12px

  &:hover
    background-color: #1188cc
    text-decoration: none
  &:active
    color: $black


article.post
  width: auto
  min-width: 500px // TODO mobile incompatible
  display: table
  padding: 1em
  margin-top: 0.5em
  margin-left: 1em
  margin-bottom: 0.5em
  background-color: #F0E0D6

  &:first-of-type
    background-color: inherit
    margin-left: 0
    margin-bottom: 1em
    padding: 0

  header
    color: #999
    margin-bottom: 0.5em

  a.img
    float: left

    img
      margin-right: 1em
      margin-bottom: 0.5em

Put margin on a instead of img

article.post
  width: auto
  min-width: 500px // TODO mobile incompatible
  display: table
  padding: 1em
  margin-top: 0.5em
  margin-left: 1em
  margin-bottom: 0.5em
  background-color: #F0E0D6

  &:first-of-type
    background-color: inherit
    margin-left: 0
    margin-bottom: 1em
    padding: 0

  header
    color: #999
    margin-bottom: 0.5em

  a.img
    float: left

    margin-right: 1em
    margin-bottom: 0.5em


@import "variables"

.build-list-item
  padding: 0.6em
  border-bottom: 1px dashed $border-color
  border-left: 0.3em solid #eee

  h4
    margin: 0.2em 0
    font-size: 1.2em

  .meta
    font-size: 0.8em
    color: $meta-font-color
    a
      color: $meta-font-color

    span:not(:first-child)
      margin-left: 1em

    .message
      margin-left: 1em
      display: block

  &.red
    background-color: #fdf7f7
    border-left-color: $red

  &.green
    background-color: #dff0d8
    border-left-color: $green

  &.orange
    background-color: #fcf8f2
    border-left-color: $orange

  &.gray
    background-color: #eeeeee
    border-left-color: #bbbbbb

Fix link color in build meta

@import "variables"

.build-list-item
  padding: 0.6em
  border-bottom: 1px dashed $border-color
  border-left: 0.3em solid #eee

  h4
    margin: 0.2em 0
    font-size: 1.2em

  .meta
    font-size: 0.8em
    color: $meta-font-color

    a, a:hover, a:active, a:visited
      color: $meta-font-color

    span:not(:first-child)
      margin-left: 1em

    .message
      margin-left: 1em
      display: block

  &.red
    background-color: #fdf7f7
    border-left-color: $red

  &.green
    background-color: #dff0d8
    border-left-color: $green

  &.orange
    background-color: #fcf8f2
    border-left-color: $orange

  &.gray
    background-color: #eeeeee
    border-left-color: #bbbbbb


tr
  &.ng-enter, &.ng-leave, &.ng-move
    transition: 0.5s linear all

  &.ng-enter, &.ng-move
    opacity: 0
    overflow: hidden

  &.ng-enter.ng-enter-active, &.ng-move.ng-move-active
    opacity: 1

  &.ng-leave
    opacity: 1
    overflow: hidden

    &.ng-leave-active
      opacity: 0
      padding-bottom: 0
      padding-top: 0

.view-frame
  &.ng-enter
    animation: 0.7s fade-in
    z-index: 100

@keyframes fade-in
  from
    opacity: 0
  to
    opacity: 1

@keyframes fade-out
  from
    opacity: 1
  to
    opacity: 0

.fadein
  transition: 2s linear all
  opacity: 1

  &.ng-hide-remove, &.ng-hide-add
    display: block !important

  &.ng-hide
    display: block !important
    opacity: 0

Add fade animation for ng-show: fix transition time

tr
  &.ng-enter, &.ng-leave, &.ng-move
    transition: 0.5s linear all

  &.ng-enter, &.ng-move
    opacity: 0
    overflow: hidden

  &.ng-enter.ng-enter-active, &.ng-move.ng-move-active
    opacity: 1

  &.ng-leave
    opacity: 1
    overflow: hidden

    &.ng-leave-active
      opacity: 0
      padding-bottom: 0
      padding-top: 0

.view-frame
  &.ng-enter
    animation: 0.7s fade-in
    z-index: 100

@keyframes fade-in
  from
    opacity: 0
  to
    opacity: 1

@keyframes fade-out
  from
    opacity: 1
  to
    opacity: 0

.fadein
  transition: 0.5s linear all
  opacity: 1

  &.ng-hide-remove, &.ng-hide-add
    display: block !important

  &.ng-hide
    display: block !important
    opacity: 0


=offline-keyframes($name)
    @-webkit-keyframes #{$name}
        @content
    @-moz-keyframes #{$name}
        @content
    @-ms-keyframes #{$name}
        @content
    @-o-keyframes #{$name}
        @content
    @keyframes #{$name}
        @content

=offline-animation($animation)
    -webkit-animation: $animation
    -moz-animation: $animation
    -ms-animation: $animation
    -o-animation: $animation
    animation: $animation
    -webkit-backface-visibility: hidden

=offline-transform($transform)
    transform: $transform
    -webkit-transform: $transform
    -moz-transform: $transform
    -ms-transform: $transform
    -o-transform: $transform

=offline-preserve-3d
    -webkit-transform-style: preserve-3d
    -moz-transform-style: preserve-3d
    transform-style: preserve-3d

Add animation fill mode mixin

=offline-keyframes($name)
    @-webkit-keyframes #{$name}
        @content
    @-moz-keyframes #{$name}
        @content
    @-ms-keyframes #{$name}
        @content
    @-o-keyframes #{$name}
        @content
    @keyframes #{$name}
        @content

=offline-animation($animation)
    -webkit-animation: $animation
    -moz-animation: $animation
    -ms-animation: $animation
    -o-animation: $animation
    animation: $animation
    -webkit-backface-visibility: hidden

=offline-animation-fill-mode($direction)
    -webkit-animation-fill-mode: $direction
    -moz-animation-fill-mode: $direction
    -ms-animation-fill-mode: $direction
    -o-animation-fill-mode: $direction
    animation-fill-mode: $direction

=offline-transform($transform)
    transform: $transform
    -webkit-transform: $transform
    -moz-transform: $transform
    -ms-transform: $transform
    -o-transform: $transform

=offline-preserve-3d
    -webkit-transform-style: preserve-3d
    -moz-transform-style: preserve-3d
    transform-style: preserve-3d


@import 'app_colors'

.pagination-footer
  align-items: center
  background-color: $app-color-white
  border-top: 1px solid $app-color-gray
  bottom: 0
  display: flex
  height: 50px
  padding: 5px 15px
  position: fixed
  width: 100%

  .pagination-controls
    position: fixed
    right: 15px

  .pagination
    display: block
    margin-top: 0

    > .disabled > span
      &:hover
        cursor: not-allowed

Apply cross-browser fix for pagination vertical alignment

@import 'app_colors'

.pagination-footer
  background-color: $app-color-white
  border-top: 1px solid $app-color-gray
  bottom: 0
  height: 50px
  padding: 12px 5px 15px 15px
  position: fixed
  width: 100%

  .pagination-controls
    position: fixed
    right: 15px

  .pagination
    display: block
    margin-top: 0

    > .disabled > span
      &:hover
        cursor: not-allowed


$selectionColor: #b4d5fe

@mixin textShadowToCropUnderline($color)
  text-shadow: 0 .03em $color, 0 -.03em $color, .03em 0 $color, -.03em 0 $color, .06em 0 $color, -.06em 0 $color, .09em 0 $color, -.09em 0 $color, .12em 0 $color, -.12em 0 $color, .15em 0 $color, -.15em 0 $color

@mixin linkUnderlines($backgroundColor, $color)
  color: $color
  text-decoration: none
  @include textShadowToCropUnderline($backgroundColor)
  background-image: linear-gradient($backgroundColor, $backgroundColor), linear-gradient($backgroundColor, $backgroundColor), linear-gradient($color, $color)
  background-size: .05em 1px, .05em 1px, 1px 1px
  background-repeat: no-repeat, no-repeat, repeat-x
  background-position: 0% 90%, 100% 90%, 0% 90%

  &::selection
    background: $selectionColor
    text-shadow: none

  &:before, &:after, *, *:before, *:after
    text-shadow: none

  &:visited
    color: $color

Add logic to kind of handle better comma underlines

$selectionColor: #b4d5fe

@mixin textShadowToCropUnderline($color, $fixCommas: false)
  @if $fixCommas
    $shadows: ()
  @else
    $shadows: 0 0.03em $color, 0 -0.03em $color

  @for $stop from 1 through 5
    $stop: 0.03em * $stop
    $shadows: append($shadows, $stop 0 $color, comma)
    $shadows: append($shadows, (-1 * $stop) 0 $color, comma)

    @if $fixCommas
      $shadows: append($shadows, $stop 0.03em $color, comma)
      $shadows: append($shadows, (-1 * $stop) 0.03em $color, comma)

  text-shadow: $shadows

@mixin linkUnderlines($backgroundColor, $color)
  color: $color
  text-decoration: none
  @include textShadowToCropUnderline($backgroundColor, false)
  background-image: linear-gradient($backgroundColor, $backgroundColor), linear-gradient($backgroundColor, $backgroundColor), linear-gradient($color, $color)
  background-size: .05em 1px, .05em 1px, 1px 1px
  background-repeat: no-repeat, no-repeat, repeat-x
  background-position: 0% 90%, 100% 90%, 0% 90%

  &::selection
    background: $selectionColor
    text-shadow: none

  &:before, &:after, *, *:before, *:after
    text-shadow: none

  &:visited
    color: $color


// Colors
$base:      #34495e
$firm:      #1abc9c

$gray:      #95a5a6
$lightgray: #ecf0f1
$inverse:   #fff

$success:   #2ecc71
$danger:    #e74c3c
$warning:   #f1c40f
$info:      #3498db

// Font
$base-font-family: 'Lato', sans-serif
$base-font-size:   14px

Use !default for config variables

// Colors
$base:      #34495e !default
$firm:      #1abc9c !default

$gray:      #95a5a6 !default
$lightgray: #ecf0f1 !default
$inverse:   #fff !default

$success:   #2ecc71 !default
$danger:    #e74c3c !default
$warning:   #f1c40f !default
$info:      #3498db !default

// Font
$base-font-family: 'Lato', sans-serif !default
$base-font-size:   14px !default


/**
 * THEME
 *
 * For basic sites this should simply contain colour variables. If a proper theme is to be applied this file should simply import the theme file for each component which should be contained within a theme folder e.g.
 *
 * @import theme/component
 * @import theme/component-two
 */

/* BRAND COLORS */

/* SEMANTIC COLORS */

Remove import comments as they break builds on the server

/**
 * THEME
 *
 * For basic sites this should simply contain colour variables. If a proper theme is to be applied this file should simply import the theme file for each component which should be contained within a theme folder.
 */

/* BRAND COLORS */

/* SEMANTIC COLORS */


// -----------------------------------------------------------------------------
// [doc]
//
// Responsive Images using CSS Backgrounds.
//
// Using this mixin requires three versions of the image to be available at
// 480,700 & 1600px widths.
//
// Using this mixin will also covering Retina & IE8 support.
//
// [/doc]
// -----------------------------------------------------------------------------

@mixin responsive-image($path: '', $extension: 'jpg')
  $sizes: "480", "700", "1600"

  @if $is-ie == false
    @each $size in $sizes
      $index: index($sizes, $size)

      // Default is the smallest
      @if $index == 1
        background-image: url("#{normalised_asset_path('#{$path}-#{nth($sizes, 1)}.#{$extension}', "")}")
        +retinafy()
          background-image: url("#{normalised_asset_path('#{$path}-#{nth($sizes, 2)}.#{$extension}', "")}")
      @else
        // Set the min-width to the width below the current image size
        @media only screen and (min-width: nth($sizes, $index - 1) + px)
          background-image: url("#{normalised_asset_path('#{$path}-#{nth($sizes, $index)}.jpg', "")}")

  @else
    // For IE7 & 8 we serve the 1024 version
    // This presumes a lot about screen size
    background-image: url("#{normalised_asset_path('#{$path}-#{nth($sizes, 3)}.jpg', "")}")

Change `asset_path` to `image_path` per discussion w/Ian F.

// -----------------------------------------------------------------------------
// [doc]
//
// Responsive Images using CSS Backgrounds.
//
// Using this mixin requires three versions of the image to be available at
// 480,700 & 1600px widths.
//
// Using this mixin will also covering Retina & IE8 support.
//
// [/doc]
// -----------------------------------------------------------------------------

@mixin responsive-image($path: '', $extension: 'jpg')
  $sizes: "480", "700", "1600"

  @if $is-ie == false
    @each $size in $sizes
      $index: index($sizes, $size)

      // Default is the smallest
      @if $index == 1
        background-image: url("#{image_path('#{$path}-#{nth($sizes, 1)}.#{$extension}')}")
        +retinafy()
          background-image: url("#{image_path('#{$path}-#{nth($sizes, 2)}.#{$extension}')}")
      @else
        // Set the min-width to the width below the current image size
        @media only screen and (min-width: nth($sizes, $index - 1) + px)
          background-image: url("#{image_path('#{$path}-#{nth($sizes, $index)}.jpg')}")

  @else
    // For IE7 & 8 we serve the 1024 version
    // This presumes a lot about screen size
    background-image: url("#{image_path('#{$path}-#{nth($sizes, 3)}.jpg')}")


@import ../../styles/lib

.DeleteAccountDialog
  position: relative
  max-width: rem(480)
  text-align: center

.DeleteAccountDialog h2
  margin-bottom: rem(10)
  font-size: rem(18)
  height: rem(30)
  line-height: rem(30)
  white-space: nowrap

.DeleteAccountDialog p
  position: absolute
  margin-top: rem(40)
  text-align: left

.DeleteAccountDialogButton
  +sans-typeset
  transition: background-color $speed ease, border-color $speed ease, color $speed ease, opacity $speed ease
  display: inline-block
  vertical-align: middle
  width: rem(60)
  height: rem(30)
  border-radius: rem(15)
  text-align: center
  line-height: rem(30)
  white-space: nowrap
  background-color: white
  border: 1px solid white
  color: black

.DeleteAccountDialogButton.isActive,
.no-touch .DeleteAccountDialogButton:hover
  background-color: black
  border-color: black
  color: white

.DeleteAccountDialogButton + .DeleteAccountDialogButton
  margin-left: rem(5)

@media(min-width: #{$break-2})
  .DeleteAccountDialog
    text-align: left
  .DeleteAccountDialog h2
    display: inline-block
    vertical-align: middle
    margin-right: rem(20)
    margin-bottom: 0
    font-size: rem(24)

Remove styling for a nonexistent button

@import ../../styles/lib

.DeleteAccountDialog
  position: relative
  max-width: rem(480)
  text-align: center

.DeleteAccountDialog h2
  margin-bottom: rem(10)
  font-size: rem(18)
  height: rem(30)
  line-height: rem(30)
  white-space: nowrap

.DeleteAccountDialog p
  position: absolute
  margin-top: rem(40)
  text-align: left

@media(min-width: #{$break-2})
  .DeleteAccountDialog
    text-align: left
  .DeleteAccountDialog h2
    display: inline-block
    vertical-align: middle
    margin-right: rem(20)
    margin-bottom: 0
    font-size: rem(24)


@import 'app_colors'
@import 'patternfly/color-variables'

.vm-details-wrapper
  padding: 0 20px

.vm-details-table
  border: 1px solid $color-light-gray-approx
  margin: 9px auto
  width: 87%

  tr
    &:nth-child(odd)
      background-color: $color-white-smoke

    td
      &:first-child
        width: 40%

  td,
  th
    border: 1px solid $color-light-gray-approx
    padding: 4px

  .fa-lg
    margin-right: 4px

  .pficon-service
    margin-right: 9px

.vm-details-container
  border: 1px solid $color-light-gray-approx
  margin: 10px 0

  .title
    background-color: $color-white-smoke
    border-bottom: 1px solid $color-light-gray-approx
    font-weight: bold
    padding: 4px

Update vm-details sass so the last box isnt smushed on the bottom :P

@import 'app_colors'
@import 'patternfly/color-variables'

.vm-details-wrapper
  padding: 0 20px

.vm-details-table
  border: 1px solid $color-light-gray-approx
  margin: 9px auto
  width: 87%

  tr
    &:nth-child(odd)
      background-color: $color-white-smoke

    td
      &:first-child
        width: 40%

  td,
  th
    border: 1px solid $color-light-gray-approx
    padding: 4px

  .fa-lg
    margin-right: 4px

  .pficon-service
    margin-right: 9px

.vm-details-container

  &:last-child
    margin-bottom: 80px

  border: 1px solid $color-light-gray-approx
  margin: 10px 0

  .title
    background-color: $color-white-smoke
    border-bottom: 1px solid $color-light-gray-approx
    font-weight: bold
    padding: 4px