header.hero
  padding: +emCalc(60px) 0
  min-height: +emCalc(330px)
  color: white
  text-shadow: 3px 3px 5px rgba(0,0,0,0.5)
  &, .backstretch
    background: darken($secondary-color, 30%) image-url('default-bg-hero.jpg') repeat
  &.small
    min-height: +emCalc(200px)
  &.center
    text-align: center
  h2, h3, h4, h5
    color: white
  h2
    font-weight: bold
  h3
    text-transform: uppercase
    font-weight: 300
    padding-top: +emCalc(8px)
  .button, input, .tooltip-content
    text-shadow: none

Fix issue with custom tooltip and the hero

header.hero
  z-index: 1 !important
  padding: +emCalc(60px) 0
  min-height: +emCalc(330px)
  color: white
  text-shadow: 3px 3px 5px rgba(0,0,0,0.5)
  &, .backstretch
    background: darken($secondary-color, 30%) image-url('default-bg-hero.jpg') repeat
  &.small
    min-height: +emCalc(200px)
  &.center
    text-align: center
  h2, h3, h4, h5
    color: white
  h2
    font-weight: bold
  h3
    text-transform: uppercase
    font-weight: 300
    padding-top: +emCalc(8px)
  .button, input, .tooltip-content
    text-shadow: none


@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes zoomIn
  from
    opacity: 0.5
    transform: scale3d(1.2, 1.2, 1.2);
  to
    opacity: 1

@keyframes zoomOut
  from
    opacity: 0.5
    transform: scale3d(0.99, 0.99, 0.99);
  to
    opacity: 1

@keyframes zoomAway
  from
    opacity: 1
  to
    opacity: 0

@keyframes pulse
  0%
    opacity: 0.5
  50%
    opacity: 1
  100%
    opacity: 0.5

.animate-fade-in
  opacity: 0
  animation: fadeIn 0.3s ease-in-out 0.1s

.animate-fade-in-complete
  opacity: 1

.animate-zoom-away
  animation: zoomAway 0.2s ease-out

Fix flash bug with zoom out animation.

@keyframes fadeIn
  from
    opacity: 0
  to
    opacity: 1

@keyframes zoomIn
  from
    opacity: 0.5
    transform: scale3d(1.2, 1.2, 1.2);
  to
    opacity: 1

@keyframes zoomOut
  from
    opacity: 0.5
    transform: scale3d(0.99, 0.99, 0.99);
  to
    opacity: 1

@keyframes zoomAway
  from
    opacity: 1
  to
    opacity: 0

@keyframes pulse
  0%
    opacity: 0.5
  50%
    opacity: 1
  100%
    opacity: 0.5

.animate-fade-in
  opacity: 0
  animation: fadeIn 0.3s ease-in-out 0.1s

.animate-fade-in-complete
  opacity: 1

.animate-zoom-away
  animation: zoomAway 0.2s ease-out
  animation-fill-mode: forwards


@import 'reimagine2/mixins/all_caps'
@import 'reimagine2/mixins/bold'

// in our foundation build we set margin-left on lists
// (see $list-side-margin)
// We usually won't want that margin if we are not
// showing a bulleted list
ul.no-bullet
  margin-left: 0

  &.inline-list
    margin-#{$default-float}: $inline-list-default-float-margin

// do not change font-size line-height etc.
strong, b, .bold
  +bold

h1
  font-size: $h2-font-size
h2
  font-size: $h3-font-size
h3
  font-size: $h4-font-size
h4
  font-size: $h4-font-size
h5
  font-size: $h4-font-size
h6
  font-size: $h6-font-size

@media #{$small}
  h1
    font-size: $h1-font-size
  h2
    font-size: $h2-font-size
  h3
    font-size: $h3-font-size
  h4
    font-size: $h4-font-size
  h5
    font-size: $h5-font-size
  h6
    font-size: $h6-font-size

h1, h2, h3, h4, h5, h6
  line-height: $header-line-height

h4
  letter-spacing: 1px
  text-transform: uppercase

Remove top margin from all headers

@import 'reimagine2/mixins/all_caps'
@import 'reimagine2/mixins/bold'

// in our foundation build we set margin-left on lists
// (see $list-side-margin)
// We usually won't want that margin if we are not
// showing a bulleted list
ul.no-bullet
  margin-left: 0

  &.inline-list
    margin-#{$default-float}: $inline-list-default-float-margin

// do not change font-size line-height etc.
strong, b, .bold
  +bold

h1
  font-size: $h2-font-size
h2
  font-size: $h3-font-size
h3
  font-size: $h4-font-size
h4
  font-size: $h4-font-size
h5
  font-size: $h4-font-size
h6
  font-size: $h6-font-size

@media #{$small}
  h1
    font-size: $h1-font-size
  h2
    font-size: $h2-font-size
  h3
    font-size: $h3-font-size
  h4
    font-size: $h4-font-size
  h5
    font-size: $h5-font-size
  h6
    font-size: $h6-font-size

h1, h2, h3, h4, h5, h6
  line-height: $header-line-height
  margin-top: 0

h4
  letter-spacing: 1px
  text-transform: uppercase


@import 'rui/colors'
@import "addons/font-family"

$arial: Arial, sans-serif

#redmine-dashboard
  color: $text-color
  font-size: 14px
  font-family: $arial

  // font-size: 16px
  // line-height: normal

  h1, h2, h3, h4, h5
    font-family: $arial
    letter-spacing: 0

  h2
    font-size: 20px
    font-weight: normal

  h3
    font-size: 14px
    // text-transform: uppercase
    font-weight: bold
    color: $primary-gray

  button, select, input, textarea
    font-size: 14px
    font-family: $arial

Add font color for headings

@import 'rui/colors'
@import "addons/font-family"

$arial: Arial, sans-serif

#redmine-dashboard
  color: $text-color
  font-size: 14px
  font-family: $arial

  // font-size: 16px
  // line-height: normal

  h1, h2, h3, h4, h5
    color: $text-color
    font-family: $arial
    letter-spacing: 0

  h2
    font-size: 20px
    font-weight: normal

  h3
    font-size: 14px
    // text-transform: uppercase
    font-weight: bold
    color: $primary-gray

  button, select, input, textarea
    font-size: 14px
    font-family: $arial


$blueprint-grid-columns: 24
$blueprint-grid-width: 30px
$blueprint-grid-margin: 10px

// Color definition
$dark_blue: #507aaa
$light_blue: #759fcf
$white: white
$gray: #555555
$link_color: $dark_blue
$link_color_hover: $light_blue
$bg_dark_blue: #aeb9cf
$red: red

// Font family definitions
=serif-font
  font-family: Times, "Times New Roman", Georgia, serif

=sanserif-font
  font-family: Verdana, Arial, Helvetica, sans-serif

// Font size definitions
$h1_size: 25px
$h2_size: 20px
$h3_size: 16px
$text_size: 14px

// Column widths
$column_header: $blueprint-grid-columns
$column_sidebar: 3
$column_content: $blueprint-grid-columns - $column_sidebar
$column_small_form: 7
$column_big_form: 10

// Content
$content_padding: 1em

// Borders
$border_radius: 5px

Use Georgia and Helvetica as default fonts.

$blueprint-grid-columns: 24
$blueprint-grid-width: 30px
$blueprint-grid-margin: 10px

// Color definition
$dark_blue: #507aaa
$light_blue: #759fcf
$white: white
$gray: #555555
$link_color: $dark_blue
$link_color_hover: $light_blue
$bg_dark_blue: #aeb9cf
$red: red

// Font family definitions
=serif-font
  font-family: Georgia, Times, "Times New Roman", serif

=sanserif-font
  font-family: Helvetica, Verdana, Arial, sans-serif

// Font size definitions
$h1_size: 25px
$h2_size: 20px
$h3_size: 16px
$text_size: 14px

// Column widths
$column_header: $blueprint-grid-columns
$column_sidebar: 3
$column_content: $blueprint-grid-columns - $column_sidebar
$column_small_form: 7
$column_big_form: 10

// Content
$content_padding: 1em

// Borders
$border_radius: 5px


.l-page-title
  margin-top: 15px
  text-align: center

  .l-page-title-link
    @include link-colors($secondary-color)

.article-container
  margin-top: 90px

  .pictures.pictures-container
    background-color: $secondary-color
    margin-bottom: 25px

.post-article
  position: relative
  margin: 1.5rem 0 3rem 0
  &-title
    margin-bottom: 1rem
    color: $primary-color

  footer
    border: 1px solid $primary-color
    padding: 1rem

    .inline-list
      margin-bottom: 0

.pictures-container
  margin-bottom: 1rem
  img
    width: 100%

// Pagination
ul.pagination
  transition: color .3s ease-in

ul.pagination li:hover a,
ul.pagination li a:focus,
ul.pagination li:hover button,
ul.pagination li button:focus
  color: $white

// Blogs
.last-blogs
  &-title
    font-size: $h4-font-size
  &-article-title
    font-size: $h6-font-size

// Homepage article
.homepage-content
  margin-top: 100px
  text-align: center

  .article-title
    font-size: 3rem
    margin-bottom: 2rem
    border-bottom: 1px solid $white

  .post-body, .article-title
    color: $white

Improve border-bottom rendering using after pseudo-selector

.l-page-title
  margin-top: 15px
  text-align: center

  .l-page-title-link
    @include link-colors($secondary-color)

.article-container
  margin-top: 90px

  .pictures.pictures-container
    background-color: $secondary-color
    margin-bottom: 25px

