$gray: #808080
$old-paper: #F8ECC2

a
  color: black
  text-decoration: initial

body
  background: url('seamless_paper_texture.png')
  width: 900px
  margin: 0 auto

  header
    text-align: center
    h1
      font-family: 'Raleway', sans-serif
      font-size: 80px
    h3
      font-family: 'Gentium Book Basic', serif
      color: $gray

  .novel
    font-family: 'Gentium Book Basic', serif
    padding: 20px
    .chapter
      padding: 20px 0
      &:not(:last-child)
        border-bottom: 1px dashed $gray
      .title
        font-weight: bold
        margin: 10px 0
      .body
        margin-bottom: 20px
      .date
        color: $gray
        font-style: italic
        font-size: 12px
        text-align: right

Make subhead more prominent for now

$gray: #808080
$old-paper: #F8ECC2

a
  color: black
  text-decoration: initial

body
  background: url('seamless_paper_texture.png')
  width: 900px
  margin: 0 auto

  header
    text-align: center
    h1
      font-family: 'Raleway', sans-serif
      font-size: 80px
    h3
      font-family: 'Gentium Book Basic', serif

  .novel
    font-family: 'Gentium Book Basic', serif
    padding: 20px
    .chapter
      padding: 20px 0
      &:not(:last-child)
        border-bottom: 1px dashed $gray
      .title
        font-weight: bold
        margin: 10px 0
      .body
        margin-bottom: 20px
      .date
        color: $gray
        font-style: italic
        font-size: 12px
        text-align: right


// Typography
//
// Styles from this page can be found in `wyrm_core/_type.sass`.
//
code
  font-size: $code-font-size

Adjust margin for paragraphs '<p>'

// Typography
//
// Styles from this page can be found in `wyrm_core/_type.sass`.
//
code
  font-size: $code-font-size

p
  margin-top: $base-line-height / 2.0
  margin-bottom: $base-line-height / 2.0


#plot_area
  display: inline-block
  position: relative
  width: 100%
  // let's occupy 50% of the screen. Remember to keep up to date with network's ratio!
  padding-bottom: 50%
  vertical-align: top
  overflow: hidden
  margin-bottom: 20px

.tooltip
  background: rgba(80, 80, 80, 0.9)
  color: #fff
  padding: 5px 9px
  border: 1px black
  border-radius: 3px

.site rect
  stroke: #555

  &.phosphorylation
    fill: rgb(67, 162, 202)

  &.acetylation
    fill: rgb(186, 228, 188)

  &.ubiquitination
    fill: rgb(123, 204, 196)

  &.methylation
    fill: rgb(240, 249, 232)

  &.multi_ptm
    fill: rgb(8, 104, 172)

.axis
  shape-rendering: crispEdges

  line
    stroke: #fff

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

Change cursor over circles and improve ul styling

#plot_area
  display: inline-block
  position: relative
  width: 100%
  // let's occupy 50% of the screen. Remember to keep up to date with network's ratio!
  padding-bottom: 50%
  vertical-align: top
  overflow: hidden
  margin-bottom: 20px

.tooltip
  background: rgba(80, 80, 80, 0.9)
  color: #fff
  padding: 5px 9px
  border: 1px black
  border-radius: 3px

  ul
    margin-bottom: 0
    padding-left: 20px

.site rect
  stroke: #555

  &.phosphorylation
    fill: rgb(67, 162, 202)

  &.acetylation
    fill: rgb(186, 228, 188)

  &.ubiquitination
    fill: rgb(123, 204, 196)

  &.methylation
    fill: rgb(240, 249, 232)

  &.multi_ptm
    fill: rgb(8, 104, 172)

.axis
  shape-rendering: crispEdges

  line
    stroke: #fff

  .minor
    stroke-opacity: .5

  line, path
    fill: none
    stroke: #000

.needle
  line
    stroke: black

  circle
    &:hover
      cursor: pointer


section.flash
  .container
    padding-top: 10px
    padding-bottom: 10px
    font-weight: bold
    text-align: center

  &.notice
    color: white
    background-color: #4e9a06

  &.alert
    color: black
    background-color: #c4a000

    // bootstrap overrides
    margin-bottom: 0
    padding: inherit
    border: 0
    border-radius: 0

Make notice message's background matching design a bit more

section.flash
  .container
    padding-top: 10px
    padding-bottom: 10px
    font-weight: bold
    text-align: center

  &.notice
    color: white
    background-color: #06989a

  &.alert
    color: black
    background-color: #c4a000

    // bootstrap overrides
    margin-bottom: 0
    padding: inherit
    border: 0
    border-radius: 0


// Use this helper when replacing text with an image in a block level element
%image-replace
    background:
        color: transparent
    border: 0
    overflow: hidden
    &:before
        content: ''
        display: block
        width: 0
        height: 100%
    @if $project == 'web'
        .lt-ie8 &
            text-indent: -9999px

Use support-legacy-browser() rather than project type

// Use this helper when replacing text with an image in a block level element
%image-replace
    background:
        color: transparent
    border: 0
    overflow: hidden
    &:before
        content: ''
        display: block
        width: 0
        height: 100%
    @if support-legacy-browser("ie", "7")
        .lt-ie8 &
            text-indent: -9999px