.post-article
  position: relative
  margin: 1.5rem 0 3rem 0
  &-title
    margin-bottom: 1rem
    color: $primary-color

  footer
    border: 1px solid $primary-color
    padding: 1rem

    .inline-list
      margin-bottom: 0

.pictures-container
  margin-bottom: 1rem
  img
    width: 100%

// Pagination
ul.pagination
  transition: color .3s ease-in

ul.pagination li:hover a,
ul.pagination li a:focus,
ul.pagination li:hover button,
ul.pagination li button:focus
  color: $white

// Blogs
.last-blogs
  &-title
    font-size: $h4-font-size
  &-article-title
    font-size: $h6-font-size

// Homepage article
.homepage-content
  margin-top: 100px
  text-align: center

  .article-title
    font-size: 3rem
    margin-bottom: 2rem

    &:after
      content: ''
      display: block
      margin: 0 auto
      width: 50%
      border-bottom: 1px solid $white

  .post-body, .article-title
    color: $white


#title
  padding:
    top: 20px
    bottom: 15px

  max-width: 1070px

  h2
    color: #000
    font-size: 21px
    font-weight: bold
    float: left
    line-height: 21px
    margin: 3px 30px 0 0
    text-align: left

  a:first-child
    margin-left: 40px

  .help
    float: right

    a
      align-items: center
      background: #f0f0f0
      border-radius: 3px
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05)
      color: #555
      display: inline-flex
      font-size: 14px
      font-weight: 500
      margin: -2px 0 0 25px
      padding: 5px 9px 5px 7px
      text-transform: none
      transition: color 0.1s ease, background-color 0.1s ease
      &:hover
        background: #ddd
        color: #333
        text-decoration: none
      &:active
        background: #ccc

      svg
        margin-right: 0.125rem

Use standard gray in the "add chart" button

#title
  padding:
    top: 20px
    bottom: 15px

  max-width: 1070px

  h2
    color: #000
    font-size: 21px
    font-weight: bold
    float: left
    line-height: 21px
    margin: 3px 30px 0 0
    text-align: left

  a:first-child
    margin-left: 40px

  .help
    float: right

    a
      align-items: center
      background: #eee
      border-radius: 3px
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07)
      color: #555
      display: inline-flex
      font-size: 14px
      font-weight: 500
      margin: -2px 0 0 25px
      padding: 5px 9px 5px 7px
      text-transform: none
      transition: color 0.1s ease, background-color 0.1s ease
      &:hover
        background: #ddd
        color: #333
        text-decoration: none
      &:active
        background: #ccc

      svg
        margin-right: 0.125rem


form fieldset > ol > li
  p.inline-hints
    font-size: 1.3em
    color: #007637

Improve style for boolean input and hints message

p.inline-hints
  font-size: 1.3em !important
  color: #007637 !important

li.boolean label input
  margin: 0 0.5em 0 0.2em !important

form fieldset.inputs ol > li.boolean label
  width: 98%
  padding-left: 2%

form fieldset > ol > li.boolean
  label
    margin-bottom: 5px !important

  p.inline-hints
    padding-left: 2% !important
    margin-left: 0 !important


@import "compass/typography/lists/bullets"
@import "compass/typography/lists/horizontal-list"
@import "compass/css3/border-radius"

=overview-icon-48($ident, $icon: $ident)
  ul.overview-list li
    &#overview-#{$ident}, &.#{$ident}
      +icon($icon, 48)

ul.overview-list.level-1
  +no-bullets
  +horizontal-list
  li // All items
    a
      border-bottom: 1px solid black
      display: block
    &#overview-overview
      display: none
  >li
    // Top level
    background: no-repeat 0.4em 0.8em
    // Fix horizontal-list to not drop padding in first and last item
    &, .first, &:first-child, .last, &:last-child
      padding-left: 60px
      padding-right: 40px
    min-height: 58px
    +border-radius($border_radius)
    background-color: #f6f6f6
    border: 1px solid #e4e4e4
    color: #505050
    margin: 1em
    padding-top: 0.8em
    padding-bottom: 0.8em
    width: 20%
  ul // Level > 1
    margin-top: 5px
    li
      display: block
      float: none
      padding-left: 0px
      width: inherit
      min-height: 1em
      a
        border-bottom: none

Fix SASS Nesting / Comment Syntax Issue


.blog-container
  padding-top: 10px
  margin: 30px
  .blog-unit
    margin-bottom: 20px
    h1
      margin-bottom: 5px
      padding: 0px
      font:
        size: 30px
        weight: 700
      a
        color: black
      &:hover a
        color: $accent-color
    .blog-date
      font:
        size: 14px
        weight: 700

Fix blog issue with hovering and link color change

.blog-container
  padding-top: 10px
  margin: 30px
  .blog-unit
    h1
      display: inline-block
      margin-bottom: 5px
      padding: 0px
      font:
        size: 30px
        weight: 700
      a
        color: black
      &:hover a
        color: $accent-color
    .blog-date
      display: block
      font:
        size: 14px
        weight: 700


#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

Add font-weight: normal for AA action_items

#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
  font-weight: normal


body
  margin: 0
  background-color: black
  font-family: $text
header
  background-image: url($STATIC_URL + "images/debian_radio.jpg")
  background-repeat: no-repeat
  background-size: 90%
  background-position: center 60%
  +outer-container()
  +media(max-width 769px)
    background-size: 100%
  div#logo
    margin: 3% 0
    +span-columns(1.5)
    +shift(5.25)
    +media(max-width 769px)
      +span-columns(4)
      +shift(4)
    +media(max-width 480px)
      +span-columns(6)
      +shift(3)

div#wrap
  background: tint(black, 95%)
  min-height: 75vh
  padding: 3rem 3%
  +outer-container
  main
    +span-columns(8)
  aside
    //+span-columns(4)
    background: tint(black, 80%)

Remove background of the aside


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

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

.row__inner--secondary
  min-height: 32px

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

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

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

Increase max-width of title and hopefully prevent future text breakouts

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

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

.row__inner--secondary
  min-height: 32px

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

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

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


// Core variables and mixins
@import "bootstrap/variables"
@import "bootstrap/mixins"

// Reset and dependencies
@import "bootstrap/normalize"
@import "bootstrap/print"
@import "bootstrap/glyphicons"

// Core CSS
//@import "bootstrap/scaffolding"
@import "bootstrap/type"
@import "bootstrap/code"
@import "bootstrap/grid"
@import "bootstrap/tables"
@import "bootstrap/forms"
@import "bootstrap/buttons"

// Components
@import "bootstrap/component-animations"
@import "bootstrap/dropdowns"
@import "bootstrap/button-groups"
@import "bootstrap/input-groups"
@import "bootstrap/navs"
@import "bootstrap/navbar"
@import "bootstrap/breadcrumbs"
@import "bootstrap/pagination"
@import "bootstrap/pager"
@import "bootstrap/labels"
@import "bootstrap/badges"
@import "bootstrap/jumbotron"
@import "bootstrap/thumbnails"
@import "bootstrap/alerts"
@import "bootstrap/progress-bars"
@import "bootstrap/media"
@import "bootstrap/list-group"
@import "bootstrap/panels"
@import "bootstrap/responsive-embed"
@import "bootstrap/wells"
@import "bootstrap/close"

// Components w/ JavaScript
@import "bootstrap/modals"
@import "bootstrap/tooltip"
@import "bootstrap/popovers"
@import "bootstrap/carousel"

// Utility classes
@import "bootstrap/utilities"
@import "bootstrap/responsive-utilities"

Include bootstrap scaffolding for sr-only and other helpers

// Core variables and mixins
@import "bootstrap/variables"
@import "bootstrap/mixins"

// Reset and dependencies
@import "bootstrap/normalize"
@import "bootstrap/print"
@import "bootstrap/glyphicons"

// Core CSS
@import "bootstrap/scaffolding"
@import "bootstrap/type"
@import "bootstrap/code"
@import "bootstrap/grid"
@import "bootstrap/tables"
@import "bootstrap/forms"
@import "bootstrap/buttons"

// Components
@import "bootstrap/component-animations"
@import "bootstrap/dropdowns"
@import "bootstrap/button-groups"
@import "bootstrap/input-groups"
@import "bootstrap/navs"
@import "bootstrap/navbar"
@import "bootstrap/breadcrumbs"
@import "bootstrap/pagination"
@import "bootstrap/pager"
@import "bootstrap/labels"
@import "bootstrap/badges"
@import "bootstrap/jumbotron"
@import "bootstrap/thumbnails"
@import "bootstrap/alerts"
@import "bootstrap/progress-bars"
@import "bootstrap/media"
@import "bootstrap/list-group"
@import "bootstrap/panels"
@import "bootstrap/responsive-embed"
@import "bootstrap/wells"
@import "bootstrap/close"

// Components w/ JavaScript
@import "bootstrap/modals"
@import "bootstrap/tooltip"
@import "bootstrap/popovers"
@import "bootstrap/carousel"

// Utility classes
@import "bootstrap/utilities"
@import "bootstrap/responsive-utilities"


.alert
	+background( color( main ) )
	:color color( neutral )
	:padding spacing( 2 ) 0 spacing( 2 ) 2.5rem + spacing( 2 )
	:margin-bottom spacing( 2 )

	+pseudo( after )
		+position( absolute, $top: spacing( 2 ), $left: 0 )
		:color color( neutral )
		:content '\f0a1'
		:font-family font( icon )
		:font-size 2.5rem
		:line-height 1

Add min-height to alerts to prevent the icon from getting cut

.alert
	+background( color( main ) )
	:color color( neutral )
	:padding spacing( 2 ) 0 spacing( 2 ) 2.5rem + spacing( 2 )
	:margin-bottom spacing( 2 )
	:min-height 2.5rem + spacing( 4 )

	+pseudo( after )
		+position( absolute, $top: spacing( 2 ), $left: 0 )
		:color color( neutral )
		:content '\f0a1'
		:font-family font( icon )
		:font-size 2.5rem
		:line-height 1


//- 💫 CSS > BASE > GRID

//- Grid container

.o-grid
    display: flex
    flex-wrap: wrap

    @include breakpoint(min, sm)
        flex-direction: row
        align-items: stretch
        justify-content: space-between

//- Grid column

.o-grid__col
    $grid-gutter: 2rem

    margin-top: $grid-gutter
    overflow: hidden

    @include breakpoint(min, lg)
        display: flex
        flex: 0 0 100%
        flex-direction: column
        flex-wrap: wrap

        @each $mode, $count in $grid
            &.o-grid__col--#{$mode}
                $percentage: calc(#{100% / $count} - #{$grid-gutter})
                flex: 0 0 $percentage
                max-width: $percentage

    @include breakpoint(max, md)
        flex: 0 0 100%
        flex-flow: column wrap

    // Fix overflow issue in old browsers

    & > *
        flex-shrink: 1
        max-width: 100%

Add grid style to center content horizontally and vertically

//- 💫 CSS > BASE > GRID

//- Grid container

.o-grid
    display: flex
    flex-wrap: wrap

    @include breakpoint(min, sm)
        flex-direction: row
        align-items: stretch
        justify-content: space-between

    &.o-grid--center
        align-items: center
        justify-content: center

//- Grid column

.o-grid__col
    $grid-gutter: 2rem

    margin-top: $grid-gutter
    overflow: hidden

    @include breakpoint(min, lg)
        display: flex
        flex: 0 0 100%
        flex-direction: column
        flex-wrap: wrap

        @each $mode, $count in $grid
            &.o-grid__col--#{$mode}
                $percentage: calc(#{100% / $count} - #{$grid-gutter})
                flex: 0 0 $percentage
                max-width: $percentage

    @include breakpoint(max, md)
        flex: 0 0 100%
        flex-flow: column wrap

    // Fix overflow issue in old browsers

    & > *
        flex-shrink: 1
        max-width: 100%


@import '../styles'

@import top-bar
@import mist
@import member-info
@import map
@import contact
@import footer

#content-main
  display: none
  overflow: hidden

  &.visible
    display: block

.headline
  font-size: 4.5rem
  letter-spacing: .1vw

  display: block
  width: 100vw
  margin: 0

  position: fixed
  left: 0
  top: 50vh
  z-index: 1
  transform: translateY(-50%)

  @media (orientation: portrait) and (max-width: 420px)
    font-size: 6rem
    text-align: left
    width: auto
    left: 50vw
    transform: translate(-50%, -50%)

    &.center
      text-align: left

  opacity: 0
  transition: 1.5s opacity

  &.visible
    opacity: 1

  // All subsequent elements should be on top. This can be overridden if needed
  & ~ *
    position: relative
    z-index: 2

Move contact form back above footer

@import '../styles'

@import top-bar
@import mist
@import member-info
@import map
@import contact
@import footer

#content-main
  display: none
  overflow: hidden

  &.visible
    display: block

.headline
  font-size: 4.5rem
  letter-spacing: .1vw

  display: block
  width: 100vw
  margin: 0

  position: fixed
  left: 0
  top: 50vh
  z-index: 1
  transform: translateY(-50%)

  @media (orientation: portrait) and (max-width: 420px)
    font-size: 6rem
    text-align: left
    width: auto
    left: 50vw
    transform: translate(-50%, -50%)

    &.center
      text-align: left

  opacity: 0
  transition: 1.5s opacity

  &.visible
    opacity: 1

  // All subsequent elements should be on top. This can be overridden if needed
  & ~ *
    position: relative
    z-index: 2

  & ~ .contact
    z-index: 3


{{ $fonts    := .Site.Params.fonts }}
{{ $fontSlice := (slice) }}
{{ range $fonts }}
{{ $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }}
{{ end }}
{{ $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
{{ $sansSerifFont := .Site.Params.sansSerifFont }}
{{ $fontAwesomeVersion := .Site.Params.fontAwesomeVersion }}
{{ $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}

@charset "utf-8"
@import url({{ $fontsUrl }})
@import url({{ $fontAwesomeUrl }})

@import "bulma/sass/utilities/initial-variables"
@import "bulma/sass/utilities/functions"

@import "variables"

@import "bulma/sass/utilities/derived-variables"
@import "bulma/bulma"

@import "helpers"
@import "page"
@import "sidebar"
@import "main"
@import "navbar"
@import "calendar"

Add smooth scrolling for mobile

{{ $fonts    := .Site.Params.fonts }}
{{ $fontSlice := (slice) }}
{{ range $fonts }}
{{ $fontSlice = $fontSlice | append (printf "%s:%s" (replace .name " " "+") (delimit .sizes ",")) }}
{{ end }}
{{ $fontsUrl := printf "https://fonts.googleapis.com/css?family=%s" (delimit $fontSlice "|") }}
{{ $sansSerifFont := .Site.Params.sansSerifFont }}
{{ $fontAwesomeVersion := .Site.Params.fontAwesomeVersion }}
{{ $fontAwesomeUrl     := printf "https://use.fontawesome.com/releases/v%s/css/all.css" $fontAwesomeVersion }}

@charset "utf-8"
@import url({{ $fontsUrl }})
@import url({{ $fontAwesomeUrl }})

@import "bulma/sass/utilities/initial-variables"
@import "bulma/sass/utilities/functions"

@import "variables"

@import "bulma/sass/utilities/derived-variables"
@import "bulma/bulma"

@import "helpers"
@import "page"
@import "sidebar"
@import "main"
@import "navbar"
@import "calendar"

html
  -webkit-overflow-scrolling: touch
  height: 100%


@import compass/css3
@import mixins
@import url("http://fonts.googleapis.com/css?family=Arimo")

$themeName: "odometer-theme-plaza"
$digitPadding: .03em

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    +border-radius(.15em)
    +background-image(radial-gradient(#e4f2ff 15%, rgba(0, 0, 0, 0) 16%) 0 0, radial-gradient(#e4f2ff 15%, rgba(0, 0, 0, 0) 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, rgba(0, 0, 0, 0) 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, rgba(0, 0, 0, 0) 20%) 8px 9px)
    background-color: #f0f8ff
    font-family: "Helvetica Neue", sans-serif
    font-weight: 100
    padding: 0 .12em
    line-height: 1.2em
    font-size: 1.2em
    background-size: 16px 16px

    .odometer-digit
        +border-radius(.1em)
        padding: 0 $digitPadding
        color: #648baf

        .odometer-digit-inner
            left: $digitPadding

Remove unused-rendered gradient from plaza theme

@import compass/css3
@import mixins
@import url("http://fonts.googleapis.com/css?family=Arimo")

$themeName: "odometer-theme-plaza"
$digitPadding: .03em

+spinning-odometer($themeName)

.odometer.odometer-auto-theme, .odometer#{"." + $themeName}
    +border-radius(.15em)
    background-color: #f0f8ff
    font-family: "Helvetica Neue", sans-serif
    font-weight: 100
    padding: 0 .12em
    line-height: 1.2em
    font-size: 1.2em
    background-size: 16px 16px

    .odometer-digit
        +border-radius(.1em)
        padding: 0 $digitPadding
        color: #648baf

        .odometer-digit-inner
            left: $digitPadding


body
  font-family: arial

.-js-rt-table
  border: 1px solid #ccc
  width: 100%
  margin: 0
  padding: 0
  border-collapse: collapse
  border-spacing: 0

.-js-rt-row
  border: 1px solid #ddd
  padding: 5px

.-js-rt-headerCell, .-js-rt-cell
  padding: 10px
  text-align: center

.-js-rt-headerCell
  text-transform: uppercase
  font-size: 14px
  letter-spacing: 1px

@media screen and (max-width: 600px)

  .-js-rt-table
    border: 0

  .-js-rt-tableHeader
    display: none

  .-js-rt-row
    margin-bottom: 10px
    display: block
    border-bottom: 2px solid #ddd

  .-js-rt-cell
    display: block
    text-align: right
    font-size: 13px
    border-bottom: 1px dotted #ccc

  .-js-rt-cell:last-child
    border-bottom: 0

  .-js-rt-cell:before
    content: attr(data-label)
    float: left
    text-transform: uppercase
    font-weight: bold

Add onHover effect for non-{header,footer} rows

body
  font-family: arial

.-js-rt-container
  display: block

.-js-rt-table
  border: 1px solid #ccc
  width: 100%
  margin: 0
  padding: 0
  border-collapse: collapse
  border-spacing: 0

.-js-rt-tableBody>.-js-rt-row
  border: 1px solid #ddd
  padding: 5px
  &:hover
    background-color: #e0e0e0

.-js-rt-headerCell, .-js-rt-cell
  padding: 10px
  text-align: center

.-js-rt-headerCell
  text-transform: uppercase
  font-size: 14px
  letter-spacing: 1px

@media screen and (max-width: 600px)

  .-js-rt-table
    border: 0

  .-js-rt-tableHeader
    display: none

  .-js-rt-row
    margin-bottom: 10px
    display: block
    border-bottom: 2px solid #ddd

  .-js-rt-cell
    display: block
    text-align: right
    font-size: 13px
    border-bottom: 1px dotted #ccc

  .-js-rt-cell:last-child
    border-bottom: 0

  .-js-rt-cell:before
    content: attr(data-label)
    float: left
    text-transform: uppercase
    font-weight: bold


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

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

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

.deck-container
  visibility: hidden

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

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

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

  .md-preloader svg circle
    +loader-color

Add Roboto and Open Sans to loader font family.

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

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

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

.deck-container
  visibility: hidden

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

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

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

  .md-preloader svg circle
    +loader-color


.post
    margin-top: 125px

    > .title
        text-align: center
        margin-bottom: 3rem

    > .date,
    > .post-tags
        color: $gama
        font-weight: 300
        font-size: 1.4rem
        text-transform: uppercase
        text-align: center
        display: block
        margin-bottom: 6rem
        letter-spacing: 1px
        -webkit-font-smoothing: antialiased
        text-rendering: optimizeLegibility

    > .date
        margin-bottom: 2rem

    > .post-tags > .item
        padding: 2px 8px
        border-radius: 3px
        font-size: 1.1rem
        background: $epsilon
        color: $alpha
        letter-spacing: 1px
        margin: 3px 1px
        text-decoration: none
        display: inline-block

    // general style
    > h2,
    > h3,
    > h4
        margin-top: 40px

        a
            text-decoration: none

    > .title-image
        max-height: 120px
        display: block
        margin: 0 auto

    > .blog-navigation
        font-size: 1.4rem
        display: block
        width: auto
        overflow: hidden
        a
            display: block
            width: 50%
            float: left
            margin: 1em 0
        .next
            text-align: right

Increase height for header image

.post
    margin-top: 125px

    > .title
        text-align: center
        margin-bottom: 3rem

    > .date,
    > .post-tags
        color: $gama
        font-weight: 300
        font-size: 1.4rem
        text-transform: uppercase
        text-align: center
        display: block
        margin-bottom: 6rem
        letter-spacing: 1px
        -webkit-font-smoothing: antialiased
        text-rendering: optimizeLegibility

    > .date
        margin-bottom: 2rem

    > .post-tags > .item
        padding: 2px 8px
        border-radius: 3px
        font-size: 1.1rem
        background: $epsilon
        color: $alpha
        letter-spacing: 1px
        margin: 3px 1px
        text-decoration: none
        display: inline-block

    // general style
    > h2,
    > h3,
    > h4
        margin-top: 40px

        a
            text-decoration: none

    > .title-image
        max-height: 240px
        display: block
        margin: 0 auto

    > .blog-navigation
        font-size: 1.4rem
        display: block
        width: auto
        overflow: hidden
        a
            display: block
            width: 50%
            float: left
            margin: 1em 0
        .next
            text-align: right


.DT-vertical-grid,
.DT-horizontal-grid
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: transparent 0 0 repeat
  z-index: $z-grid
  opacity: 0.15
  pointer-events: none

.DT-vertical-grid
  background-image: url("/images/devtools/grid-vertical.svg")
.DT-horizontal-grid
  background-image: url("/images/devtools/grid-horizontal.svg")

Fix bathing for dev tools

.DT-vertical-grid,
.DT-horizontal-grid
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background: transparent 0 0 repeat
  z-index: $z-grid
  opacity: 0.15
  pointer-events: none

.DT-vertical-grid
  background-image: url("/static/images/devtools/grid-vertical.svg")
.DT-horizontal-grid
  background-image: url("/static/images/devtools/grid-horizontal.svg")


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

.cart
  @include user-select(none)
  .cart-span, .cart-span a
    display: inline-block
  .cart-span
    float: left
  .joyride-tip-guide
    display: block
    right: 10px
    top: 55px
    width: 480px
    @media screen and (max-width: 640px)
      width: 96%

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

    ul, li
      list-style: none
      margin-left: 0

    li
      float: none

      .row .columns
        padding-left: 0.25rem
        padding-right: 0.25rem

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

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

#edit-cart
  button, .button
    margin: 0

Add styling for image thumbnail - hide for small, show small thumbnail for big screens.

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

.cart
  @include user-select(none)
  .cart-span, .cart-span a
    display: inline-block
  .cart-span
    float: left
  .joyride-tip-guide
    display: block
    right: 10px
    top: 55px
    width: 480px
    @media screen and (max-width: 640px)
      width: 96%

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

    ul, li
      list-style: none
      margin-left: 0

    li
      float: none

      .row .columns
        padding-left: 0.25rem
        padding-right: 0.25rem

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

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

.item-thumb-image
  display: none
  @media screen and (min-width: 640px)
    display: inline-block
    float: left
    padding-right: 0.5em
    width: 36px
    height: 36px

#edit-cart
  button, .button
    margin: 0


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

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

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

Correct typo in import of Roboto font

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

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

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


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

body.modal-open
  margin: 0

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

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

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

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

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

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

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

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

#shortcuts dl > dd
  margin-left: 85%

Add overflow: hidden to data table, else no float

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

body.modal-open
  margin: 0

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

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

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

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

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

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

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

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

#shortcuts dl > dd
  margin-left: 85%


// Setup the configuration settings
@import stylesheets/config

// Pick a library: compass, bourbon or underoos/polyfills
@import ../underoos/polyfills

// Import underoos mixins
@import ../underoos/mixins

// Core base styles
@import stylesheets/base/base

// Component styles
@import ../components/tooltip/tooltip

// Layouts and application specific imports
@import stylesheets/layouts/containers

Add the print stylesheet into the default path

// Setup the configuration settings
@import stylesheets/config

// Pick a library: compass, bourbon or underoos/polyfills
@import ../underoos/polyfills

// Import underoos mixins
@import ../underoos/mixins

// Core base styles
@import stylesheets/base/base

// Component styles
@import ../components/tooltip/tooltip

// Layouts and application specific imports
@import stylesheets/layouts/containers

@import stylesheets/layouts/print


div.info-banner
  margin-top: 0
  margin-bottom: 30px
  background: #2a445b
  padding: 25px
  display: flex
  flex-direction: row
  .info-sign
    width: 58px
    em
      font-size: 50px
      color: #f1d700
  .info-text
    flex: 1
    color: #e8eef3

Update infor banner sign color.

div.info-banner
  margin-top: 0
  margin-bottom: 30px
  background: #2a445b
  padding: 25px
  display: flex
  flex-direction: row
  .info-sign
    width: 58px
    em
      font-size: 50px
      color: #ffffff
  .info-text
    flex: 1
    color: #e8eef3


section#projects
  h2
    margin-bottom: 2em

  h3
    text-transform: uppercase
    font-size: 1.1em
    font-family: "SackersGothic", sans-serif
    color: $alRed
    letter-spacing: 1px

  .description
    list-style: none
    li
      line-height: 2em
      font-weight: 300
      color: $alGrayDarkest

  img
    max-width: 90%
    margin: 2em

  .video-container
    max-width: 50%
    margin: 0 auto 5em

  .embed-container
    position: relative
    padding-bottom: 56.25%
    padding-top: 30px
    height: 0
    overflow: hidden
    width: 100%

  .embed-container iframe,
  .embed-container object,
  .embed-container embed
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

  .star-delimiter
    margin: 0

Fix a bug with images on homepage on very large screens

section#projects
  h2
    margin-bottom: 2em

  h3
    text-transform: uppercase
    font-size: 1.1em
    font-family: "SackersGothic", sans-serif
    color: $alRed
    letter-spacing: 1px

  .description
    list-style: none
    li
      line-height: 2em
      font-weight: 300
      color: $alGrayDarkest

  img
    max-width: 90%
    margin: 2em auto
    display: block

  .video-container
    max-width: 50%
    margin: 0 auto 5em

  .embed-container
    position: relative
    padding-bottom: 56.25%
    padding-top: 30px
    height: 0
    overflow: hidden
    width: 100%

  .embed-container iframe,
  .embed-container object,
  .embed-container embed
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

  .star-delimiter
    margin: 0


body
  color: $black
  font-family: $sans-serif
  font-size: 16px
  line-height: 1.4

h1
  font-size: 2.25em

h2
  font-size: 1.875em

h3
  font-size: 1.5em

h4
  font-size: 1.25em

h5
  font-size: 1.125em

h6
  font-size: 1em

p
  margin: auto 0 14px

ol
  list-style-type: decimal

ul
  list-style-type: disc

a, a:visited
  color: $blue
  text-decoration: none
  &:hover
    text-decoration: underline

em
  font-style: italic

strong
  font-weight: bold

.float-right
  float: right

.float-left
  float: left

Add .em and .strong classes

body
  color: $black
  font-family: $sans-serif
  font-size: 16px
  line-height: 1.4

h1
  font-size: 2.25em

h2
  font-size: 1.875em

h3
  font-size: 1.5em

h4
  font-size: 1.25em

h5
  font-size: 1.125em

h6
  font-size: 1em

p
  margin: auto 0 14px

ol
  list-style-type: decimal

ul
  list-style-type: disc

a, a:visited
  color: $blue
  text-decoration: none
  &:hover
    text-decoration: underline

em, .em
  font-style: italic

strong, .strong
  font-weight: bold

.float-right
  float: right

.float-left
  float: left


.input.boolean
  label.checkbox
    input
      margin-right: 0.5em
  &.error
    small
      margin-top: 0.1em

textarea
  height: +emCalc(200px)

input, textarea
  +radius($input-radius)
  &.with-prefix
    +radius(0 $input-radius $input-radius 0)

  &.with-postfix
    +radius($input-radius 0 0 $input-radius)

span.prefix, span.postfix
  @extend .radius
  border-color: $input-prefix-border-color
  box-shadow: $input-box-shadow

label
  abbr
    color: red

Fix style for input with prefix and postfix

.input.boolean
  label.checkbox
    input
      margin-right: 0.5em
  &.error
    small
      margin-top: 0.1em

textarea
  height: +emCalc(200px)

input, textarea
  +radius($input-radius)
  &.with-prefix
    +radius(0 $input-radius $input-radius 0)

  &.with-postfix
    +radius($input-radius 0 0 $input-radius)

  &.with-prefix.with-postfix
    +radius(0)

span.prefix, span.postfix
  @extend .radius
  border-color: $input-prefix-border-color
  box-shadow: $input-box-shadow

label
  abbr
    color: red


=ext($name, $silent: true)
  @if $silent == true
    @extend %#{$name} !optional
  @else
    @extend .#{$name} !optional

@function auten($color, $percent: 40%)
  /** If too light, we use darken() otherwise we use lighten()
  @if lightness($color) > 50
    @return darken($color, $percent)
  @else
    @return lighten($color, $percent)

@function is_lighter($color)
  @if lightness($color) > 90
    @return true
  @else
    @return false

=if-parent($parent, $class)
  @at-root #{selector-replace(&, #{$parent}, $parent + $class)}
    @content

Change the standard of the limit of the auten function.

=ext($name, $silent: true)
  @if $silent == true
    @extend %#{$name} !optional
  @else
    @extend .#{$name} !optional

@function auten($color, $percent: 40%)
  /** If too light, we use darken() otherwise we use lighten()
  @if lightness($color) > 46
    @return darken($color, $percent)
  @else
    @return lighten($color, $percent)

@function is_lighter($color)
  @if lightness($color) > 90
    @return true
  @else
    @return false

=if-parent($parent, $class)
  @at-root #{selector-replace(&, #{$parent}, $parent + $class)}
    @content


@import compass
@import application/mixins
@import application/variables

.user
  $small-avatar-size: 2em
  $large-avatar-size: 128px

  position: relative
  width:    $small-avatar-size
  height    auto

  .avatar
    +background-size(cover)
    +border-radius(2px)

    +filter(saturate(5%))
    &:hover
      +filter(none)

  // make the avatar square
  .avatar
    width:     auto
    padding:   50%
    +box-sizing(border-box)

  .name
    white-space: nowrap

  &.user-large
    $padding-size:        8px

    padding: $padding-size
    width:   $large-avatar-size
    +box-shadow($medium_gray 0px 4px 7px -2px)

    .avatar
      & + .name
        margin-top: $padding-size
        text-align: center
      &:last-child
        margin-bottom: (3 * $padding-size)

  &.user-fit
    width: 100%
    height: auto

  &.user-inline
    display: inline-block
    .name
      display: inline

Fix product manager user name layout-36

@import compass
@import application/mixins
@import application/variables

.user
  $small-avatar-size: 2em
  $large-avatar-size: 128px

  position: relative
  width:    $small-avatar-size
  height    auto

  .avatar
    +background-size(cover)
    +border-radius(2px)

    +filter(saturate(5%))
    &:hover
      +filter(none)

  // make the avatar square
  .avatar
    width:     auto
    padding:   50%
    +box-sizing(border-box)

  .name
    white-space: nowrap

  &.user-large
    $padding-size:        8px

    padding: $padding-size
    width:   $large-avatar-size
    +box-shadow($medium_gray 0px 4px 7px -2px)

    .avatar
      & + .name
        margin-top: $padding-size
        text-align: center
      &:last-child
        margin-bottom: (3 * $padding-size)

  &.user-fit
    width: 100%
    height: auto

  &.user-inline
    display: inline-block
    .name
      display: inline-block


*
  box-sizing: border-box

html
  background: #F1F1F1
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif

@import components/header
@import components/nav-menu
@import components/container
@import components/sidebar
@import components/post
@import components/responsive_desktop

Add font smoothing for mobile clients

*
  box-sizing: border-box

html
  background: #F1F1F1
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

@import components/header
@import components/nav-menu
@import components/container
@import components/sidebar
@import components/post
@import components/responsive_desktop


@import "utils"
@import "colors"
@import "fonts"

*
  font-family: Avenir Next
  font-size: 1em

h1, h2, h3
  +reset

h1
  font-size: 2em

h2
  font-size: 1.4em

body
  +reset
  background: $background
  color: $text

#tldr
  @import "navigation"
  @import "page"

Fix bottom margin for headers

@import "utils"
@import "colors"
@import "fonts"

*
  font-family: Avenir Next
  font-size: 1em

h1, h2, h3
  +reset

h1
  font-size: 2em
  margin-bottom: 1.1em

h2
  font-size: 1.4em
  margin-bottom: 0.8em

body
  +reset
  background: $background
  color: $text

#tldr
  @import "navigation"
  @import "page"


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

.recent-posts, .footer-tags
  +span-columns(8)
  +shift(2)
  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

Add bullets to recent posts in footer

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

.recent-posts, .footer-tags
  +span-columns(8)
  +shift(2)
  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
  ol
    list-style-type: disc


// Tab-nav

// $include-html-tab-nav-classes: $include-html-classes

// Inactive tabs

// $tab-nav-spacing: emCalc(4)
// $tab-nav-padding: emCalc(6 12)
// $tab-nav-bg: darken(#fff, 5%)
// $tab-nav-border-color: darken($tab-nav-bg, 10%)
// $tab-nav-border-width: emCalc(1)

// Active tabs

// $tab-nav-active-bg: white
// $tab-nav-active-border-color: $primary-color
// $tab-nav-active-border-width: emCalc(3)
// $tab-nav-active-color: $header-font-color

// It may make sense to need it to align with the .row when
// inside a .columns.

// $tab-nav-extra-negative-spacing: 0

// Simple form

$form-input-margin-bottom: emCalc(24)

// These variables are extracted from foundation's top-bar.scss
// they are not exported but we need them in platform

// Change to 9999px for always mobile layout
$topbar-breakpoint: emCalc($medium-screen - 1)
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"

Remove one pixel of weirdness, hopefully.

// Tab-nav

// $include-html-tab-nav-classes: $include-html-classes

// Inactive tabs

// $tab-nav-spacing: emCalc(4)
// $tab-nav-padding: emCalc(6 12)
// $tab-nav-bg: darken(#fff, 5%)
// $tab-nav-border-color: darken($tab-nav-bg, 10%)
// $tab-nav-border-width: emCalc(1)

// Active tabs

// $tab-nav-active-bg: white
// $tab-nav-active-border-color: $primary-color
// $tab-nav-active-border-width: emCalc(3)
// $tab-nav-active-color: $header-font-color

// It may make sense to need it to align with the .row when
// inside a .columns.

// $tab-nav-extra-negative-spacing: 0

// Simple form

$form-input-margin-bottom: emCalc(24)

// These variables are extracted from foundation's top-bar.scss
// they are not exported but we need them in platform

// Change to 9999px for always mobile layout
$topbar-breakpoint: emCalc($medium-screen)
$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})"


.RegionTools
  position: absolute
  top: rem(10)
  right: rem(10)

.RegionTools .DragIcon
  transform: rotate(90deg)

// .region-tool.js-block-draghandle
//   cursor: move
.editor:not(.hasContent) .BlockRemove
  display: none

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

.BlockPlaceholder + .RegionTools
  display: none

Set the cursor to move on the drag handler

.RegionTools
  position: absolute
  top: rem(10)
  right: rem(10)

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

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

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

.BlockPlaceholder + .RegionTools
  display: none


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

body.authors
  h2
    font:
      size: 1.2em

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

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

    .shtick
      font-weight: bold

Reduce the font size for the author shtick.

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

body.authors
  h2
    font:
      size: 1.2em

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

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

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


$breakpoint-small:  (media: '(min-width: 320px)',  gutter: 30px)
$breakpoint-medium: (media: '(min-width: 720px)',  gutter: 30px)
$breakpoint-normal: (media: '(min-width: 960px)',  gutter: 30px)
$breakpoint-large:  (media: '(min-width: 1200px)', gutter: 30px)

Adjust gutters for size screen.

$breakpoint-small:  (media: '(min-width: 320px)',  gutter: 10px)
$breakpoint-medium: (media: '(min-width: 720px)',  gutter: 20px)
$breakpoint-normal: (media: '(min-width: 960px)',  gutter: 30px)
$breakpoint-large:  (media: '(min-width: 1200px)', gutter: 30px)


#header_wrap
  +clearing
  border:
    bottom: 1px solid #ddd
  +gradient-bottom(#eee)
  height: 40px

div.header
  width: 960px
  margin: 0 auto
  margin-top: 5px
  h1
    margin: 0
    border-right: 1px solid #ddd
    width: 134px
    height: 36px
    padding-right: 20px
    float: left
    a
      display: block
      width: 134px
      height: 36px

  #user_utilities
    float: right
    margin-top: 2px
    padding: 0
    text-align: right
    .global_navigation
      padding: 0
      margin:
        right: 10px
        top: 10px
      text-align: right
      list-style-type: none
      font-size: 11px
      li
        display: inline-block
        a
          color: #333
          padding: 5px

Add gradient IE filter for header

#header_wrap
  +clearing
  border:
    bottom: 1px solid #ddd
  +gradient-bottom(#eee)
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#EEEEEE, GradientType=0)"
  height: 40px

div.header
  width: 960px
  margin: 0 auto
  margin-top: 5px
  h1
    margin: 0
    border-right: 1px solid #ddd
    width: 134px
    height: 36px
    padding-right: 20px
    float: left
    a
      display: block
      width: 134px
      height: 36px

  #user_utilities
    float: right
    margin-top: 2px
    padding: 0
    text-align: right
    .global_navigation
      padding: 0
      margin:
        right: 10px
        top: 10px
      text-align: right
      list-style-type: none
      font-size: 11px
      li
        display: inline-block
        a
          color: #333
          padding: 5px


/* *-* coding: utf-8 *-* */
/* This file is part of butterfly */

/* butterfly Copyright (C) 2014  Florian Mounier */
/* This program is free software: you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
/* the Free Software Foundation, either version 3 of the License, or */
/* (at your option) any later version. */

/* This program is distributed in the hope that it will be useful, */
/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the */
/* GNU General Public License for more details. */

/* You should have received a copy of the GNU General Public License */
/* along with this program.  If not, see <http://www.gnu.org/licenses/>. */

$weights: (ExtraLight 100) (Light 300) (Regular 400) (Medium 500) (Semibold 600) (Bold 700) (Black 900)

@each $weight in $weights
  $weight_name: nth($weight, 1)

  @font-face
    font-family: "SourceCodePro"
    src: url("/static/fonts/SourceCodePro-#{$weight_name}.otf") format("woff")
    font-weight: nth($weight, 2)

body
  font-family: "SourceCodePro"
  line-height: 1.2
  font-size: 1.4em

Revert font size in order to fix demo stuff


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

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

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

Move the SURFboard to left on < large viewports

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

  &__front
    background: url(/images/background-front.svg) left bottom no-repeat
    bottom: 0
    left: 10%
    position: absolute
    height: 100%
    width: 100%
    z-index: 1
    +max-width($large)
      left: -8%

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


@import node_modules/bourbon-neat/core/neat

@import variables/breakpoints
@import variables/colors
@import variables/grid
@import variables/z-index

@import functions/get
@import functions/get_color

@import common/base

@import layout/container
@import layout/grid
@import layout/gridy
@import layout/section
@import layout/space

@import vendors/jquery.notify

@import components/attachy
@import components/body
@import components/button
@import components/call-to-action
@import components/card
@import components/card/avatar
@import components/card/body
@import components/card/cover
@import components/card/headings
@import components/coming-soon
@import components/comment
@import components/divider
@import components/footer
@import components/form
@import components/grid
@import components/headings
@import components/login
@import components/main
@import components/menu
@import components/modal
@import components/modaly
@import components/navbar
@import components/options
@import components/overlay
@import components/search
@import components/page-header
@import components/pagination
@import components/plan
@import components/rating
@import components/searchbar
@import components/switcher
@import components/table

@import views/payments/index
@import views/schools/index
@import views/schools/show
@import views/searches/index
@import views/sessions/new
@import views/subscriptions/payment
@import views/subscriptions/plans
@import views/teachers/index
@import views/teachers/show

Remove import for views files.


@import compass
@import compass/reset
@import compass/css3/text-shadow

body
  font-family: 'Open Sans', Helvetica, Arial, sans-serif
  +text-shadow

  .flash_errors
    padding: 16px 128px
    margin: 0 auto
    background-color: #a20
    color: white
    font-size: 14px
    font-weight: bold
    .error-block
      margin-top: 8px
    ul
      padding-left: 16px
      list-style: circle
  section.main
    width: 1000px
    margin: auto
    .logo
      text-align: center
      font-size: 72px
      color: #222
    section
      width: 256px
      margin: 15px auto 0
      padding: 15px

      h1
        font-size: 22px
        padding: 20px 0

      form
        .user
          margin-bottom: 16px
        .field
          label
            display: block
            font-size: 14px

          input
            font-size: 16px
            width: 100%
            margin: 2px 0 2px 0
            +border-radius
          .disclaimer
            font-size: 7pt
        .submit
          input[type="submit"]
            border: 1px #444 solid
@import _flash

Tweak registrations styles. Make errors section use flex box.

@import compass
@import compass/reset
@import compass/css3/text-shadow
@import compass/css3/box

body
  font-family: 'Open Sans', Helvetica, Arial, sans-serif
  +text-shadow

  .flash_errors
    width: 100%
    +display-box
    +box-align('center')
    +box-orient('vertical')
    padding: 10px
    background-color: #a20
    color: white
    font-size: 14px
    font-weight: bold

    .error-block
      margin-top: 8px

    ul
      padding-left: 10px
      list-style: circle

  section.main
    section
      width: 256px
      margin: 15px auto 0
      padding: 15px

      h1
        font-size: 22px
        padding: 20px 0

      form
        .user
          margin-bottom: 16px

        .field
          label
            display: block
            font-size: 14px

          input
            font-size: 16px
            width: 100%
            margin: 2px 0 2px 0
            +border-radius
          .disclaimer
            font-size: 7pt

        .submit
          input[type="submit"]
            border: 1px #444 solid

@import _flash


@import 'lib/settings'

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

Revert "Add subtle gloss on navball"

@import 'lib/settings'

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


@import 'rui/style'

.rdb-permissions
  width: 100%
  max-width: 60em
  border-spacing: 0
  border-collapse: collapse

  td
    padding: 4px 8px
    border-top: 1px solid $frame-color
    white-space: nowrap

    .rdb-avatar
      width: 16px
      height: 16px
      border-radius: 2px
      vertical-align: bottom
      margin-right: .4em

    .rui-icon:first-child
      margin-right: .4em
      width: 16px
      text-align: center

    &:last-child
      width: 1%
      border: none

    &.rdb-roles
      width: 1%

      a
        font-size: 80%
        display: inline-block
        border: 1px solid $primary-brightblue
        padding: 1px 4px
        border-radius: 3px
        margin: 1px 2px
        text-transform: uppercase

        &:hover, &.rdb-active
          color: white
          text-decoration: none
          background-color: $primary-brightblue

        &.rdb-active
          cursor: default

    &.rdb-actions
      width: 1%

  th
    text-align: center
    padding: 0px 6px 2px

    .rui-input
      width: 100%

Fix select default width in permission editor

@import 'rui/style'

.rdb-permissions
  width: 100%
  max-width: 60em
  border-spacing: 0
  border-collapse: collapse

  td
    padding: 4px 8px
    border-top: 1px solid $frame-color
    white-space: nowrap

    .rdb-avatar
      width: 16px
      height: 16px
      border-radius: 2px
      vertical-align: bottom
      margin-right: .4em

    .rui-icon:first-child
      margin-right: .4em
      width: 16px
      text-align: center

    &:last-child
      width: 1%
      border: none

    &.rdb-roles
      width: 1%

      a
        font-size: 80%
        display: inline-block
        border: 1px solid $primary-brightblue
        padding: 1px 4px
        border-radius: 3px
        margin: 1px 2px
        text-transform: uppercase

        &:hover, &.rdb-active
          color: white
          text-decoration: none
          background-color: $primary-brightblue

        &.rdb-active
          cursor: default

    &.rdb-actions
      width: 1%

  th
    text-align: center
    padding: 0px 6px 2px

    .rui-input, .rui-select
      width: 100%


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

  .comment-avatar
    img
      width: 100%

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

.comment-author
  opacity: .8

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

.comment-destroy a
  color: $warning-color

.comment-signalled
  text-decoration: none

.auhtor-with-avatar
  text-align: center

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

.comment-count
  display: inline !important

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

.nested_messages .nested_messages .nested_messages
  margin-left: 0

Fix bug with captcha field shown in Blog comment form

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

  .comment-avatar
    img
      width: 100%

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

.comment-author
  opacity: .8

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

.comment-destroy a
  color: $warning-color

.comment-signalled
  text-decoration: none

.auhtor-with-avatar
  text-align: center

// Captcha
#comment_nickname
  display: none !important

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

.comment-count
  display: inline !important

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

.nested_messages .nested_messages .nested_messages
  margin-left: 0


=selector-index-append($target-index, $appending-selector)
  @if $target-index == 0
    @error '$target-index cannot be `0`'
  $new-selectors: ''
  @each $selector in &
    $local-index: $target-index
    @while $local-index < 0
      $local-index: $local-index + length($selector) + 1
    $i: 0
    $new-selector: ''
    @each $sel in $selector
      $i: $i + 1
      @if $i == $local-index
        $sel: selector-append($sel, $appending-selector)
      $new-selector: $new-selector + $sel + ' '
    @if $new-selector != $selector
      $new-selectors: $new-selectors + $new-selector + ', '
  @at-root #{$new-selectors}
    @content

Change function to bring class selectors ahead of pseudo-element selectors

=selector-index-append($target-index, $appending-selector)
  @if $target-index == 0
    @error '$target-index cannot be `0`'
  $new-selectors: ''
  @each $selector in &
    $local-index: $target-index
    @while $local-index < 0
      $local-index: $local-index + length($selector) + 1
    $i: 0
    $new-selector: ''
    @each $sel in $selector
      $i: $i + 1
      @if $i == $local-index
        $sel: selector-replace($sel, $sel, $sel + $appending-selector)
      $new-selector: $new-selector + $sel + ' '
    @if $new-selector != $selector
      $new-selectors: $new-selectors + $new-selector + ', '
  @at-root #{$new-selectors}
    @content


.holo-button
    display: block
    background-color: $HOLO_BLUE
    // Override default link styling within content area
    color: white !important
    font-weight: 500

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12)
    border-radius: 2px
    padding: 6px 12px

    &:active
        background-color: $HOLO_BLUE_DARKER

    &:hover, &:focus
        background-color: $HOLO_BLUE_DARK

Add slight fading effect to buttons

.holo-button
    display: block
    background-color: $HOLO_BLUE
    // Override default link styling within content area
    color: white !important
    font-weight: 500

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12)
    border-radius: 2px
    padding: 6px 12px

    transition: background-color 0.3s ease

    &:active
        background-color: $HOLO_BLUE_DARKER

    &:hover, &:focus
        background-color: $HOLO_BLUE_DARK


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

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

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

Add support for medium grid

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

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

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


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

Remove bottom padding from sidebar

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


.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
    &.personal
      +avatar-position(150px)
    &.company
      +avatar-position(150px, 320px)

  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

Fix user avatar with white on public user 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
    &.personal
      +avatar-position(150px)
    &.company
      +avatar-position(150px, 320px)

  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


.footer
  @extend .default-side-padding
  background: $color-grey-light
  height: 200px
  @include flexbox
  @include align-items(center)
  &:hover
    cursor: pointer

.footer p:before
  background: url(asset-path('active_admin/wm-logo-grey.svg'))
  content: ""
  width: 111px
  height: 59px
  display: inline-block
  visibility: visible
  float: left

.footer p
  width: 100%
  visibility: hidden

.footer p:after
  content: "With cubs, hugs and Active Admin from wolfmother.co"
  visibility: visible
  line-height: 59px
  float: right
  letter-spacing: 0.05em
  color: $color-grey-medium

Transform footer text to uppercase

.footer
  @extend .default-side-padding
  background: $color-grey-light
  height: 200px
  @include flexbox
  @include align-items(center)
  &:hover
    cursor: pointer

.footer p:before
  background: url(asset-path('active_admin/wm-logo-grey.svg'))
  content: ""
  width: 111px
  height: 59px
  display: inline-block
  visibility: visible
  float: left

.footer p
  width: 100%
  visibility: hidden

.footer p:after
  content: "With cubs, hugs and Active Admin from wolfmother.co"
  visibility: visible
  line-height: 59px
  float: right
  letter-spacing: 0.05em
  color: $color-grey-medium
  text-transform: uppercase


.sidebar
  .content
    .blog
      h3
        background-image: image-url('neighborly/blog_icon17x14.png')
    .facebook
      h3
        background-image: image-url('neighborly/facebook_icon13x26.png')
    .twitter
      padding-bottom: 20px
      h3
        background-image: image-url('neighborly/twitter_icon28x24.png')
    .faq, .how_it_works, .about_us
      padding-top: 0
      margin-top: 20px
      padding-bottom: 20px
      border-bottom: 1px rgba(black, 0.1) solid

Fix margin on sidebar twitter icon

.sidebar
  .content
    .blog
      h3
        background-image: image-url('neighborly/blog_icon17x14.png')
    .facebook
      h3
        background-image: image-url('neighborly/facebook_icon13x26.png')
    .twitter
      padding-bottom: 20px
      h3
        padding-top: 0px
        background-image: image-url('neighborly/twitter_icon28x24.png')
    .faq, .how_it_works, .about_us
      padding-top: 0
      margin-top: 20px
      padding-bottom: 20px
      border-bottom: 1px rgba(black, 0.1) solid


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

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

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

Remove foundation custom form styles

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

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

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


.hljs
  display: inline-block
  overflow: hidden !important
  padding: 0.5em auto
  -webkit-text-size-adjust: none
  width: 100%

td.hljs-ln-numbers
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  text-align: center
  color: #ccc
  border-right: 1px solid #CCC
  vertical-align: top
  padding-right: 10px
  padding-left: 10px

td.hljs-ln-code
  padding-left: 5px

Fix unnecessary scrolling on paste view

.hljs
  display: inline-block
  overflow: hidden !important
  padding: 0.5em 0
  -webkit-text-size-adjust: none
  width: 100%

td.hljs-ln-numbers
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  text-align: center
  color: #ccc
  border-right: 1px solid #CCC
  vertical-align: top
  padding-right: 10px
  padding-left: 10px

td.hljs-ln-code
  padding-left: 5px


.main-content
  overflow: scroll

.text-content
  margin: $gutter * 2 auto
  max-width: 35em
  padding: 0 $gutter

  &--cta
    text-align: center

Fix overflow scrollbars on main content

.main-content
  overflow: auto

.text-content
  margin: $gutter * 2 auto
  max-width: 35em
  padding: 0 $gutter

  &--cta
    text-align: center


footer
  +outer-container
  border-top: 1px solid $light-gray
  padding-top: 4em
  padding-bottom: 4em

.recent-posts, .footer-tags
  h3
    font-size: 1.7em
  li
    font-size: 1.05em

.recent-posts
  +span-columns(6)
  +shift(2)

.footer-tags
  +span-columns(2)

.recent-posts, .footer-tags
  color: darken($medium-gray, 20%)
  a
    +transition(all .1s ease-in-out)
    color: $text-color
    &:hover
      color: $matcha-green
      border-bottom: 2px solid $matcha-green

Adjust styles for rearranged footer content

footer
  +outer-container
  border-top: 1px solid $light-gray
  padding:
    bottom: $medium-margin
  h3
    font-size: 1.7em
    color: $light-gray
    margin:
      bottom: $small-margin
  li
    font-size: 1.05em
    margin:
      bottom: $small-margin / 4
  a
    color: darken($medium-gray, 30%)

.recent-posts, .footer-tags
  +span-columns(8)
  +shift(2)
  margin:
    top: $medium-margin
  li
    margin:
      top: $small-margin

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


// -----------------------------------------------------------------------------
// Stack Intro Card
// -----------------------------------------------------------------------------

$stack-intro-text-line-height: 25px
$stack-intro-lines-to-show: 2

.stack__intro
  @extend %four-pixel-rounded
  padding: 25px
  position: relative

.stack__intro__content
  @extend %relative
  overflow: hidden

  .js &
    height: $stack-intro-text-line-height * $stack-intro-lines-to-show

  .stack__intro--closed &
    height: $stack-intro-text-line-height * $stack-intro-lines-to-show
    margin-bottom: 10px

    &:after
      @extend %empty-abs-generated-content
      +background-gradient($startColor: rgba(255,255,255,0), $endColor: rgba(255,255,255,1.0))
      bottom: 0
      height: 20px
      left: 0
      pointer-events: none
      right: 0

// Temporary type styling until crazy harry is updated and rowlf run (20/5/2013)
.stack__intro__content
  p:first-of-type
    @extend .copy--feature
  h2
    @extend .copy--subtitle
  @extend .copy--body

Set default height of stack intro text to 0 and remove redundant styles

// -----------------------------------------------------------------------------
// Stack Intro Card
// -----------------------------------------------------------------------------

$stack-intro-text-line-height: 25px
$stack-intro-lines-to-show: 2

.stack__intro
  @extend %four-pixel-rounded
  padding: 25px
  position: relative

.stack__intro__content
  @extend %relative
  overflow: hidden

  .js-read-more &
    max-height: 0

// Temporary type styling until crazy harry is updated and rowlf run (20/5/2013)
.stack__intro__content
  p:first-of-type
    @extend .copy--feature
  h2
    @extend .copy--subtitle
  @extend .copy--body


.error-details
  &__intro-text
    font-size: $f-normal
    line-height: 1.6em
    text-align: center
    .heading\@small
      +max-width($small)
        font-weight: bold
        display: block
  &__feedback-list
    width: 100%
    +min-width($small + 1)
      display: grid
      grid-auto-flow: row dense
      grid-gap: 0.5em
      grid-template-columns: repeat(3, 1fr)

Add IE10/11 support for error feedback

.error-details
  &__intro-text
    font-size: $f-normal
    line-height: 1.6em
    text-align: center
    .heading\@small
      +max-width($small)
        font-weight: bold
        display: block
  &__feedback-list
    width: 100%
    +min-width($small + 1)
      display: grid
      grid-auto-flow: row dense
      grid-gap: 0.5em
      grid-template-columns: repeat(3, 1fr)
      // For IE 10 and 11, we can not use grid-auto-flow, and getting good results otherwise is not feasible
      @media all and (-ms-high-contrast: none)
        display: block
        .feedback-info
          margin: 0.5em 0 0.5em 0


// _slim.css.sass
//
// @package bundle/contour/common/theatre/roof
// @media all
// @version 1.0

@mixin slim
  &.slim
    .dashboard
      .badge
        background: none
        display: block
        height: auto
        margin: 0 auto
        padding: rem(30) 0 rem(20)
        width: 160px

        span
          margin: 0

          &.claim
            display: none

      nav
        &.outline
          padding: 0 0 rem(20)

        &.channels
          display: none

Send “roof” ever more on diet.

// _slim.css.sass
//
// @package bundle/contour/common/theatre/roof
// @media all
// @version 1.0

@mixin slim
  &.slim
    .dashboard
      .badge
        background: none
        display: block
        height: auto
        margin: 0 auto
        padding: rem(20) 0 rem(10)
        width: 160px

        span
          margin: 0

          &.claim
            display: none

      nav
        &.outline
          padding: 0 0 rem(10)

        &.channels
          display: none


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

Fix issue with canvas height with `maintainAspectRatio: false`

.reports_kit_report
  width: 100%
  padding: 1px
  canvas
    width: 100%
    max-height: 500px
  .date_range_picker
    width: 180px


// Custom sass code

div#toc-container
  float: right
  display: block
  margin: 1em

div.alert-box
  display: flex !important

Add max-width for TOC box

// Custom sass code

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

div.alert-box
  display: flex !important


@import ../../styles/lib

.AppleStoreLink
  display: none
  position: absolute
  bottom: rem(10)
  left: rem(10)

.AppleStoreLink svg
  border-radius: 5px

@media(min-width: #{$break-2})
  .AppleStoreLink
    display: block
    bottom: rem(20)
    left: rem(20)

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

Update px to use rem.

@import ../../styles/lib

.AppleStoreLink
  display: none
  position: absolute
  bottom: rem(10)
  left: rem(10)

.AppleStoreLink svg
  border-radius: rem(5)

@media(min-width: #{$break-2})
  .AppleStoreLink
    display: block
    bottom: rem(20)
    left: rem(20)

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


@import ../../vendor/lib

.AffiliateDialog
  width: 100%
  max-width: rem(440)

.AffiliateDialogTitle
  font-size: rem(24)
  margin-bottom: rem(30)

.AffiliateDialogControl .FormControlInput.asBoxControl
  height: rem(50)
  padding: 0 rem(10)
.AffiliateDialogControl .FormControlStatus.asBoxControl
  top: rem(15)

.AffiliateDialogButton
  +sans-typeset
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease
  width: rem(100)
  height: rem(50)
  padding: 0 rem(20)
  border-radius: rem(5)
  line-height: rem(50)
  text-align: center
  color: #aaa

.AffiliateDialogButton.isSubmit
  margin-right: rem(10)
  background-color: #00d100
  color: white

.AffiliateDialogButton[disabled]
  background-color: #aaa

.AffiliateDialogButton.isRemove
  margin-right: rem(10)
  background-color: #aaa
  color: white

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

.AffiliateDialogButton[disabled]
  color: #666

Fix padding on affiliate input to not hit check.

@import ../../vendor/lib

.AffiliateDialog
  width: 100%
  max-width: rem(440)

.AffiliateDialogTitle
  font-size: rem(24)
  margin-bottom: rem(30)

.AffiliateDialogControl .FormControlInput.asBoxControl
  height: rem(50)
  padding: 0 rem(35) 0 rem(10)
.AffiliateDialogControl .FormControlStatus.asBoxControl
  top: rem(15)

.AffiliateDialogButton
  +sans-typeset
  transition: background-color $speed $ease, border-color $speed $ease, color $speed $ease, width $speed $ease
  width: rem(100)
  height: rem(50)
  padding: 0 rem(20)
  border-radius: rem(5)
  line-height: rem(50)
  text-align: center
  color: #aaa

.AffiliateDialogButton.isSubmit
  margin-right: rem(10)
  background-color: #00d100
  color: white

.AffiliateDialogButton[disabled]
  background-color: #aaa

.AffiliateDialogButton.isRemove
  margin-right: rem(10)
  background-color: #aaa
  color: white

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

.AffiliateDialogButton[disabled]
  color: #666


/* _section.sass */

section
  padding-bottom: 2.143em
  padding-top: 2.143em

  h2
    color: $red
    margin-bottom: 0.75em

  &.intro
    p
      font-size: 130%

  &.callout
    background-color: $red
    padding-top: 2.143em
    .lead
      color: white
      margin: 0 auto
      opacity: 0.65

  &.playlist
    margin-top: 50px
    background-color: $lighter-gray

    iframe
      margin-top: 30px

  &.pictures
    img
      margin-top: 20px

  &.sponsors
    margin-top: 50px
    background-color: $lighter-gray

    a
      margin-top: 20px
      display: block
      box-shadow: 0 0 10px rgba(0, 0, 0, .2)
      background-color: transparent
      text-align: center

      img
        width: 100%

      &:hover
        background-color: rgba(255, 255, 255, .5)

Remove box-shadow for sponsor cards

/* _section.sass */

section
  padding-bottom: 2.143em
  padding-top: 2.143em

  h2
    color: $red
    margin-bottom: 0.75em

  &.intro
    p
      font-size: 130%

  &.callout
    background-color: $red
    padding-top: 2.143em
    .lead
      color: white
      margin: 0 auto
      opacity: 0.65

  &.playlist
    margin-top: 50px
    background-color: $lighter-gray

    iframe
      margin-top: 30px

  &.pictures
    img
      margin-top: 20px

  &.sponsors
    margin-top: 50px
    background-color: $lighter-gray

    a
      margin-top: 20px
      display: block
      background-color: transparent
      text-align: center

      img
        width: 100%

      &:hover
        background-color: rgba(255, 255, 255, .5)


// Output pixel font sizes in rems from $font-base
// Recommended polyfill: https://github.com/chuckcarpenter/REM-unit-polyfill
$use-rem: false !default
@function rem($target, $context: $font-base)
    @if $use-rem
        @if $target == 0
            @return 0
        @return $target / $context + 0rem
    @else
        @return $target

Update rem mixin to return 1px for rem(1px)

// Output pixel font sizes in rems from $font-base
// Recommended polyfill: https://github.com/chuckcarpenter/REM-unit-polyfill
$use-rem: false !default
@function rem($target, $context: $font-base)
    @if $use-rem
        @if $target == 0
            @return 0
        @if $target == 1px
            @return 1px
        @return $target / $context + 0rem
    @else
        @return $target


.conversations-list-controls
  position: absolute
  top: 0
  left: 0
  right: 0
  height: $conversations-list-controls-height - 5px
  padding-top: 5px
  background-color: $grey-color
  font-size: 0
  overflow: hidden
  white-space: nowrap
  > a
    display: inline-block
    width: 25%
    text-align: center
    &, &:hover, &:visited, &:active
      text-decoration: none
      color: $white-color
      &.active
        color: $yellow-color
    > *
      display: block
    > i
      font-size: 30px
    > span
      font-size: 10px

  +small-screens
    background-color: transparentize($grey-color, 0.2)
    &.hidden
      display: none

Fix annoying bug where the buttons in the toolbar sometimes disappear when viewing tasks

.conversations-list-controls
  position: absolute
  top: 0
  left: 0
  right: 0
  height: $conversations-list-controls-height - 5px
  padding-top: 5px
  background-color: $grey-color
  font-size: 0
  overflow: hidden
  white-space: nowrap
  > a.icon-with-text
    display: inline-block
    width: 25%
    text-align: center
    &, &:hover, &:visited, &:active
      text-decoration: none
      color: $white-color
      &.active
        color: $yellow-color
    > *
      display: block
    > i
      font-size: 30px
    > span
      font-size: 10px

  +small-screens
    &.hidden
      display: none


@import slider

$projects-section-background: #616161

#projects
  background-color: $projects-section-background
  color: $light-text-primary

  display: flex
  flex-direction: column

Remove bottom margin from the projects section header

@import slider

$projects-section-background: #616161

#projects
  background-color: $projects-section-background
  color: $light-text-primary

  display: flex
  flex-direction: column

  h2
    margin-bottom: 0


// Core variables and mixins
@import "bootstrap/variables"
@import "bootstrap/mixins"

// Reset and dependencies
//@import "bootstrap/normalize"
//@import "bootstrap/print"
//@import "bootstrap/glyphicons"

// Core CSS
//@import "bootstrap/scaffolding"
//@import "bootstrap/type"
//@import "bootstrap/code"
//@import "bootstrap/grid"
//@import "bootstrap/tables"
//@import "bootstrap/forms"
//@import "bootstrap/buttons"

// Components
//@import "bootstrap/component-animations"
//@import "bootstrap/dropdowns"
//@import "bootstrap/button-groups"
//@import "bootstrap/input-groups"
//@import "bootstrap/navs"
//@import "bootstrap/navbar"
//@import "bootstrap/breadcrumbs"
//@import "bootstrap/pagination"
//@import "bootstrap/pager"
//@import "bootstrap/labels"
//@import "bootstrap/badges"
//@import "bootstrap/jumbotron"
//@import "bootstrap/thumbnails"
//@import "bootstrap/alerts"
//@import "bootstrap/progress-bars"
//@import "bootstrap/media"
//@import "bootstrap/list-group"
//@import "bootstrap/panels"
//@import "bootstrap/responsive-embed"
//@import "bootstrap/wells"
//@import "bootstrap/close"

// Components w/ JavaScript
//@import "bootstrap/modals"
@import "bootstrap/tooltip"
//@import "bootstrap/popovers"
//@import "bootstrap/carousel"

// Utility classes
//@import "bootstrap/utilities"
//@import "bootstrap/responsive-utilities"

Add enough bootstrap to make datepicker work and not break everything else

// Core variables and mixins
@import "bootstrap/variables"
@import "bootstrap/mixins"

// Reset and dependencies
//@import "bootstrap/normalize"
//@import "bootstrap/print"
//@import "bootstrap/glyphicons"

// Core CSS
//@import "bootstrap/scaffolding"
@import "bootstrap/type"
@import "bootstrap/code"
@import "bootstrap/grid"
@import "bootstrap/tables"
@import "bootstrap/forms"
@import "bootstrap/buttons"

// Components
//@import "bootstrap/component-animations"
@import "bootstrap/dropdowns"
//@import "bootstrap/button-groups"
//@import "bootstrap/input-groups"
//@import "bootstrap/navs"
//@import "bootstrap/navbar"
//@import "bootstrap/breadcrumbs"
//@import "bootstrap/pagination"
//@import "bootstrap/pager"
//@import "bootstrap/labels"
//@import "bootstrap/badges"
//@import "bootstrap/jumbotron"
//@import "bootstrap/thumbnails"
//@import "bootstrap/alerts"
//@import "bootstrap/progress-bars"
//@import "bootstrap/media"
//@import "bootstrap/list-group"
//@import "bootstrap/panels"
//@import "bootstrap/responsive-embed"
//@import "bootstrap/wells"
//@import "bootstrap/close"

// Components w/ JavaScript
//@import "bootstrap/modals"
@import "bootstrap/tooltip"
//@import "bootstrap/popovers"
//@import "bootstrap/carousel"

// Utility classes
//@import "bootstrap/utilities"
//@import "bootstrap/responsive-utilities"