.thumb-container
  max-width: 750px
  margin: 0px auto 0px
  padding: 30px
  +clearfix
  .thumb-unit
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
    cursor: pointer
    display: block
    width: 600px
    height: 300px
    margin: 0px auto 30px
    position: relative
    overflow: hidden
    background:
      position: center center
      repeat: no-repeat
      size: cover
    .thumb-overlay
      +position(absolute, 100% 0px null 0px)
      height: 100%
      background: fade-out(#333, 0.5)
      text-align: center
      //+transition
      +display(flex)
      +align-items(center)
      +justify-content(space-around)
      strong
        display: block
        padding: 20px
        color: white
        line-height: 1.2
        font:
          size: 24px
          weight: 300
    &:hover .thumb-overlay
      +position(absolute, 0px 0px null 0px)

@media (max-width: 768px)
  .thumb-container
    max-width: 80vw
    .thumb-unit
      width: 80vw
      height: 250px

Make image size change relative to view width

.thumb-container
  max-width: 750px
  margin: 0px auto 0px
  padding: 30px
  +clearfix
  .thumb-unit
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
    cursor: pointer
    display: block
    width: 600px
    height: 300px
    margin: 0px auto 30px
    position: relative
    overflow: hidden
    background:
      position: center center
      repeat: no-repeat
      size: cover
    .thumb-overlay
      +position(absolute, 100% 0px null 0px)
      height: 100%
      background: fade-out(#333, 0.5)
      text-align: center
      //+transition
      +display(flex)
      +align-items(center)
      +justify-content(space-around)
      strong
        display: block
        padding: 20px
        color: white
        line-height: 1.2
        font:
          size: 24px
          weight: 300
    &:hover .thumb-overlay
      +position(absolute, 0px 0px null 0px)

@media (max-width: 768px)
  .thumb-container
    max-width: 80vw
    .thumb-unit
      width: 80vw
      height: 40vw


@media(max-width:767px)
  #flow li div
    height: 60%
    margin-top: 0
  #flow p
    bottom: 20% !important

  #clients
    li div
      width: 70%
      height: 60%
      margin-left: auto
      margin-right: auto

  #portfolio
    ul
      padding-top: 0 !important
      padding-bottom: 0 !important
      margin-bottom: 0
    ul:nth-of-type(1)
      padding-top: 20px !important

  #flow li div
    &:after
      content: "" !important
      display: none

  #contact
    li
      padding-bottom: 40px
    li:nth-of-type(3)
      padding-bottom: 0

Improve header display on small screens

@media(max-width:767px)
  #flow li div
    height: 60%
    margin-top: 0
  #flow p
    bottom: 20% !important

  #clients
    li div
      width: 70%
      height: 60%
      margin-left: auto
      margin-right: auto

  #portfolio
    ul
      padding-top: 0 !important
      padding-bottom: 0 !important
      margin-bottom: 0
    ul:nth-of-type(1)
      padding-top: 20px !important

  #flow li div
    &:after
      content: "" !important
      display: none

  #contact
    li
      padding-bottom: 40px
    li:nth-of-type(3)
      padding-bottom: 0

@media(max-width: 550px)
  #tagline
    font-size: 1.4em !important

  #tagline ul.point li:before, #tagline ul.point li:last-of-type:after
    width: 8px !important
    height: 8px !important
    margin: auto 7px 2px 7px !important

@media(max-width: 370px)
  #tagline
    font-size: 1em !important


$base-font-size:   13px
$base-line-height: 18px

@import "shibui/shared"
@import "shibui/base"
@import "shibui/buttons"
@import "shibui/grid"

// 3. Webapp patterns
//
// Forms
// - text fields
// - text areas
// - checkboxes
// - radio buttons
// - drop-downs
//
// Panels
// - Recessed
// - Overlayed

// 4. Grid
// - basic
// - nested
// - offsets
// - centered
// - mobile

Add default flag to base settings

$base-font-size:   13px !default
$base-line-height: 18px !default

@import "shibui/shared"
@import "shibui/base"
@import "shibui/buttons"
@import "shibui/grid"

// 3. Webapp patterns
//
// Forms
// - text fields
// - text areas
// - checkboxes
// - radio buttons
// - drop-downs
//
// Panels
// - Recessed
// - Overlayed

// 4. Grid
// - basic
// - nested
// - offsets
// - centered
// - mobile


.category,
.box
  background: white
  padding: 1em
  border: 2px solid darken($grey-light, 5)
  border-radius: 4px
  margin-bottom: 1em
  break-inside: avoid
  display: inline-block
  width: 100%

  h2,
  .box-title
    border-bottom: 1px solid darken($grey-light, 5)
    padding-bottom: 0.4em

  .box-noborder
    border: none
    padding-bottom: 0
    margin-bottom: 0

  .border
    padding-bottom: 0.4em
    margin-top: 0
    border-bottom: 1px solid darken($grey-light, 5)

  a:not([class^="icon"])
    @extend %anchor

.conf-title
  white-space: nowrap
  overflow: hidden

.detail-pair
  font-weight: 300
  font-size: 18px
  color: #232323
  margin-top: 20px

.detail-pair > strong
  display: block
  font-weight: 600
  font-size: 14px

Break words in detail-pair to prevent overflow

.category,
.box
  background: white
  padding: 1em
  border: 2px solid darken($grey-light, 5)
  border-radius: 4px
  margin-bottom: 1em
  break-inside: avoid
  display: inline-block
  width: 100%

  h2,
  .box-title
    border-bottom: 1px solid darken($grey-light, 5)
    padding-bottom: 0.4em

  .box-noborder
    border: none
    padding-bottom: 0
    margin-bottom: 0

  .border
    padding-bottom: 0.4em
    margin-top: 0
    border-bottom: 1px solid darken($grey-light, 5)

  a:not([class^="icon"])
    @extend %anchor

.conf-title
  white-space: nowrap
  overflow: hidden

.detail-pair
  font-weight: 300
  font-size: 18px
  color: #232323
  margin-top: 20px
  word-break: break-all

.detail-pair > strong
  display: block
  font-weight: 600
  font-size: 14px


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

Allow overflow-wrap anywhere in the error title

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


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

#spending-meter-cont
  position: relative

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

Set min height for tabs

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

#spending-meter-cont
  position: relative

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

.st--tabs
  .mdl-tabs__panel
    min-height: 272px


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

.map-container
  width: 100%
  map, .angular-google-map-container, google-map, .angular-google-map
    display: block
    height: 100%

  img // https://github.com/zurb/foundation/issues/112
    max-width: none
    height: auto

  #pac-input
    @include big-input(#888, #333, $clr-brick)
    @include big-input-static
    font-size: 1.5rem
    background: rgba(255,255,255,0.85)
    width: 50%
    margin-top: 1.2rem
    @media all and (max-width: 768px)
      width: 80%
    &:active, &:focus, &.active
      background: rgba(255,255,255, 1)

Fix small device width issue on google map embedding

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

.map-container
  width: 100%
  map, .angular-google-map-container, google-map, .angular-google-map
    display: block
    height: 100%
    width: 100%

  img // https://github.com/zurb/foundation/issues/112
    max-width: none
    height: auto

  #pac-input
    @include big-input(#888, #333, $clr-brick)
    @include big-input-static
    font-size: 1.5rem
    background: rgba(255,255,255,0.85)
    width: 50%
    margin-top: 1.2rem
    @media all and (max-width: 768px)
      width: 80%
    &:active, &:focus, &.active
      background: rgba(255,255,255, 1)


//.soundcloud-player-small
  margin:
    bottom: $medium-margin / 4

Add box shadow to SoundCloud iframe

//.soundcloud-player-small
  margin:
    bottom: $medium-margin / 4

iframe
  box-shadow: 0px 1px 1px rgba(darken($medium-gray, 30%), 0.1)


// Main SASS file.

// Color palette
@import colors
// Fonts
@import fonts

// Helpful CSS classes
@import helper_classes
// Styles for individual sections
@import sections/header/main
@import sections/projects/main
@import sections/contact
// Top nav bar
@import top_bar

*
  box-sizing: border-box

  &::before,
  &::after
    box-sizing: border-box

  overflow-x: hidden

body
  margin: 0
  font-family: 'Open Sans', sans-serif
  -webkit-font-smoothing: antialiased

h1,
h2,
h3,
h4,
h5,
h6
  font-family: 'PierSans', sans-serif
  font-weight: 700

h1,
h2
  font-size: 5vw

h3,
h4
  font-size: 4vw

h5,
h6
  font-size: 3.5vw

h1,
h5
  text-transform: uppercase

a
  color: $light-text-primary
  text-decoration: none

  &:visited
    color: $light-text-primary

section
  width: 100vw

  overflow: auto

  &.full
    // Account for height of top bar
    height: calc(100vh - 69px)

Remove x-overflow: hidden to fix shadow issues

// Main SASS file.

// Color palette
@import colors
// Fonts
@import fonts

// Helpful CSS classes
@import helper_classes
// Styles for individual sections
@import sections/header/main
@import sections/projects/main
@import sections/contact
// Top nav bar
@import top_bar

*
  box-sizing: border-box

  &::before,
  &::after
    box-sizing: border-box

body
  margin: 0
  font-family: 'Open Sans', sans-serif
  -webkit-font-smoothing: antialiased

h1,
h2,
h3,
h4,
h5,
h6
  font-family: 'PierSans', sans-serif
  font-weight: 700

h1,
h2
  font-size: 5vw

h3,
h4
  font-size: 4vw

h5,
h6
  font-size: 3.5vw

h1,
h5
  text-transform: uppercase

a
  color: $light-text-primary
  text-decoration: none

  &:visited
    color: $light-text-primary

section
  width: 100vw

  overflow: auto

  &.full
    // Account for height of top bar
    height: calc(100vh - 69px)


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

Add top when click on button

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


@import mixins
@import variables
@import branding

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

.producer-hero
  position: relative
  padding: 0

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

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

.producer-logo
  max-width: 220px

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

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

@import mixins
@import variables
@import branding

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

.producer-hero
  position: relative
  padding: 0

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

.producer-logo
  max-width: 220px

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


$white:        #ffffff
$almost-white: #f5f5f5
$gray-lighter: #e5e5e5
$gray-light:   #a6a7b3
$gray:         #727481
$gray-dark:    #383C4D
$black:        #24242D

$teal-light:   #58D3D8
$teal:         #409B9E

$green-light:  #8FE8B4
$green:        #67AB83

$lime-light:   #C6FC93

$yellow-light: #F3FC93

$red-light:    #F69BAE
$red:          #AB6775

Update SASS definition of branded red color

$white:        #ffffff
$almost-white: #f5f5f5
$gray-lighter: #e5e5e5
$gray-light:   #a6a7b3
$gray:         #727481
$gray-dark:    #383C4D
$black:        #24242D

$teal-light:   #58D3D8
$teal:         #409B9E

$green-light:  #8FE8B4
$green:        #67AB83

$lime-light:   #C6FC93

$yellow-light: #F3FC93

$red-light:    #FF9D9B
$red:          #DA5754


// Styling for login modal to style tabs
.login-modal
  background: #efefef
  .tabs-content
    background: #fff

Change styling for register modals

// Styling for login modal to style tabs
.reveal-modal.login-modal
  border-bottom-color: #efefef

.login-modal
  background: #efefef
  .tabs-content
    background: #fff
    padding-top: 10px


@import './style'

// ========================================================
// Redmine Dashboard UI - Nav boxed

.rui-nav
  display: table
  width: 100%

  > nav
    display: table-cell
    vertical-align: top
    width: 260px
    padding: 5px 15px 5px 0

    // theming
    border-right: 1px solid $frame-color

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

    a
      display: block
      padding: 7px 10px

      .help
        display: block
        font-weight: 300
        margin-top: 0.3em

        // theming
        font-size: 11px
        color: $primary-gray

      // theming
      &.active
        font-weight: bold
        background-color: $primary-paleblue

      // theming
      &:hover
        text-decoration: none
        background-color: $primary-brightblue
        outline: none
        color: $primary-white

        // theming
        .help
          color: $primary-white

      &:not(.focus)
        &::-moz-focus-inner
          padding: 0
          border: 0
        &:focus
          outline: 0

  > section
    display: table-cell
    vertical-align: top
    padding: 5px 0 5px 20px

    .rui-nav-pane
      display: none
      visibility: hidden

      &.active
        display: block
        visibility: visible

Remove browser focus reset on navigation

@import './style'

// ========================================================
// Redmine Dashboard UI - Nav boxed

.rui-nav
  display: table
  width: 100%

  > nav
    display: table-cell
    vertical-align: top
    width: 260px
    padding: 5px 15px 5px 0

    // theming
    border-right: 1px solid $frame-color

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

    a
      display: block
      padding: 7px 10px

      .help
        display: block
        font-weight: 300
        margin-top: 0.3em

        // theming
        font-size: 11px
        color: $primary-gray

      // theming
      &.active
        font-weight: bold
        background-color: $primary-paleblue

      // theming
      &:hover
        text-decoration: none
        background-color: $primary-brightblue
        outline: none
        color: $primary-white

        // theming
        .help
          color: $primary-white

  > section
    display: table-cell
    vertical-align: top
    padding: 5px 0 5px 20px

    .rui-nav-pane
      display: none
      visibility: hidden

      &.active
        display: block
        visibility: visible


@import '~styles/base'

.ThreadMedia
    display: flex
    margin-bottom: 4px

    &:not(.toggled)
        margin-right: 10px
        float: left

    &.toggled
        margin-bottom: 0.8em
        display: inline-block

    video, img
        max-width: 100%
        align-self: center

    .ThreadMedia--expanded
        display: inline-block
        // TODO: dynamic class setting on thread images; limit height
        max-height: calc(100vh - $header-height)

    .ThreadMedia__FullscreenIcon
        +clickable
        display: none
        position: absolute
        top: 0
        right: 0
        margin: 0

        .Icon
            text-shadow: 0 0 0 grey(7)

            &:hover
                text-shadow: 0 0 1px grey(8)

    .ThreadMedia--IWC:hover
        .ThreadMedia__FullscreenIcon
            display: initial

Add clickable icon to media

@import '~styles/base'

.ThreadMedia
    display: flex
    margin-bottom: 4px

    &:not(.toggled)
        margin-right: 10px
        float: left

    &.toggled
        margin-bottom: 0.8em
        display: inline-block

    video, img
        max-width: 100%
        align-self: center
        +clickable

    .ThreadMedia--expanded
        display: inline-block
        // TODO: dynamic class setting on thread images; limit height
        max-height: calc(100vh - $header-height)

    .ThreadMedia__FullscreenIcon
        +clickable
        display: none
        position: absolute
        top: 0
        right: 0
        margin: 0

        .Icon
            text-shadow: 0 0 0 grey(7)

            &:hover
                text-shadow: 0 0 1px grey(8)

    .ThreadMedia--IWC:hover
        .ThreadMedia__FullscreenIcon
            display: initial


.components--section-header
  position: relative
  padding-bottom: 8px

  &:before
    content: ''
    width: 20%
    height: 4px
    background-color: #F7901E
    position: absolute
    left: 0
    bottom: 0

  &.hide-border:before
    height: 0

  .title
    font-family: Roboto
    line-height: 25px
    font-size: 25px
    color: #F7901E
    display: block
    margin-bottom: 1.5rem
    font-weight: normal

    span
      font-weight: normal

  .subtitle
    font-size: 16px
    color: #464646
    line-height: 22px
    font-weight: normal

Fix space between title and subtitle

.components--section-header
  position: relative
  padding-bottom: 8px

  &:before
    content: ''
    width: 20%
    height: 4px
    background-color: #F7901E
    position: absolute
    left: 0
    bottom: 0

  &.hide-border:before
    height: 0

  .title
    font-family: Roboto
    line-height: 25px
    font-size: 25px
    color: #F7901E
    display: block
    margin-bottom: 1.5rem
    font-weight: normal

    span
      font-weight: normal

  .subtitle
    padding: 1.5rem 0 0 0
    font-size: 16px
    color: #464646
    line-height: 22px
    font-weight: normal


@import '_partials/card_forum'
@import '_partials/forms'
@import '_partials/post'
@import '_partials/user'

.btn--plus
  padding-left: 40px
  position: relative
  &:before
    +font-size(35)
    left: 15px
    position: absolute
    top: 4px

.dropdown__value
  padding: 6px 40px 6px 10px

  &:after
    right: 10px
    top: 40%

  .inverted &
    +font-size(14)
    min-width: 125px
    padding-bottom: 2px
    padding-top: 2px

    &:after
      top: 13px

.thorntree-search
  position: relative
  top: -3px

  .input--text
    background: #fff
  .search__button
    position: absolute
    right: 4px
    top: 4px

    &:hover
      background: none

.row--compose
  padding-top: 17px
  .copy--h3
    margin-bottom: 12px
    text-align: center

.thorntree
  // Hijacking this here where it'll be scoped to thorntree. The idea is to eventually move this out and make copy--body be 16px everywhere.
  .copy--body
    +font-size(16)

.row__inner--secondary
  .place-title
    margin-right: 5px

  .row__title--secondary + .badge
    margin-right: 5px
    margin-top: 5px

Remove redundant thorn tree .copy--body override.

@import '_partials/card_forum'
@import '_partials/forms'
@import '_partials/post'
@import '_partials/user'

.btn--plus
  padding-left: 40px
  position: relative
  &:before
    +font-size(35)
    left: 15px
    position: absolute
    top: 4px

.dropdown__value
  padding: 6px 40px 6px 10px

  &:after
    right: 10px
    top: 40%

  .inverted &
    +font-size(14)
    min-width: 125px
    padding-bottom: 2px
    padding-top: 2px

    &:after
      top: 13px

.thorntree-search
  position: relative
  top: -3px

  .input--text
    background: #fff
  .search__button
    position: absolute
    right: 4px
    top: 4px

    &:hover
      background: none

.row--compose
  padding-top: 17px
  .copy--h3
    margin-bottom: 12px
    text-align: center

.row__inner--secondary
  .place-title
    margin-right: 5px

  .row__title--secondary + .badge
    margin-right: 5px
    margin-top: 5px


@import ../../styles/lib

.RegionTools
  position: absolute
  top: rem(5)
  right: rem(5)
  color: #aaa

.no-touch .RegionTools button:hover .SVGIcon > g
  stroke: black

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

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

.BlockPlaceholder + .RegionTools
  display: none

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

@media(min-width: #{$break-2})
  .no-touch .BlockRemove > .DeleteIcon
    transform-origin: center center
    transition-duration: $speed, $speed, $speed2
  .no-touch .BlockRemove:hover > .DeleteIcon
    transition-delay: 0.5s, 0.5s, (0.5s + $speed)
    transform: rotate(360deg)

Hide the drag handler on mobile.

@import ../../styles/lib

.RegionTools
  position: absolute
  top: rem(5)
  right: rem(5)
  color: #aaa

.no-touch .RegionTools button:hover .SVGIcon > g
  stroke: black

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

.no-touch .RegionTools .DragHandler
  display: block

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

.BlockPlaceholder + .RegionTools
  display: none

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

@media(min-width: #{$break-2})
  .no-touch .BlockRemove > .DeleteIcon
    transform-origin: center center
    transition-duration: $speed, $speed, $speed2
  .no-touch .BlockRemove:hover > .DeleteIcon
    transition-delay: 0.5s, 0.5s, (0.5s + $speed)
    transform: rotate(360deg)


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

Set orange as primary color for Bulma

@import '../node_modules/bulma/sass/utilities/initial-variables'

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

$orange: #FF5722
$orange-invert: #fff

$primary: $orange
$primary-invert: $orange-invert


.settings
  height: 100%
  width: 100%
  position: absolute
  z-index: 4
  left: 105%
  top: 0
  transition: 0.3s all ease-out

  background-image: url('/assets/background.png')
  .darkmode &
    background-image: url('/assets/background-darkmode.png')
    color: $darkmode-text

  padding: 1em
  border-left: 8px solid #29b

  #close-settings
    position: absolute
    top: 0
    right: 0
    padding: 0.8em 1em
    border: 0
    color: #444
    .darkmode &
      color: $darkmode-text
    background: none
    transition: all 0.1s ease-out
    &:hover
      color: #29b

  h1
    .darkmode &
      color: #f7f7f7
    color: #444
    margin-bottom: 1em

  .setting
    margin-bottom: 1em
    padding-bottom: 1em
    border-bottom: 2px solid #ccc
    display: flex
    label
      margin-right: 0.5em

    input[type=checkbox]
      position: relative
      top: 0.1em

    #language-selector
      max-width: 200px
      .darkmode &
        color: #333

  .changelog
    color: #29b

  &.open
    left: 0

Use transforms for animating settings panel

.settings
  height: 100%
  width: 100%
  position: absolute
  z-index: 4
  transform: translateX(100%)
  top: 0
  transition: 0.5s all ease

  background-image: url('/assets/background.png')
  .darkmode &
    background-image: url('/assets/background-darkmode.png')
    color: $darkmode-text

  padding: 1em
  border-left: 8px solid #29b

  #close-settings
    position: absolute
    top: 0
    right: 0
    padding: 0.8em 1em
    border: 0
    color: #444
    .darkmode &
      color: $darkmode-text
    background: none
    transition: all 0.1s ease-out
    &:hover
      color: #29b

  h1
    .darkmode &
      color: #f7f7f7
    color: #444
    margin-bottom: 1em

  .setting
    margin-bottom: 1em
    padding-bottom: 1em
    border-bottom: 2px solid #ccc
    display: flex
    label
      margin-right: 0.5em

    input[type=checkbox]
      position: relative
      top: 0.1em

    #language-selector
      max-width: 200px
      .darkmode &
        color: #333

  .changelog
    color: #29b

  &.open
    transform: none


// 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 custon forms from foundation

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


/**
 * RESET
 */

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

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

a
  -webkit-touch-callout: none

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

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal

Add default body background colour of white for the benefit of the visual regression testing tool.

/**
 * RESET
 */

body
  background-color: white

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

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

a
  -webkit-touch-callout: none

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

ul,
ol
  list-style: none

img
  width: 100%
  height: auto
  display: block

i
  font-style: normal


@import '../styles'

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

#content-main
  display: none
  overflow: auto

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

Fix extra scrollbar in IE

@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


.navbar-nav.navbar-right
  margin-right: 0

.navbar
  .logo
    position: relative
    height: 38px
    width: 160px
    margin: 15px 0 0 15px
    .logo-title
      display: none
    .logo-subtitle
      position: absolute
      bottom: 0
      left: 44px
      font-size: 10px
      color: #000
      font-weight: bold
    img
      vertical-align: top

  .navbar-right
    margin-right: 0 !important

  .sign-in, .sign-out
    color: #000 !important
    transition: opacity .2s linear
    &:hover
      opacity: .6

Align horizontally left and right parts in the nav bar

.navbar-nav.navbar-right
  margin-right: 0
  line-height: 28px

  li
    a
      line-height: 28px

.navbar
  .logo
    position: relative
    height: 38px
    width: 160px
    margin: 15px 0 0 15px
    .logo-title
      display: none
    .logo-subtitle
      position: absolute
      bottom: 0
      left: 44px
      font-size: 10px
      color: #000
      font-weight: bold
    img
      vertical-align: top

  .navbar-right
    margin-right: 0 !important

  .sign-in, .sign-out
    color: #000 !important
    transition: opacity .2s linear
    &:hover
      opacity: .6


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

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

  &::selection
    cursor: default

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

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

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

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

Use cannon.png for div image

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

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

  &::selection
    cursor: default

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

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

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

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


a.preview-link
  display: block

  .play-button
    display: none
    position: absolute
    left: 50%
    top: 50%
    width: 0

    .arrow
      color: black
      font-size: 80px
      margin-left: -37px
      margin-top: -79px

  &:hover
    text-decoration: none

    .play-button
      display: block

Adjust color of the play prompt triangle to match color thumbnails better

a.preview-link
  display: block

  .play-button
    display: none
    position: absolute
    left: 50%
    top: 50%
    width: 0

    .arrow
      color: white
      font-size: 80px
      margin-left: -37px
      margin-top: -79px
      text-shadow: 2px 2px 5px black

  &:hover
    text-decoration: none

    .play-button
      display: block


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

Add missing variable needed for compilation.

// 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})"


// Properties relating to text

@import colours
@import fonts

body
  color: var(--text-colour)
  font-family: $text-font, serif
  font-weight: 400
  line-height: 1.618em
  -webkit-text-size-adjust: none

strong, b
  font-weight: bold

em, i
  font-style: italic

sub
  position: relative
  top: 0.5em

sup
  position: relative
  top: -0.5em

p code
  background: var(--inline-code-background-colour)
  border-radius: .35em
  border: solid 2px var(--inline-code-border-colour)
  font-family: "Courier New", monospace
  margin: 0 .1em
  padding: .1em .2em
  white-space: pre

a
  text-decoration-skip-ink: auto
  font-weight: bold

  &:link
    color: var(--link-colour)
    text-decoration-color: var(--link-underline-colour)

    &:hover, &:focus
      color: var(--active-link-colour)
      text-decoration-color: var(--active-link-underline-colour)

  &:visited
    color: var(--visited-link-colour)
    text-decoration-color: var(--visited-link-underline-colour)

    &:hover, &:focus
      color: var(--active-visited-link-colour)
      text-decoration-color: var(--active-visited-link-underline-colour)

Bring back transitions for links

// Properties relating to text

@import colours
@import fonts

body
  color: var(--text-colour)
  font-family: $text-font, serif
  font-weight: 400
  line-height: 1.618em
  -webkit-text-size-adjust: none

strong, b
  font-weight: bold

em, i
  font-style: italic

sub
  position: relative
  top: 0.5em

sup
  position: relative
  top: -0.5em

p code
  background: var(--inline-code-background-colour)
  border-radius: .35em
  border: solid 2px var(--inline-code-border-colour)
  font-family: "Courier New", monospace
  margin: 0 .1em
  padding: .1em .2em
  white-space: pre

a
  text-decoration-skip-ink: auto
  font-weight: bold
  transition: all 150ms ease-in-out

  &:link
    color: var(--link-colour)
    text-decoration-color: var(--link-underline-colour)

    &:hover, &:focus
      color: var(--active-link-colour)
      text-decoration-color: var(--active-link-underline-colour)

  &:visited
    color: var(--visited-link-colour)
    text-decoration-color: var(--visited-link-underline-colour)

    &:hover, &:focus
      color: var(--active-visited-link-colour)
      text-decoration-color: var(--active-visited-link-underline-colour)


.l-container
  display: flex

  width: 1000px

  margin: 0 auto
  padding: 0 10px

#page
  display: flex

  min-height: 100%
  min-height: calc(100vh - 40px)

#page-content
  display: table-row
  flex: 2

  padding-top: 20px

  section
    display: table-row

Add 10px padding on .l-container.

.l-container
  display: flex

  width: 1000px

  margin: 0 auto
  padding: 10px

#page
  display: flex

  min-height: 100%
  min-height: calc(100vh - 40px)

#page-content
  display: table-row
  flex: 2

  padding-top: 20px

  section
    display: table-row


/**
 *
 */
.minimap
	@include position(absolute, null null 24px 24px)

	width:  192px
	height: 108px

	background-size:  cover
	background-color: $white

	border:        8px solid $white
	border-radius: 2px

	&.hidden
		display: none

	box-shadow: 2px 2px 4px $dove-gray

	.cursor
		// This is so that the cursor will appear as if top of the markers
		z-index:  100
		position: absolute

		max-width:  192px
		max-height: 108px

		cursor:           pointer
		border-radius:    2px
		background-color: rgba($voodoo, 0.4)

	.marker
		pointer-events: none

		@include position(absolute)
		@include transition(all, 0.2s)

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

Add dank hotfix to tickets overflowing in minimap

/**
 *
 */
.minimap
	@include position(absolute, null null 24px 24px)

	width:  192px
	height: 108px
	overflow: hidden
	background-size:  cover
	background-color: $white

	border:        8px solid $white
	border-radius: 2px

	&.hidden
		display: none

	box-shadow: 2px 2px 4px $dove-gray

	.cursor
		// This is so that the cursor will appear as if top of the markers
		z-index:  100
		position: absolute

		max-width:  192px
		max-height: 108px

		cursor:           pointer
		border-radius:    2px
		background-color: rgba($voodoo, 0.4)

	.marker
		pointer-events: none

		@include position(absolute)
		@include transition(all, 0.2s)

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


.info
	width:      100%
	height:     100%
	max-width:  100%
	margin-top: 0px
	color: 		$white

	.infocarousel
		position:static !important
		width:      100%
		height:     100%

		.slide1
			padding: 	85px 0px 0px 95px
			z-index: 	9002

			p
				padding-bottom: 14px

		.slide2
			z-index: 	9004

Add sass styling to slider balls

.info
	width:      100%
	height:     100%
	max-width:  100%
	margin-top: 0px
	color: 		$white

	.infocarousel
		position:static !important
		width:      100%
		height:     100%

		.slider-decorator-0
			visibility: hidden

		.slider-decorator-1
			visibility: hidden

		.slider-decorator-2

			button
				color: 		$white 				!important
				font-size: 	70px				!important
				padding: 	0px 5px 0px 5px		!important

		.slide1
			padding: 	85px 0px 0px 95px
			z-index: 	9002

			p
				padding-bottom: 14px

		.slide2
			z-index: 	9004


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

.aae-album
  background-color: $white
  position: relative

  .aae-album-wrapper
    margin: 0 auto
    padding: $wrapper-padding
    width: $wrapper-width-wide
    display: flex
    flex-flow: row wrap
    justify-content: center

    .aae-album-img-wrapper
      width: 200px
      height: 200px
      margin: 0 10px 50px
      background-position: center center
      background-size: cover
      border: none
      outline: none
      text-decoration: none
      font-size: 0
      line-height: 0

Remove width and edit margin

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

.aae-album
  background-color: $white
  position: relative

  .aae-album-wrapper
    margin: 0 auto
    padding: $wrapper-padding
    display: flex
    flex-flow: row wrap
    justify-content: center

    .aae-album-img-wrapper
      width: 200px
      height: 200px
      margin: 10px
      background-position: center center
      background-size: cover
      border: none
      outline: none
      text-decoration: none
      font-size: 0
      line-height: 0


$color-presidents: #CD853F

.presidents-header
  background: $color-presidents

// Uses .people-grid-list from _people.sass
.president-list
	columns: 1

.archive-section.president-section.decade, .president-cta
	// Row item
	flex-basis: 100%
	@include respond-up(tab-port)
		flex-basis: 66.666%
	@include respond-up(tab-land)
		flex-basis: 33.333%

.president-year, .president-person
	float: left

.president-year
	width: 40%
	a
		@include link-colour($color-link)
		@extend a
.president-person
	width: 60%
	&.empty
		color: $color-grey-dark

.name-unknown
	margin-top: auto
	margin-bottom: auto

.president-people
  @include grid-x-col(10)

.president-cta
  @include grid-x-col(6)

Improve styling; have 'missing' box be full width

$color-presidents: #CD853F

.presidents-header
  background: $color-presidents

// Uses .people-grid-list from _people.sass
.president-list
	columns: 1

.archive-section.president-section.decade, .president-cta
	// Row item
	flex-basis: 100%
	@include respond-up(tab-port)
		flex-basis: 66.666%
	@include respond-up(tab-land)
		flex-basis: 33.333%

.president-year, .president-person
	float: left

.president-year
	width: 30%
	a
		@include link-colour($color-link)
		@extend a

.president-person
	width: 70%
	&.empty
		color: $color-grey-dark

.name-unknown
	margin-top: auto
	margin-bottom: auto

.president-people
  @include grid-x-col(10)


---
---

@import "../_sass/reset"
@import "../_sass/skin"
@import "../_sass/code-styles"

// media queries
@import "../_sass/base"
@import "../_sass/tablet"
@import "../_sass/desktop"

Add css styling for quotes.

---
---

@import "../_sass/reset"
@import "../_sass/skin"
@import "../_sass/code-styles"

// media queries
@import "../_sass/base"
@import "../_sass/tablet"
@import "../_sass/desktop"

blockquote
  background: #f9f9f9
  border-left: 10px solid #ccc
  margin: 1.5em 10px
  padding: 0.5em 10px
  quotes: none

blockquote p
  display: inline


.protein-summary
  .progress
    margin-bottom: 0

    .progress-text
      $col: #bb4946
      position: absolute
      text-shadow: 1px 0 0 $col, 0 1px 0 $col, -1px 0 0 $col, 0 -1px 0 $col, 0 0 1px $col, 0 0 3px $col
      margin-left: auto
      margin-right: auto
      left: 0
      right: 0

  dt::after
    content: ':'

  .gene-wide-data
    dl
      margin: 0

    .strand
      float: right
      margin-right: 20%

      dd
        margin-left: 70px
      dt
        width: 70px

  .dl-horizontal
    dd
      margin-left: 125px
    dt
      width: 125px
      text-align: left

Use black color for protein disorder text

.protein-summary
  .progress
    margin-bottom: 0

    .progress-text
      $col: #f5f5f5
      color: black
      position: absolute
      text-shadow: 0 0 5px $col, 0 0 15px $col
      margin-left: auto
      margin-right: auto
      left: 0
      right: 0

  dt::after
    content: ':'

  .gene-wide-data
    dl
      margin: 0

    .strand
      float: right
      margin-right: 20%

      dd
        margin-left: 70px
      dt
        width: 70px

  .dl-horizontal
    dd
      margin-left: 125px
    dt
      width: 125px
      text-align: left


.components--section-primary
  margin-top: 70px

  article
    margin-top: 16px
    position: relative

Fix css desktop version from home section

.components--section-primary
  margin-top: 70px

  article
    margin-top: 16px
    position: relative

@media screen and (min-width: 769px)
  .components--section-primary
    overflow: hidden
    .components--silhouette
      height: 370px
      right: 0


// Load the sprites module from compass
@import "compass/utilities/sprites/sprite-img"

$background: sprite-map("background/*.png")

Comment and leave as an example a sprite example

// Load the sprites module from compass
@import "compass/utilities/sprites/sprite-img"

//$background: sprite-map("background/*.png")


.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("/assets/images/devtools/grid-vertical.svg")
.DT-horizontal-grid
  background-image: url("/assets/images/devtools/grid-horizontal.svg")

Fix asset paths for the dev tool grids

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


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

body.authors-index
  .author
    line-height: 2.2
    .avatar
      float: left
      width: 40
      margin-right: 0.5em
      border-radius: 50%

Fix styling bug due to floating.

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

body.authors-index
  .author
    clear: both
    line-height: 2.2
    .avatar
      float: left
      width: 40
      margin-right: 0.5em
      border-radius: 50%


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

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

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

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

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

// Linkified Container
// ===================
@import 'compass/typography/links/unstyled-link'
a.linkified_element
  +unstyled-link
tr.linkified_container:hover
  background-color: #DDF4FB

Add general purpose .right CSS class.

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

// Misc
// ====
.right
  text-align: right

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

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

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

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

// Linkified Container
// ===================
@import 'compass/typography/links/unstyled-link'
a.linkified_element
  +unstyled-link
tr.linkified_container:hover
  background-color: #DDF4FB


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

body
  .author
    clear: both
    line-height: 2.2
    .avatar
      float: left
      width: 70px
      height: 70px
      margin-right: 0.5em
      border-radius: 50%

Break authors list in three columns.

// 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: 2.2
    .avatar
      float: left
      width: 70px
      height: 70px
      margin-right: 0.5em
      border-radius: 50%
      margin-bottom: 1.5%
      &.inactive
        opacity: .75


@import 'styles/colors'

.container
  padding: 5rem 2.5rem
  h1
    margin: 1rem 0
    text-transform: uppercase
    overflow-wrap: anywhere
    hyphens: auto
  p
    font-size: 1.1rem
    margin: 1.1rem 0

.buttonsContainer
  display: grid
  grid-template-columns: auto auto
  gap: 1rem
  justify-content: center

.matchMedia
  h1
    font-size: 6vw
  a.matchMedia
    font-size: 3.5vw
    min-width: 100%
  .buttonsContainer
    grid-template-columns: 1fr
    gap: unset

Update a.matchMedia buttons to be justified to the center

@import 'styles/colors'

.container
  padding: 5rem 2.5rem
  h1
    margin: 1rem 0
    text-transform: uppercase
    overflow-wrap: anywhere
    hyphens: auto
  p
    font-size: 1.1rem
    margin: 1.1rem 0

.buttonsContainer
  display: grid
  grid-template-columns: auto auto
  gap: 1rem
  justify-content: center

.matchMedia
  h1
    font-size: 6vw
  a.matchMedia
    font-size: 3.5vw
    min-width: 100%
    justify-content: center
  .buttonsContainer
    grid-template-columns: 1fr
    gap: unset


// Library
@import normalize
@import foundation/foundation_and_overrides

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

@import font-awesome
@import mapbox
@import outdatedbrowser/outdatedBrowser
@import vex
@import vex-theme-plain
@import magnific-popup
@import fotorama
@import fullcalendar
@import mediaelement_rails.css

// Globals
@import globals/mixins
@import globals/settings
@import nprogress

// Base
@import base/base
@import base/forms

// Layout
@import layout/page

// Pages
@import pages/homepage
@import pages/contact
@import pages/blog
@import pages/search

// Modules
@import modules/header
@import modules/logo
@import modules/language
@import modules/menu
@import modules/adminbar
@import modules/ribbon
// @import modules/breadcrumb
@import modules/background
@import modules/comment
@import modules/social
@import modules/prev_next
@import modules/footer
@import modules/sticky_footer
@import modules/404

// custom_Plugins
// @import custom_plugins/devkit
@import custom_plugins/mapbox
@import custom_plugins/mapbox-popup
@import custom_plugins/alert
@import custom_plugins/autocomplete
@import custom_plugins/fotorama
@import custom_plugins/mediaelement
@import custom_plugins/cookie_cnil
@import custom_plugins/maintenance

Fix bug with missing mediaelement style in production

// Library
@import normalize
@import foundation/foundation_and_overrides

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

@import font-awesome
@import mapbox
@import outdatedbrowser/outdatedBrowser
@import vex
@import vex-theme-plain
@import magnific-popup
@import fotorama
@import fullcalendar
@import mediaelement_rails/mediaelementplayer

// Globals
@import globals/mixins
@import globals/settings
@import nprogress

// Base
@import base/base
@import base/forms

// Layout
@import layout/page

// Pages
@import pages/homepage
@import pages/contact
@import pages/blog
@import pages/search

// Modules
@import modules/header
@import modules/logo
@import modules/language
@import modules/menu
@import modules/adminbar
@import modules/ribbon
// @import modules/breadcrumb
@import modules/background
@import modules/comment
@import modules/social
@import modules/prev_next
@import modules/footer
@import modules/sticky_footer
@import modules/404

// custom_Plugins
// @import custom_plugins/devkit
@import custom_plugins/mapbox
@import custom_plugins/mapbox-popup
@import custom_plugins/alert
@import custom_plugins/autocomplete
@import custom_plugins/fotorama
@import custom_plugins/mediaelement
@import custom_plugins/cookie_cnil
@import custom_plugins/maintenance


@import compass/typography/text/replacement

=icon-text($ident, $icon: $ident, $size: 16)
  .icon-#{$ident}-text
    +replace-text-with-dimensions("#{$size}x#{$size}/#{$icon}.png")
    display: block
    float: left

=icon($ident, $size: 16)
  background-image: image-url("#{$size}x#{$size}/#{$ident}.png")

=icon-class($ident, $icon: $ident, $size: 16)
  .contextual
    .icon-#{$ident}
      +icon($icon, $size)

.contextual
  .icon
    background-repeat: no-repeat
    padding-left: 20px
    text-decoration: none
    font-size: 16px
    color: $link_color
    &:hover
      color: $link_color_hover
    background-position: 0px 0px
    display: inline

+icon-class("add")
+icon-class("delete")
+icon-class("edit")
+icon-class("index")
+icon-class("show")

+icon-text("add")
+icon-text("delete")
+icon-text("edit")
+icon-text("index")
+icon-text("show")

Fix bad icons overlaying contextual link.

@import compass/typography/text/replacement

=icon-text($ident, $icon: $ident, $size: 16)
  .icon-#{$ident}-text
    +replace-text-with-dimensions("#{$size}x#{$size}/#{$icon}.png")
    display: block
    float: left

=icon($ident, $size: 16)
  background-image: image-url("#{$size}x#{$size}/#{$ident}.png")

=icon-class($ident, $icon: $ident, $size: 16)
  .contextual
    .icon.icon-#{$ident}
      +icon($icon, $size)

.contextual
  .icon
    background-repeat: no-repeat
    background-image: none
    padding-left: 20px
    text-decoration: none
    font-size: 16px
    color: $link_color
    &:hover
      color: $link_color_hover
    background-position: 0px 0px
    display: inline

+icon-class("add")
+icon-class("delete")
+icon-class("edit")
+icon-class("index")
+icon-class("show")

+icon-text("add")
+icon-text("delete")
+icon-text("edit")
+icon-text("index")
+icon-text("show")


// Colors
$blue: #4DB3CF
$dark-blue: #017499
$red: #dd3939
$red-light: mix(lighten($red,30),white)
$green: #95b926
$orange: #ec9a0a
$light-grey: lighten(black,95)
$medium-grey: #a2a2a2
$dark-grey: #2b3f44
$table-bg: #f9f9f9
$link-grey: #6f6f6f

// borders
$border: lighten(black,90)
$border-light: rgba(white, .1)
$border-dark: rgba(black, .1)

// Sizes
$padding: 2rem
$padding-em: 2em
$br: 4px

// Screen
$small: 400px
$medium: 800px
$large: 1200px
$container-width: 50rem
$container-width-em: 50em

// Fonts
$font: Helvetica, sans-serif
$f-small: 13px
$f-normal: 15px
$f-large: 18px

Make attribute table background slightly darker

// Colors
$blue: #4DB3CF
$dark-blue: #017499
$red: #dd3939
$red-light: mix(lighten($red,30),white)
$green: #95b926
$orange: #ec9a0a
$light-grey: lighten(black,95)
$medium-grey: #a2a2a2
$dark-grey: #2b3f44
$table-bg: #f4f4f4
$link-grey: #6f6f6f

// borders
$border: lighten(black,90)
$border-light: rgba(white, .1)
$border-dark: rgba(black, .1)

// Sizes
$padding: 2rem
$padding-em: 2em
$br: 4px

// Screen
$small: 400px
$medium: 800px
$large: 1200px
$container-width: 50rem
$container-width-em: 50em

// Fonts
$font: Helvetica, sans-serif
$f-small: 13px
$f-normal: 15px
$f-large: 18px


#account, #account-devise
  #account-nav
    .upload-quota
      .more
        font-size: 0.8em

      .used, .quota
        position: relative
        top: -8px
        font-size: 0.8em
        padding: 2px

      .used
        float: left

      .quota
        float: right

  #photographs-nav
    button.new-collection
      margin:
        top: 10px

  #account-dashboard
    ol.notifications
      width: 100%
      list-style: none
      margin: 0

      li
        padding: 10px
        margin-bottom: 10px
        @include box-shadow

        &.read
          opacity: 0.8

        &:nth-child(even)
          background: $body-bg - rgb(2,2,2)

        .image
          float: left
          width: 50px
          height: 50px
          margin:
            right: 10px

        .text
          float: left
          .subject, time
            display: block

          time
            color: $header-font-color + #333

  .panel:not(.callout)
    @include white-box

  fieldset
    margin-top: 10px
    border: none

  .delete-account
    float: right

Remove fade from read notifications in dashboard

#account, #account-devise
  #account-nav
    .upload-quota
      .more
        font-size: 0.8em

      .used, .quota
        position: relative
        top: -8px
        font-size: 0.8em
        padding: 2px

      .used
        float: left

      .quota
        float: right

  #photographs-nav
    button.new-collection
      margin:
        top: 10px

  #account-dashboard
    ol.notifications
      width: 100%
      list-style: none
      margin: 0

      li
        padding: 10px
        margin-bottom: 10px
        @include box-shadow

        &:nth-child(even)
          background: $body-bg - rgb(2,2,2)

        .image
          float: left
          width: 50px
          height: 50px
          margin:
            right: 10px

        .text
          float: left
          .subject, time
            display: block

          time
            color: $header-font-color + #333

  .panel:not(.callout)
    @include white-box

  fieldset
    margin-top: 10px
    border: none

  .delete-account
    float: right


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

// ----- Headings ----- //

h1, h2, h3,
h4, h5, h6
  font-family: $c-header-fontFamily
  font-weight: bold

h1, .c-h1, %c-h1
  font-size: rem(40px)

h2, .c-h2, %c-h2
  font-size: rem(35px)

h3, .c-h3, %c-h3
  font-size: rem(30px)

h4, .c-h4, %c-h4
  font-size: rem(25px)

h5, .c-h5, %c-h5
  font-size: rem(20px)

h6, .c-h6, %c-h6
  font-size: rem(16px)

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

%c-center, .c-center
  text-align: center

%c-condensed, .c-condensed
  font-size: 85%

%c-lead, .c-lead
  font-size: 125%

%c-shout, .c-shout
  text-transform: uppercase

Fix typo with the core - content condensed submodule

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

// ----- Headings ----- //

h1, h2, h3,
h4, h5, h6
  font-family: $c-header-fontFamily
  font-weight: bold

h1, .c-h1, %c-h1
  font-size: rem(40px)

h2, .c-h2, %c-h2
  font-size: rem(35px)

h3, .c-h3, %c-h3
  font-size: rem(30px)

h4, .c-h4, %c-h4
  font-size: rem(25px)

h5, .c-h5, %c-h5
  font-size: rem(20px)

h6, .c-h6, %c-h6
  font-size: rem(16px)

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

%c-center, .c-center
  text-align: center

%c-condense, .c-condense
  font-size: 85%

%c-lead, .c-lead
  font-size: 125%

%c-shout, .c-shout
  text-transform: uppercase


@import ../../styles/lib

.Completer
  +sans-typeset
  position: fixed
  z-index: $z-completer
  width: 100%
  height: rem(153)
  overflow-x: hidden
  overflow-y: auto
  -webkit-overflow-scrolling: touch

@media(min-width: #{$break-2})
  .Completer
    height: rem(320)
    max-width: rem(240)

Update a style for emoji completer on mobile.

@import ../../styles/lib

.Completer
  +sans-typeset
  z-index: $z-completer
  width: 100%
  height: rem(153)
  overflow-x: hidden
  overflow-y: auto
  -webkit-overflow-scrolling: touch

@media(min-width: #{$break-2})
  .Completer
    height: rem(320)
    max-width: rem(240)
    position: fixed


// Styling for login modal to style tabs
.login-modal
  background: #efefef
  .tabs-content
    background: #fff

Change styling for register modals

// Styling for login modal to style tabs
.reveal-modal.login-modal
  border-bottom-color: #efefef

.login-modal
  background: #efefef
  .tabs-content
    background: #fff
    padding-top: 10px


.card
  background-color: get-color(air)
  border-radius: 4px
  box-shadow: 0 1px 2px 0 get-color((color: dark, opacity: .1))
  position: relative
  transition: box-shadow .2s ease-in-out
  width: 100%

  &--school-big
    margin-top: 45px
    padding-top: 0
    text-align: center

  &--teacher
    margin-top: 40px
    padding-top: 0
    text-align: center

  &--list
    float: right
    margin-top: 0
    width: calc(100% - 35px)

  &:hover
    box-shadow: 0 4px 8px 0 get-color((color: dark, opacity: .1))

  +media($breakpoint-medium)
    &--school
      text-align: center

    &--teacher
      float: none
      margin-top: 35px
      padding-left: 0
      width: 100%

  +media($breakpoint-normal)
    margin-bottom: 0

Remove shadow on card hover

.card
  background-color: get-color(air)
  border-radius: 4px
  box-shadow: 0 1px 2px 0 get-color((color: dark, opacity: .1))
  position: relative
  transition: box-shadow .2s ease-in-out
  width: 100%

  &--school-big
    margin-top: 45px
    padding-top: 0
    text-align: center

  &--teacher
    margin-top: 40px
    padding-top: 0
    text-align: center

  &--list
    float: right
    margin-top: 0
    width: calc(100% - 35px)

  +media($breakpoint-medium)
    &--school
      text-align: center

    &--teacher
      float: none
      margin-top: 35px
      padding-left: 0
      width: 100%

  +media($breakpoint-normal)
    margin-bottom: 0


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

.navigation
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green

.post-title
  a
    border-bottom: 2px solid white
    &:hover
      color: $matcha-green
      border-bottom: 2px solid $matcha-green

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

.recent-posts
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green
      border-bottom: 1px solid $matcha-green

.footer-tags
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green

Remove white border for index post titles

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

.navigation
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green

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

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

.recent-posts
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green
      border-bottom: 1px solid $matcha-green

.footer-tags
  a
    +transition(all .1s ease-in-out)
    &:hover
      color: $matcha-green


$link-color: $primary-color
$link-hover-color: $link-color
$link-active-color: $link-hover-color
$border-color: #FFF
$menu-font-color: #FFF
$menu-bg-color: $secondary-color

// Responsive
$menu-breakpoint-one: 1210px
$menu-breakpoint-two: 984px
$menu-breakpoint-three: 480px
$menu-breakpoint-four: 320px

// Nprogress transitions
$nprogress-color: $secondary-color
$nprogress-height: 2px
$nprogress-zindex: 10100

// logo
$logo_width: 200px

// Footer
$footer-height: 253px

// Help
// $primary-color: #0c708d;
// $secondary-color: #ee732a;
// $tercery-color: #614394;

Increase height for nprogress bar

$link-color: $primary-color
$link-hover-color: $link-color
$link-active-color: $link-hover-color
$border-color: #FFF
$menu-font-color: #FFF
$menu-bg-color: $secondary-color

// Responsive
$menu-breakpoint-one: 1210px
$menu-breakpoint-two: 984px
$menu-breakpoint-three: 480px
$menu-breakpoint-four: 320px

// Nprogress transitions
$nprogress-color: $secondary-color
$nprogress-height: 5px
$nprogress-zindex: 10100

// logo
$logo_width: 200px

// Footer
$footer-height: 253px

// Help
// $primary-color: #0c708d;
// $secondary-color: #ee732a;
// $tercery-color: #614394;


// Utility
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// Clear a float with .clearfix
.clearfix
	*zoom: 1

	&:after
		clear: both

	&:after,
	&:before
		content: ' ' // The space content is one way to avoid an Opera bug.
		display: table

// Float either direction
.float-left
	float: left

.float-right
	float: right

Remove support only for IE 6/7

// Utility
// ––––––––––––––––––––––––––––––––––––––––––––––––––

// Clear a float with .clearfix
.clearfix

	&:after
		clear: both

	&:after,
	&:before
		content: ' ' // The space content is one way to avoid an Opera bug.
		display: table

// Float either direction
.float-left
	float: left

.float-right
	float: right


.pagination
  background: white
  cursor: default
  margin-right: auto
  margin-left: auto
  a, span, em
    padding: 4px
    display: block
    float: left
    margin-right: 5px
    span
      padding: 0
      margin-right: 0
      border: 0
  .disabled
    color: #999999
    border: 1px solid #dddddd
  .current
    font-style: normal
    font-weight: bold
    background: #00ACCF
    color: white
    border: 1px solid #00ACCF
  a
    text-decoration: none
    color: #00ACCF
    border: 1px solid #00ACCF
    &:hover, &:focus
      color: #000033
      border-color: #000033
  .page_info
    background: #2e6ab1
    color: white
    padding: 0.4em 0.6em
    width: 22em
    margin-bottom: 0.3em
    text-align: center
    b
      color: #000033
      background: #2e6ab1 + 60
      padding: 0.1em 0.25em
  /* self-clearing method:
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden
  * html &
    height: 1%
  *:first-child+html &
    overflow: hidden

@media only screen and (max-width: 970px)
  .pagination
    width: 85% !important

@media only screen and (max-width: 390px)
  .pagination
    width: 100% !important

Remove unnecessary media queries for pagination


.explorer-list
  .list-group-item
    &.list-view-pf-expand-active
      padding-bottom: 0

    .power-icon
      cursor: default

  .list-group-item-header
    .pf-expand-placeholder
      display: none

  .list-view-pf
    height: calc(100vh - 237px)
    overflow-y: auto

  .explorer-children-list
    .list-view-pf
      height: auto
      overflow-y: auto

  [class*='col-']
    padding-left: 10px
    padding-right: 10px

  .name-column
    .pficon
      display: inline
      margin-left: 5px

  .list-view-stacked-item
    line-height: 24px

    .fa,
    .pficon
      text-align: center

  .dropdown-kebab-pf
    .dropdown-menu
      &.dropdown-menu-right
        &::after,
        &::before
          right: 18px

.explorer-children-list

  .list-group-item-header
    cursor: default
    margin-left: 9px
    width: calc(100% - 46px)

  .list-view-pf
    padding-bottom: 0

  .list-group
    border-top: 0
    margin-bottom: 0

  .dropdown-kebab-pf
    position: absolute
    right: 10px

    .btn-link
      padding: 4px 0

.card-view-pf
  .card
    cursor: pointer

Maintain row control alignment for list views

.explorer-list
  .list-group-item
    &.list-view-pf-expand-active
      padding-bottom: 0

    .power-icon
      cursor: default

  .list-view-pf
    height: calc(100vh - 237px)
    overflow-y: auto

  .explorer-children-list
    .list-view-pf
      height: auto
      overflow-y: auto

  [class*='col-']
    padding-left: 10px
    padding-right: 10px

  .name-column
    .pficon
      display: inline
      margin-left: 5px

  .list-view-stacked-item
    line-height: 24px

    .fa,
    .pficon
      text-align: center

  .dropdown-kebab-pf
    .dropdown-menu
      &.dropdown-menu-right
        &::after,
        &::before
          right: 18px

.explorer-children-list

  .list-group-item-header
    cursor: default
    margin-left: 9px
    width: calc(100% - 46px)

  .list-view-pf
    padding-bottom: 0

  .list-group
    border-top: 0
    margin-bottom: 0

  .dropdown-kebab-pf
    position: absolute
    right: 10px

    .btn-link
      padding: 4px 0

.card-view-pf
  .card
    cursor: pointer


#new_proof
  select.timeout
    @extend .col-lg-3
    @extend .col-md-3
    @extend .col-sm-3
    @extend .col-xs-3

.columnized-items
  div.form-group div.col-lg-10
    > label
      @extend .col-lg-2
      @extend .col-md-3
      @extend .col-sm-4
      @extend .col-xs-6
      margin: 0
      float: left
    > p.help-block
      @extend .col-lg-12
      @extend .col-md-12
      @extend .col-sm-12
      @extend .col-xs-12

.select_checkboxes_buttons
  margin-top: -1.5em
  margin-bottom: 2em

Set some space between the timeout box and its hint.

#new_proof
  select.timeout
    @extend .col-lg-3
    @extend .col-md-3
    @extend .col-sm-3
    @extend .col-xs-3
    margin-right: 1em

.columnized-items
  div.form-group div.col-lg-10
    > label
      @extend .col-lg-2
      @extend .col-md-3
      @extend .col-sm-4
      @extend .col-xs-6
      margin: 0
      float: left
    > p.help-block
      @extend .col-lg-12
      @extend .col-md-12
      @extend .col-sm-12
      @extend .col-xs-12

.select_checkboxes_buttons
  margin-top: -1.5em
  margin-bottom: 2em


#users-show
  #user-profile
    @include white-box
    margin:
      bottom: 60px

    #user-panel
      h1
        margin: 0

    #user-biography
      font-size: 0.9em

#users-new, #sessions-new, #invitations-new, #invitations-edit
  #sign-up-area, #sign-in-area
    margin-top: 20px

  #sign-up-area, #sign-in-area, #invite-area
    @include white-box

    .spiel
      .content
        font-size: 0.9em

        ul
          padding-left: 20px

  form
    a
      font-size: 0.8em

Change user profile to black box

#users-show
  #user-profile
    @include white-box
    background-color: rgba(0,0,0,.7)
    margin:
      bottom: 60px

    #user-panel
      h1, h5
        color: #fff
      h1
        margin: 0

    #user-biography
      font-size: 0.9em
      color: #fff

#users-new, #sessions-new, #invitations-new, #invitations-edit
  #sign-up-area, #sign-in-area
    margin-top: 20px

  #sign-up-area, #sign-in-area, #invite-area
    @include white-box

    .spiel
      .content
        font-size: 0.9em

        ul
          padding-left: 20px

  form
    a
      font-size: 0.8em


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

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

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

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

#shortcuts dl > dd
  margin-left: 85%

Remove overflow: scroll from data table

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


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

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

form fieldset > ol > li.boolean
  height: auto

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

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

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

  &:nth-child(2)
    float: right

  &:not(.input)
    clear: both

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

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

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

Improve hint style for user role form

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

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

form fieldset > ol > li.boolean
  height: auto

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

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

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

  &:nth-child(2)
    float: right

  &:not(.input)
    clear: both

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

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

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

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


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

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

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

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

Use max-width to fix Tweet button width bug.

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

  // Fix Tweet button width bug.
  iframe
    max-width: 150px !important

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

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


// Using Google Webfonts. Embrace the open source :)
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic')
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700')

@import compass/reset
@import compass/utilities
@import compass/css3
@import 960/grid

$ninesixty-columns: 16
$images_path: "/assets/catarse/"

// Neighbor.ly configs
@import neighborly/config

@import miv/index

@import content/body
@import content/header
@import content/footer
//@import content/recommended_header
@import content/sidebar
@import content/explore
@import content/sessions

@import resources/projects/index
@import resources/projects/show
@import resources/projects/start
@import resources/projects/new
@import resources/projects/pending_backers
@import resources/projects/rewards
@import resources/backers/new
@import resources/backers/thank_you
@import resources/backers/create
//@import resources/static/default
//@import resources/static/about
//@import resources/users/show
@import resources/adm/adm

// Channels stylesheets
@import resources/channels/general
@import resources/channels/profile
@import resources/channels/about

// Neighbor.ly styles
@import neighborly/**/*

@import ./jquery-ui

Add user styles - Was removed unconsciously

// Using Google Webfonts. Embrace the open source :)
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic')
@import url('https://fonts.googleapis.com/css?family=Arvo:400,700')

@import compass/reset
@import compass/utilities
@import compass/css3
@import 960/grid

$ninesixty-columns: 16
$images_path: "/assets/catarse/"

// Neighbor.ly configs
@import neighborly/config

@import miv/index

@import content/body
@import content/header
@import content/footer
//@import content/recommended_header
@import content/sidebar
@import content/explore
@import content/sessions

@import resources/projects/index
@import resources/projects/show
@import resources/projects/start
@import resources/projects/new
@import resources/projects/pending_backers
@import resources/projects/rewards
@import resources/backers/new
@import resources/backers/thank_you
@import resources/backers/create
//@import resources/static/default
//@import resources/static/about
@import resources/users/show
@import resources/adm/adm

// Channels stylesheets
@import resources/channels/general
@import resources/channels/profile
@import resources/channels/about

// Neighbor.ly styles
@import neighborly/**/*

@import ./jquery-ui


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

  .form-group
    padding: 0 10px

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

  &:first-child
    margin-top: 0

  p
    margin-bottom: 10px

  label
    margin-bottom: 0

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

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

      &:hover
        background-color: #aaa !important

    .hide
      display: none

  .widget-buttons-bottom
    margin-bottom: 0

    a
      position: relative
      top: 6px

Add margin bottom 0 to widget form group

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

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

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

  &:first-child
    margin-top: 0

  p
    margin-bottom: 10px

  label
    margin-bottom: 0

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

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

      &:hover
        background-color: #aaa !important

    .hide
      display: none

  .widget-buttons-bottom
    margin-bottom: 0

    a
      position: relative
      top: 6px


.signature
  article
    max-width: 550px

    &:first-letter
      float: left
      font-size: 6.25rem
      line-height: 0.7em
      margin: 5px 10px 0 0

// uncomment the below for multi-column "big" layout

//@media only screen and (min-width: 1800px)
//
//  .signature
//
//    figure
//      column-break-inside: avoid
//      -moz-column-break-inside: avoid
//      -webkit-column-break-inside: avoid
//
//    h1, h2, h3, h4
//      column-break-after: avoid
//      -moz-column-break-after: avoid
//      -webkit-column-break-after: avoid
//
//    .content
//      max-width: none
//      line-height: 1.8em
//      column-gap: 60px
//      column-width: 600px
//      -moz-column-gap: 60px
//      -moz-column-width: 600px
//      -webkit-column-gap: 60px
//      -webkit-column-width: 600px

Fix usage of first-letter in Firefox

.signature
  article
    max-width: 550px

    p
      &:first-letter
        float: left
        font-size: 6.25rem
        line-height: 0.7em
        margin: 5px 10px 0 0

// uncomment the below for multi-column "big" layout

//@media only screen and (min-width: 1800px)
//
//  .signature
//
//    figure
//      column-break-inside: avoid
//      -moz-column-break-inside: avoid
//      -webkit-column-break-inside: avoid
//
//    h1, h2, h3, h4
//      column-break-after: avoid
//      -moz-column-break-after: avoid
//      -webkit-column-break-after: avoid
//
//    .content
//      max-width: none
//      line-height: 1.8em
//      column-gap: 60px
//      column-width: 600px
//      -moz-column-gap: 60px
//      -moz-column-width: 600px
//      -webkit-column-gap: 60px
//      -webkit-column-width: 600px


$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

body
  font-family: $body-font-family
  font-size: 13px
  line-height: 20px
  margin: 0

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

sub, sup
  line-height: 1

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

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

.clear
  clear: both

.hidden
  display: none

Fix incorrect font used by some buttons

$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
$blueprint-button-font-family: $body-font-family

body
  font-family: $body-font-family
  font-size: 13px
  line-height: 20px
  margin: 0

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

sub, sup
  line-height: 1

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

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

.clear
  clear: both

.hidden
  display: none


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

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

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

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

    li
      margin: 0 2.5em 0 0

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

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

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

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

      &:hover, &:focus
        opacity: 1

  a.ss-icon
    font-size: 2.25rem

    &:hover
      text-decoration: none

  .ss-heart
    color: $red-1

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

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

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

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

Add units to transition time for footer links.

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

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

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

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

    li
      margin: 0 2.5em 0 0

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

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

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

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

      &:hover, &:focus
        opacity: 1

  a.ss-icon
    font-size: 2.25rem

    &:hover
      text-decoration: none

  .ss-heart
    color: $red-1

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

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

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

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


@import 'colors'

.buildStepOutput
  background-color: $lightGrey

  .buildStepOutput__exit-info
    font-size: 0.8em

.layer
  display: none
  position: fixed
  width: 90%
  height: 90%
  color: $black
  border-radius: 3px
  background-color: $buildInfo-open
  z-index: 1
  margin: auto
  left: 5%
  top: 5%
  padding: 16px
  overflow: hidden

.layer.open
  display: inline-block

.layerClose
  position: absolute
  right: 16px
  top: 16px
  cursor: pointer
.layerTitle
  position: absolute
  font-size: 2em

.layerText
  overflow: auto
  margin-top: 50px
  max-height: calc(100% - 50px)
  padding: 8px
  background-color: $black
  color: $white

.layerShadow
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0
  background-color: $transparent-black

.outputLine
  font-family: "Courier New"

Set layer shadow position to fixed so it works properly even when scrolled down

@import 'colors'

.buildStepOutput
  background-color: $lightGrey

  .buildStepOutput__exit-info
    font-size: 0.8em

.layer
  display: none
  position: fixed
  width: 90%
  height: 90%
  color: $black
  border-radius: 3px
  background-color: $buildInfo-open
  z-index: 1
  margin: auto
  left: 5%
  top: 5%
  padding: 16px
  overflow: hidden

.layer.open
  display: inline-block

.layerClose
  position: absolute
  right: 16px
  top: 16px
  cursor: pointer
.layerTitle
  position: absolute
  font-size: 2em

.layerText
  overflow: auto
  margin-top: 50px
  max-height: calc(100% - 50px)
  padding: 8px
  background-color: $black
  color: $white

.layerShadow
  position: fixed
  width: 100%
  height: 100%
  top: 0
  left: 0
  background-color: $transparent-black

.outputLine
  font-family: "Courier New"


.dataTables_empty
  padding: 8px 10px !important

[id*=_ellipsis]
  display: block !important
  margin: 0 -7px 0 -2px !important

Add datatables styles from express_blog

ul.quick-filters
  font-size: 1.1rem
  list-style: none
  margin: 0
  padding-bottom: 30px

  li
    display: inline

    &.divider
      border-right: 1px solid #bbb
      margin: 0 10px 0 5px

div.dataTables_length label, div.dataTables_filter label, div.dataTables_info
  font-size: 1.1rem

div.dataTables_filter input
  margin-left: 5px
  min-width: 250px
  padding-left: 4px

div.dataTables_paginate
  ul.pagination
    li
      a
        background: none
        font-size: 1.1rem
        padding: 0 3px

      &:hover, &.current
        a
          background: none
          color: #26ade4

      &.current
        a
          font-weight: bold

      &.unavailable
        display: none

.dataTables_processing
  display: none !important

table.dataTable
  &.hide-first-column
    tr
      th:first-child, td:first-child
        display: none

  tr
    min-height: 72px
    vertical-align: top

    th
      padding: 14px 10px

    &:hover
      td

      .action-menu
        visibility: visible
        z-index: 999

    &.even
      td
        background-color: #fbfbfb

    td
      font-size: 1.1rem
      line-height: 1.3
      padding: 8px 10px 28px
      position: relative

      abbr
        font-size: 1.1rem

      .action-menu
        bottom: 5px
        position: absolute
        visibility: hidden

        ul.inline-list
          font-size: 0.95rem
          white-space: nowrap
          overflow: visible

          li
            display: inline
            float: none
            margin-left: 0
            margin-right: 3px

            &.hide
              display: none

            a
              margin-right: 3px

            a, span
              display: inline

            span
              color: #999
              font-weight: bold

.dataTables_empty
  padding: 8px 10px !important

[id*=_ellipsis]
  display: block !important
  margin: 0 -7px 0 -2px !important


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

    100%
        opacity: 1

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

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

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

    &.rainbow
        animation-delay: 0ms

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

Update language selectors to include all valid variations

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

    100%
        opacity: 1

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

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

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

    &.rainbow
        animation-delay: 0ms

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


.neighborly-balanced-creditcard-form
  span.checkbox
    margin-right: +emCalc(5px)
  .use-previously-card
    margin-bottom: +emCalc(25px)
  .card-box:not(.new-card)
    border: 1px solid $border-color
    border-radius: $global-radius
    padding: +emCalc(15px)
    background: white
    margin-bottom: +emCalc(5px)
    .columns.expiration
      padding-left: +emCalc(20px)

  .add-new-creditcard-form.with-others-cards
    margin-top: +emCalc(25px)
  .balanced-seal
    padding-top: +emCalc(5px)
  .button
    margin-top: +emCalc(5px)
  .terms
    margin-bottom: +emCalc(15px)
  .update-address
    margin-bottom: +emCalc(15px)
    margin-top: +emCalc(-15px)

Make adjustments for bankaccount new view

.neighborly-balanced-creditcard-form

  .use-previously-card
    margin-bottom: +emCalc(25px)
  .card-box:not(.new-card)
    border: 1px solid $border-color
    border-radius: $global-radius
    padding: +emCalc(15px)
    background: white
    margin-bottom: +emCalc(5px)
    .columns.expiration
      padding-left: +emCalc(20px)

  .add-new-creditcard-form.with-others-cards
    margin-top: +emCalc(25px)

.neighborly-balanced-creditcard-form, .neighborly-balanced-bankaccount-form
  span.checkbox
    margin-right: +emCalc(5px)
  .balanced-seal
    padding-top: +emCalc(5px)
  .button
    margin-top: +emCalc(5px)
  .terms
    margin-bottom: +emCalc(15px)
  .update-address
    margin-bottom: +emCalc(15px)
    margin-top: +emCalc(-15px)

.neighborly-balanced-bankaccount-form
  .check-numbers
    margin-bottom: +emCalc(20px)
    text-align: center
  .radio_buttons
    label.radio
      float: left
      padding-right: +emCalc(15px)
      padding-top: +emCalc(15px)
      span
        margin-right: +emCalc(5px)