.editable
  padding: 0.1em 0.3em

  border-bottom: 1px dotted
  outline: none

  transition: all 0.25s ease-in-out

  &:focus, &:active, &:hover
    background-color: $light-yellow !important
    box-shadow: 0 0 0.5em $light-yellow
    border-radius: 0.1em

    color: $dark-blue
    text-shadow: $dark-blue 0 0 0.1em

Use solid line when editing a contentEditable field.

.editable
  padding: 0.1em 0.3em

  border-bottom: 1px dotted
  outline: none

  transition: all 0.25s ease-in-out

  &:focus, &:active, &:hover
    background-color: $light-yellow !important
    box-shadow: 0 0 0.5em $light-yellow
    border-radius: 0.1em
    border-bottom: 1px solid

    color: $dark-blue
    text-shadow: $dark-blue 0 0 0.1em


@import "bourbon/bourbon"
@import "vars/component"
@import "./fonts"
@import "util/exports"

+exports("typography/tables")

  table
    +font-caption(delta, 0, 0)

  th, td
    padding-left: rythm(0.5)
    padding-right: rythm(0.5)

  th
    +font-caption(gamma)
    border-bottom: 3px solid #ddd

  td:not(:first-child):not(:last-child)
    border-left: 1px solid #ddd
    border-right: 1px solid #ddd

Fix table borders for when there are only two columns.

@import "bourbon/bourbon"
@import "vars/component"
@import "./fonts"
@import "util/exports"

+exports("typography/tables")

  table
    +font-caption(delta, 0, 0)

  th, td
    padding-left: rythm(0.5)
    padding-right: rythm(0.5)

  th
    +font-caption(gamma)
    border-bottom: 3px solid #ddd

  td
    border-right: 1px solid #ddd

  td:last-child)
    border-right: none


//= Colors (http://vlcnr.com/brand/)
$vlcnr-black: rgb(37, 40, 42)
$vlcnr-red: rgb(249, 66, 58)
$vlcnr-dark-grey: rgb(99, 102, 106)
$vlcnr-grey: rgb(136, 139, 141)


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

  +grid-media($breakpoint-medium)
    &--school
      min-height: 300px
      text-align: center

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

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

Add min-height to teacher card

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

  +grid-media($breakpoint-medium)
    &--school
      min-height: 300px
      text-align: center

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

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


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

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

Make the custom YARD CSS work with the new YARD HTML.

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

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


a.other-episodes
  font-family: CamptonBoldDemo
  color: #0060ff
  font-size: 24px
  text-transform: uppercase
  margin-top: 40px

.other-episodes
  display: inline-block
  margin-bottom: 8px

.random-profiles-container
  +span-columns(12)
  margin-bottom: 124px
  margin-top: 124px
  h4
    text-align: center
    font-family: CamptonBoldDemo
    font-size: 24px
    letter-spacing: 1.3px
    color: #9b9b9b
    font-weight: bold
  +media(max-width 850px)
    +shift(1)
    +span-columns(10)

.interviewee-suggestion-item
  +span-columns(3)
  +shift(.518)
  margin-bottom: 85px
  &:first-of-type
    +shift(1)
  +media(max-width 850px)
    +span-columns(6)
    +shift(3)
    &:first-of-type
      +shift(3)
  +media(max-width 500px)
    +span-columns(8)
    +shift(2)
    &:first-of-type
      +shift(2)

.suggestion-list .company
  font-family: CamptonBook
  font-size: 16px
  color: #4a4a4a
  letter-spacing: 0.4px

Add hover effect to interviewee suggestion item

a.other-episodes
  font-family: CamptonBoldDemo
  color: #0060ff
  font-size: 24px
  text-transform: uppercase
  margin-top: 40px

.other-episodes
  display: inline-block
  margin-bottom: 8px

.random-profiles-container
  +span-columns(12)
  margin-bottom: 124px
  margin-top: 124px
  h4
    text-align: center
    font-family: CamptonBoldDemo
    font-size: 24px
    letter-spacing: 1.3px
    color: #9b9b9b
    font-weight: bold
  +media(max-width 850px)
    +shift(1)
    +span-columns(10)

.interviewee-suggestion-item
  +span-columns(3)
  +shift(.518)
  margin-bottom: 85px
  &:first-of-type
    +shift(1)
  +media(max-width 850px)
    +span-columns(6)
    +shift(3)
    &:first-of-type
      +shift(3)
  +media(max-width 500px)
    +span-columns(8)
    +shift(2)
    &:first-of-type
      +shift(2)

.interviewee-suggestion-item img:hover
  opacity: .83
  border: 1px solid white

.suggestion-list .company
  font-family: CamptonBook
  font-size: 16px
  color: #4a4a4a
  letter-spacing: 0.4px


// Snippet from Redmine.css
// Flash & error messages ***

#errorExplanation, div.flash, .nodata, .warning
  padding: 4px 4px 4px 30px
  margin-bottom: 12px
  font-size: 1.1em
  border: 2px solid

div.flash
  margin-top: 8px
  &.error
    background: url(../../images/false.png) 8px 5px no-repeat
    background-color: #ffe3e3
    border-color: #dd0000
    color: #550000

#errorExplanation
  background: url(../../images/false.png) 8px 5px no-repeat
  background-color: #ffe3e3
  border-color: #dd0000
  color: #550000

div.flash.notice
  background: url(../../images/true.png) 8px 5px no-repeat
  background-color: #dfffdf
  border-color: #9fcf9f
  color: #005f00

.nodata, .warning
  text-align: center
  background-color: #ffebc1
  border-color: #fdbf3b
  color: #a6750c

#errorExplanation ul
  font-size: 0.9em
// End of Snippet

Update flash_errors stylesheet from mailyt.

// Snippet from Redmine.css
// Flash & error messages ***

#errorExplanation, div.flash, .nodata, .warning
  padding: 4px 4px 4px 30px
  margin-bottom: 12px
  font-size: 1.1em
  border: 1px solid
  +border-radius($border_radius)

div.flash
  margin-top: 8px
  &.error
    background: url(../images/false.png) 8px 5px no-repeat
    background-color: #ffe3e3
    border-color: #550000
    color: #550000

#errorExplanation
  background: url(../images/false.png) 8px 5px no-repeat
  background-color: #ffe3e3
  border-color: #550000
  color: #550000

div.flash.notice
  background: url(../images/true.png) 8px 5px no-repeat
  background-color: #dfffdf
  border-color: #9fcf9f
  color: #005f00

div.flash.alert
  background: url(../images/false.png) 8px 5px no-repeat
  background-color: #ffe3e3
  border-color: #550000
  color: #550000

.nodata, .warning
  text-align: center
  background-color: #ffebc1
  border-color: #fdbf3b
  color: #a6750c

#errorExplanation ul
  font-size: 0.9em
// End of Snippet


@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i|Roboto:100,300,400,500,700,900&subset=cyrillic")
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")

$primary-font: 'Roboto', sans-serif
$secondary-font: 'Open Sans', sans-serif

Add 300 for Open Sans

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i|Roboto:100,300,400,500,700,900&subset=cyrillic")
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css")

$primary-font: 'Roboto', sans-serif
$secondary-font: 'Open Sans', sans-serif


@import _reset
@import _mixins
@import url(https://fonts.googleapis.com/css?family=Material+Icons|Rubik:300,400,500,700) //Righteous

*
	font-family: 'Rubik', sans-serif
	color: white

body
	background-color: #2a2d2f

h1
	font-family: 'Rubik', sans-serif
	font-weight: 300

.container
	width: calc(100% - 25px)
	max-width: 1250px
	margin: 0 auto

input
	background-color: transparent
	border: 1px solid #7d7d7d
	color: white
	padding: 10px
	border-radius: 30px
	text-align: center
	width: 360px
	font-size: 16px
	display: block
	outline: 0

.transparent
	opacity: 0

.btn
	background-color: #60b0b9
	display: inline-block
	font-size: 17px
	text-decoration: none
	border-radius: 40px
	padding: 7px 16px
	border: none
	color: white
	cursor: pointer
	outline: 0
	text-decoration: none
	transition: .2s
	&:hover
		background-color: #61a2a9

Use lighter font weight for all buttons on website

@import _reset
@import _mixins
@import url(https://fonts.googleapis.com/css?family=Material+Icons|Rubik:300,400,500,700) //Righteous

*
	font-family: 'Rubik', sans-serif
	color: white

body
	background-color: #2a2d2f

h1
	font-family: 'Rubik', sans-serif
	font-weight: 300

.container
	width: calc(100% - 25px)
	max-width: 1250px
	margin: 0 auto

input
	background-color: transparent
	border: 1px solid #7d7d7d
	color: white
	padding: 10px
	border-radius: 30px
	text-align: center
	width: 360px
	font-size: 16px
	display: block
	outline: 0

.transparent
	opacity: 0

.btn
	background-color: #60b0b9
	display: inline-block
	font-size: 17px
	text-decoration: none
	border-radius: 40px
	padding: 7px 16px
	border: none
	color: white
	cursor: pointer
	outline: 0
	text-decoration: none
	font-weight: 100
	transition: .2s
	&:hover
		background-color: #61a2a9


@import branding
@import mixins

.producers
  @include fullwidthbg
  background-image: url("/assets/producers/producers-pg-bg.jpg")
  background-repeat: no-repeat

Make text links turquoise color for producers page

@import branding
@import mixins

.producers
  @include fullwidthbg
  background-image: url("/assets/producers/producers-pg-bg.jpg")
  background-repeat: no-repeat
  a
    color: $clr-turquoise
    &:hover, &:active, &:focus
      color: $clr-turquoise-bright


@mixin float-fill($spacerW, $float)
  +box-sizing(border-box)
  float: $float
  width: 100%
  @if $float == right
    padding: 0 $spacerW 0 0
    margin: 0 (-$spacerW) 0 0
  @else
    padding: 0 0 0 $spacerW
    margin: 0 0 0 (-$spacerW)

Add a 3-col float-fill mixin and example comments

// Use for a 2-column layout that fills 100% width of the parent but has one column at a fixed width:
// .col-fixed
//   float: left
//   width: 100px
// .col-flex
//   +float-fill(100px, right)
@mixin float-fill($spacerW, $float)
  +box-sizing(border-box)
  float: $float
  width: 100%
  @if $float == right
    padding: 0 $spacerW 0 0
    margin: 0 (-$spacerW) 0 0
  @else
    padding: 0 0 0 $spacerW
    margin: 0 0 0 (-$spacerW)

// Use for a 3-column layout with the center being stretchable to a min-width:
// .col-1
//   float: left
//   width: 100px
// .col-2
//   +float-fill-3-col-center(100px, 200px, 100px)
// .col-3
//   float: right
//   width: 100px
@mixin float-fill-3-col-center($spacerLeft, $min-width:0px, $spacerRight:0)
  +box-sizing(border-box)
  float: left
  min-width: $min-width
  padding: 0 $spacerRight 0 $spacerLeft
  margin: 0 (-$spacerRight) 0 (-$spacerLeft)


#logo
  +span-columns(1)
  img
    margin:
      left: -6px
      top: -4px
    height: 65px

header
  +outer-container
  margin:
    top: 30px
    bottom: 47px

.navigation
  +span-columns(9)
  li
    display: inline-block
    float: right
    margin:
      top: $small-margin
  a
    color: darken($medium-gray, 30%)
    margin:
      left: $medium-margin / 4

Add subtle drop-shadow to logo cube

#logo
  +span-columns(1)
  -webkit-filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  img
    margin:
      left: -6px
      top: -4px
    height: 65px

header
  +outer-container
  margin:
    top: 30px
    bottom: 47px

.navigation
  +span-columns(9)
  li
    display: inline-block
    float: right
    margin:
      top: $small-margin
  a
    color: darken($medium-gray, 30%)
    margin:
      left: $medium-margin / 4


@import compass/typography

body
  font-family: $default-font-family
  font-size: 13px
  -webkit-font-smoothing: antialiased

a
  color: $link-color
  &:visited
    color: $link-visited-color
  &:hover,
  &:focus
    color: $link-hover-color
  &:active
    color: $link-active-color

#content
  h3,
  th
    font-family: $alternate-font-family

  h3
    font-family: $alternate-font-family
    color: $dark-grey
    font-size: 1.2em
    text-transform: uppercase
    letter-spacing: 0.02em
    margin-bottom: 0.6em
    width: 100%
    float: left

  p, li
    margin-bottom: 1.2em

Add some line-height to body content

@import compass/typography

body
  font-family: $default-font-family
  font-size: 13px
  -webkit-font-smoothing: antialiased

a
  color: $link-color
  &:visited
    color: $link-visited-color
  &:hover,
  &:focus
    color: $link-hover-color
  &:active
    color: $link-active-color

#content
  h3,
  th
    font-family: $alternate-font-family

  h3
    font-family: $alternate-font-family
    color: $dark-grey
    font-size: 1.2em
    text-transform: uppercase
    letter-spacing: 0.02em
    margin-bottom: 0.6em
    width: 100%
    float: left

  p, li
    margin-bottom: 1.2em
    line-height: 1.6


$avatar-size: 48px

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

.user-profile
  display: flex
  min-height: $avatar-size
  margin: $spacing 0 $spacing * 2 0
  width: 128px
  transition-duration: 150ms
  transition-property: all

  &__details
    flex: 1
    margin-left: 0.5em

  &__username
    +ellipsis
    height: 1.5em

  &__realname
    +ellipsis
    color: $mid-grey
    font-size: 0.75em
    height: 1.5em

  &__avatar
    border-radius: $border-radius
    height: $avatar-size
    margin: 0 auto
    overflow: hidden
    transition-duration: 150ms
    transition-property: all
    width: $avatar-size

    img
      width: 100%
      height: 100%

@media screen and (min-height: 700px)
  .user-profile
    flex-direction: column
    width: 96px

    &__avatar
      height: 96px
      width: 96px

Work around weird Chrome flex/truncate bug

$avatar-size: 48px

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

.user-profile
  display: flex
  min-height: $avatar-size
  margin: $spacing 0 $spacing * 2 0
  width: 128px
  transition-duration: 150ms
  transition-property: all

  &__details
    flex: 1
    margin-left: 0.5em
    min-width: 0

  &__username
    +ellipsis
    height: 1.5em

  &__realname
    +ellipsis
    color: $mid-grey
    font-size: 0.75em
    height: 1.5em

  &__avatar
    border-radius: $border-radius
    height: $avatar-size
    margin: 0 auto
    overflow: hidden
    transition-duration: 150ms
    transition-property: all
    width: $avatar-size

    img
      width: 100%
      height: 100%

@media screen and (min-height: 700px)
  .user-profile
    flex-direction: column
    width: 96px

    &__avatar
      height: 96px
      width: 96px


@import './main.sass'

.mobile-menu
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  z-index: 4

  -webkit-backdrop-filter: blur(10px)

  background: transparentize($color-dark, .25)

  opacity: 0
  transition: opacity .5s

  &.open
    opacity: 1

Add padding to mobile menu

@import './main.sass'

.mobile-menu
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  z-index: 4

  -webkit-backdrop-filter: blur(10px)
  background: transparentize($color-dark, .25)

  padding: 84px 10px 10px
  padding: calc(68px + 2vh) 5vw 0

  opacity: 0
  transition: opacity .5s

  &.open
    opacity: 1


@import "_mixins/all"

#summary
  margin: 0 0 0 12px
  @include clearfix

  .left,
  .right
    float: left

  a
    text-decoration: underline

  dt, dd
    float: left
    min-height: 25px
    margin: 0
  dt
    clear: left
    width: 90px
  dd
    width: 150px
    white-space: nowrap
  > dd
    width: 80%
    min-width: 315px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

  .message
    white-space: normal
    min-width: 0

    pre
      font-size: 12px
      display: inline-block
      width: 100%
      line-height: 20px
      margin-bottom: 0
      font-family: Monaco, 'Liberation Mono', Courier, monospace

Decrease line height for commit body slightly.

@import "_mixins/all"

#summary
  margin: 0 0 0 12px
  @include clearfix

  .left,
  .right
    float: left

  a
    text-decoration: underline

  dt, dd
    float: left
    min-height: 25px
    margin: 0
  dt
    clear: left
    width: 90px
  dd
    width: 150px
    white-space: nowrap
  > dd
    width: 80%
    min-width: 315px
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap

  .message
    white-space: normal
    min-width: 0

    pre
      font-size: 12px
      display: inline-block
      width: 100%
      line-height: 18px
      margin-bottom: 0
      font-family: Monaco, 'Liberation Mono', Courier, monospace


// -----------------------------------------------------------------------------
//
//  Card page module
//
// -----------------------------------------------------------------------------

.card--layer
  width: 600px
  margin: 50px auto

.card--layer__content
  @extend %clearfix
  @extend %rounded-corners
  padding: 25px
  position: relative
  padding: 25px 25px 0px 25px

  .copy--h1
    line-height: 1.1em
    margin: 0 0 10px 0
    width: 90%
  .sharing
    clear: left

  .copy--feature
    +font-size(20)

  .related
    width: 650px
    .related_articles, .related_guides
      margin: 0px

.card--layer__close
  position: absolute
  width: 30px
  height: 30px
  top: 20px
  right: 20px

.card--layer__header
  border-bottom: 1px solid $body-background
  margin-bottom: 20px
  padding-bottom: 20px

.card--layer__article
  padding-bottom: 10px

Adjust width and height of images in layers

// -----------------------------------------------------------------------------
//
//  Card page module
//
// -----------------------------------------------------------------------------

.card--layer
  width: 800px
  margin: 50px auto

.card--layer__content
  @extend %clearfix
  @extend %rounded-corners
  padding: 25px
  position: relative
  padding: 25px 25px 0px 25px

  .copy--h1
    line-height: 1.1em
    margin: 0 0 10px 0
    width: 90%
  .sharing
    clear: left

  .copy--feature
    +font-size(20)

  .related
    margin-left: -25px
    width: 800px
    .related_articles, .related_guides
      margin: 0px

  a > img
    width: 100%
    height: auto

.card--layer__close
  position: absolute
  width: 30px
  height: 30px
  top: 20px
  right: 20px

.card--layer__article
  padding-bottom: 10px


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

// Accounting **
tr.currency, th.currency
  text-align: right

Fix .currency styling for tables.

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

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


=terminal-font
  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace

  .line
    letter-spacing: normal

    span
      padding: 0
      display: inline

=terminal-font-small
  font-size: 12px
  line-height: 16px

  .line
    span
      height: 16px

=terminal-font-medium
  font-size: 18px
  line-height: 24px

  .line
    span
      height: 24px

=terminal-font-big
  font-size: 24px
  line-height: 32px

  .line
    span
      height: 32px

Add powerline symbols font support

=terminal-font
  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols'

  .line
    letter-spacing: normal

    span
      padding: 0
      display: inline

=terminal-font-small
  font-size: 12px
  line-height: 16px

  .line
    span
      height: 16px

=terminal-font-medium
  font-size: 18px
  line-height: 24px

  .line
    span
      height: 24px

=terminal-font-big
  font-size: 24px
  line-height: 32px

  .line
    span
      height: 32px


@import ../../styles/lib

.Completer
  position: fixed
  z-index: 2
  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)

Use correct font-size for completers

@import ../../styles/lib

.Completer
  +sans-typeset
  position: fixed
  z-index: 2
  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)


@import 'variable/alert'

@mixin alert-type($color)
  background-color: rgba($color, 0.8)
  border: 1px solid darken($color, 5%)
  +box-shadow(0 0 8px -2px $color)

.alert-warning
  +alert-type($alert-warning-color)

.alert-success
  +alert-type($alert-success-color)

.alert-info
  +alert-type($alert-info-color)

.alert-danger
  +alert-type($alert-danger-color)

Use the = synthax instead of the @mixin

@import 'variable/alert'

=alert-type($color)
  background-color: rgba($color, 0.8)
  border: 1px solid darken($color, 5%)
  +box-shadow(0 0 8px -2px $color)

.alert-warning
  +alert-type($alert-warning-color)

.alert-success
  +alert-type($alert-success-color)

.alert-info
  +alert-type($alert-info-color)

.alert-danger
  +alert-type($alert-danger-color)


@import 'mixin/variables'

.m-spinner
  display: inline-block
  opacity: 0
  margin: 0 0
  vertical-align: bottom

  color: transparent
  background-color: $m-brightblue

  animation: m-spinner 1.0s infinite ease-in-out
  transition: opacity 0.2s ease-in-out

  &.m-spinning
    opacity: 1

@keyframes m-spinner
  0%
    transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  50%
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  100%
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)

Adjust spinner style - more roundness

@import 'mixin/variables'

.m-spinner
  display: inline-block
  opacity: 0
  margin: 0 0
  vertical-align: bottom

  color: transparent
  background-color: $m-brightblue

  animation: m-spinner 1.1s infinite ease-in-out
  transition: opacity 0.2s ease-in-out
  border-radius: 50%

  &.m-spinning
    opacity: 1

@keyframes m-spinner
  0%
    transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  50%
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  100%
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg)


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

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

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

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

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

.flash
  .alert-box
    +radius(0)

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


.chat_room_part
  overflow: auto
  .chat_room
  .messages_part
    border: 1px solid $primary-color-1
    height: 25em
    overflow-y: scroll
  .messages
    +reset-list-style
    +reset-box-model
    position: relative
  .chat_message
    .message-user
      font-weight: bold
    time
      color: #888
    &:nth-child(even)
      background-color: #eee
    &:nth-child(odd)
      background-color: #ddd
  #chat_message_content
    +reset-box-model
    border: 1px solid $primary-color-1
    width: 80%
    &:focus
      +box_shadow($primary-color-2, 0, 0, 5px)

Remove not needed css attribute

.chat_room_part
  overflow: auto
  .chat_room
  .messages_part
    border: 1px solid $primary-color-1
    height: 25em
    overflow-y: scroll
  .messages
    +reset-list-style
    +reset-box-model
  .chat_message
    .message-user
      font-weight: bold
    time
      color: #888
    &:nth-child(even)
      background-color: #eee
    &:nth-child(odd)
      background-color: #ddd
  #chat_message_content
    +reset-box-model
    border: 1px solid $primary-color-1
    width: 80%
    &:focus
      +box_shadow($primary-color-2, 0, 0, 5px)


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

  margin: 0
  list-style: none
  display: flex

  overflow: hidden

  opacity: .25

  li
    display: inline-block
    overflow: hidden

    a
      display: inline-block

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

      padding: 1.25rem 1.75rem

      &.selected
        font-weight: 600

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

  color: $white
  font-size: 1.5em

  cursor: pointer

Add 'active' mode to top nav bar

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

  margin: 0
  list-style: none
  display: flex

  overflow: hidden

  opacity: .25

  &.active
    opacity: 1

  li
    display: inline-block
    overflow: hidden

    a
      display: inline-block

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

      padding: 1.25rem 1.75rem

      &.selected
        font-weight: 600

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

  color: $white
  font-size: 1.5em

  cursor: pointer


// Based on Redmine from the redmine.css
// begin
table.list
  border: 1px solid #e4e4e4
  border-collapse: collapse
  width: 100%
  margin-bottom: 4px
  th
    background-color: #eeeeee
    padding: 4px
    white-space: nowrap
  td
    vertical-align: top
    &.id
      width: 2%
      text-align: center
    &.checkbox
      width: 15px
      padding: 0px
// end
    &.action-links
      text-align: right
      border: 1px solid red

Drop .action-links style from redmine.


.header
  color: $color-white
  background: $color-black
  height: 90px
  @extend .typography-medium
  @include flexbox
  @include align-items(center)
  margin-bottom: 62px
  @extend .default-side-padding

.header .site_title
  color: $color-grey-dark
  display: inline-block
  margin-right: 46px

.header-item
  display: inline-block

.header-item li
  display: inline-block
  margin-right: 40px

.header-item .current
  color: $color-orange

.header #utility_nav
  margin-left: auto

Add greater letter spacing to menu

.header
  color: $color-white
  background: $color-black
  height: 90px
  @extend .typography-medium
  @include flexbox
  @include align-items(center)
  margin-bottom: 62px
  @extend .default-side-padding
  letter-spacing: 0.04em

.header .site_title
  color: $color-grey-dark
  display: inline-block
  margin-right: 46px

.header-item
  display: inline-block

.header-item li
  display: inline-block
  margin-right: 40px

.header-item .current
  color: $color-orange

.header #utility_nav
  margin-left: auto


body
  background: #ecf0f1
  font-family: sans-serif
  font-weight: 300

.pad
  background: #ecf0f1
  border: 1px solid #96a5a6
  color: #2c3e50
  display: block
  font-size: 1em
  height: 600px
  margin: 20px auto 0 auto
  overflow: auto
  padding: 20px
  width: 500px
  line-height: 1.2em

Hide content that overflows editor's limit

body
  background: #ecf0f1
  font-family: sans-serif
  font-weight: 300

.pad
  background: #ecf0f1
  border: 1px solid #96a5a6
  color: #2c3e50
  display: block
  font-size: 1em
  height: 600px
  margin: 20px auto 0 auto
  overflow: hidden
  padding: 20px
  width: 500px
  line-height: 1.2em


@import '~sass/partials'

$background-color1: grey(7)
$background-color2: grey(8)

// set pages offscreen
.View
    +set-dims(100vw, 100vh)
    position: fixed
    top: 0
    background: grey(8)
    background: linear-gradient(135deg, $background-color2, $background-color1, $background-color2)
    background: url('~public/backgrounds/dark_wall.png')

.HomeView
    z-index: $homepage-z-index

.ContentView
    z-index: $contentpage-z-index

.SettingsView
    z-index: 100
    top: -100%

Change Home Layering to Dashboard

@import '~sass/partials'

$background-color1: grey(7)
$background-color2: grey(8)

// set pages offscreen
.View
    +set-dims(100vw, 100vh)
    position: fixed
    top: 0
    background: grey(8)
    background: linear-gradient(135deg, $background-color2, $background-color1, $background-color2)
    background: url('~public/backgrounds/dark_wall.png')

.DashboardView
    z-index: $homepage-z-index

.ContentView
    z-index: $contentpage-z-index

.SettingsView
    z-index: 100
    top: -100%


input
  @extend .input

textarea
  @extend .textarea

label
  @extend .label

button.button
  @extend .button

#respond input#submit
  @extend .button

  @extend .is-primary

button.button.alt,
a.button.alt,
input.button.alt
  @extend .is-primary

  display: flex
  justify-content: center

.star-rating > span,
.stars a
  color: $dark-primary

.entry-images
  position: relative

span.onsale
  @extend .tag

  @extend .is-small

  @extend .is-danger

  font-size: 0.65rem !important

.woocommerce-product-details__short-description
  margin-bottom: 0.5em

Fix sass for input type checkbox

input:not([type='checkbox'])
  @extend .input

textarea
  @extend .textarea

label
  @extend .label

button.button
  @extend .button

#respond input#submit
  @extend .button

  @extend .is-primary

button.button.alt,
a.button.alt,
input.button.alt
  @extend .is-primary

  display: flex
  justify-content: center

.star-rating > span,
.stars a
  color: $dark-primary

.entry-images
  position: relative

span.onsale
  @extend .tag

  @extend .is-small

  @extend .is-danger

  font-size: 0.65rem !important

.woocommerce-product-details__short-description
  margin-bottom: 0.5em


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

		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

Fix minimap cursor growing larger than the minimap itself.

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


.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
    ul
      list-style: disc
      margin: 0.5em 0 0.5em 1.5em

Improve error message text styling II

.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


@import mixins
@import variables
@import branding

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

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

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

.producer-logo
  max-width: 220px

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

Tweak small hero image styling

@import mixins
@import variables
@import branding

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

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

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

.producer-logo
  max-width: 220px

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


#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 2px 0px rgba(shade($matcha-green, 45%), .30)
  a
    &:hover
      color: white

.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

Add active state for pagination button

#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 2px 2px rgba(shade($matcha-green, 45%), .30)
    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


$shadow-color: rgba(0, 0, 0, .16)

.info
  margin: 6vh 10vw

  display: flex
  flex-wrap: wrap

  .card
    flex: 1 0 auto
    text-align: center

    background-color: $white
    color: $dark-text-primary

    padding: 2vw 2vw 3.5vw
    margin: 2vw

    border-radius: 2px
    box-shadow: 10px 10px 20px 20px $shadow-color

    transition: box-shadow .25s
    box-shadow: 0 4px 10px 0 $shadow-color, 0 4px 20px 0 $shadow-color

    &:hover
      box-shadow: 0 16px 34px 0 $shadow-color, 0 12px 40px 0 $shadow-color

    .icon
      font-size: 8vw
      margin-bottom: 1vw
      display: block

Tweak label font size on cards

$shadow-color: rgba(0, 0, 0, .16)

.info
  margin: 6vh 10vw

  display: flex
  flex-wrap: wrap

  .card
    flex: 1 0 auto
    text-align: center

    background-color: $white
    color: $dark-text-primary

    padding: 2vw 2vw 3.5vw
    margin: 2vw

    border-radius: 2px
    box-shadow: 10px 10px 20px 20px $shadow-color

    transition: box-shadow .25s
    box-shadow: 0 4px 10px 0 $shadow-color, 0 4px 20px 0 $shadow-color

    font-size: calc(20px + 0.5vw)

    &:hover
      box-shadow: 0 16px 34px 0 $shadow-color, 0 12px 40px 0 $shadow-color

    .icon
      font-size: 8vw
      margin-bottom: 1vw
      display: block


#title
  position: absolute
  left: 0
  display: flex

  #logo
    width: 30px
    height: 30px
    margin-left: 7px
    margin-top: 7px
    background-image: url(../resources/icons/electron/icon.png)
    background-repeat: no-repeat
    background-size: cover
    background-position: center
  #status
    margin-left: 10px
    line-height: 45px
    font-size: 13px
    letter-spacing: 0.1em
    color: map-get($gray, 'light')

Update icon to smaller size to fit better

#title
  position: absolute
  left: 0
  display: flex

  #logo
    width: 20px
    height: 20px
    margin-left: 12px
    margin-top: 12px
    background-image: url(../resources/icons/electron/icon.png)
    background-repeat: no-repeat
    background-size: cover
    background-position: center
  #status
    margin-left: 10px
    line-height: 45px
    font-size: 13px
    letter-spacing: 0.1em
    color: map-get($gray, 'light')


@import globals/variables
@import globals/mixins

@import components/buttons
@import components/forms
@import components/grid
@import components/typography

*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

::-moz-selection
  background: lighten($whodini-green, 40%)
::selection
  background: lighten($whodini-green, 40%)

// TODO: factor these out in favor of html5bp approach?
.hide
  display: none
.show
  display: block

Add global styles for body

@import globals/variables
@import globals/mixins

@import components/buttons
@import components/forms
@import components/grid
@import components/typography

*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

::-moz-selection
  background: lighten($whodini-green, 40%)
::selection
  background: lighten($whodini-green, 40%)

body
  background-color: #eee
  padding-top: $base-line-height*2

// TODO: factor these out in favor of html5bp approach?
.hide
  display: none
.show
  display: block


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

Drop link styles from <a> tags when container gets linkified.

@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_container
  +unstyled-link


.create-backer-page
  .hero
    h3
      text-align: center
      color: white
      text-transform: uppercase
      font-weight: bold

  section.content, aside
    margin-top: +emCalc(50px)

  .payment
    .methods
      label
        margin-right: +emCalc(40px)
        img
          margin-left: +emCalc(5px)
          &.echeck_net-payment-method
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40)
            opacity: 0.4

    section.conteiner
      margin-top: +emCalc(50px)
      margin-bottom: +emCalc(30px)
      min-height: +emCalc(300px)
      border-top: 1px solid $border-color
      padding-top: +emCalc(5px)

      .catarse-credit-card-net-form
        .button
          margin-top: +emCalc(25px)

Add styles for echeck page

.create-backer-page
  .hero
    h3
      text-align: center
      color: white
      text-transform: uppercase
      font-weight: bold

  section.content, aside
    margin-top: +emCalc(50px)

  .payment
    .methods
      label
        margin-right: +emCalc(40px)
        img
          margin-left: +emCalc(5px)
          &.echeck_net-payment-method
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40)
            opacity: 0.4

    section.conteiner
      margin-top: +emCalc(50px)
      margin-bottom: +emCalc(30px)
      min-height: +emCalc(300px)
      border-top: 1px solid $border-color
      padding-top: +emCalc(5px)

      .catarse-credit-card-net-form, .catarse-echeck-net-form
        .button
          margin-top: +emCalc(25px)
      .catarse-echeck-net-form
        .check-numbers
          img
            display: block
            margin: auto
            margin-bottom: +emCalc(25px)


.ng-geocoder__list
	margin: 0
	padding: 0
	width: 100%
	list-style: none
	background: #fff
	position: absolute
	border-bottom-left-radius: 3px
	border-bottom-right-radius: 3px
	box-shadow: 0 1px 10px rgba(0, 0, 0, .1)

.ng-geocoder__list__item
	cursor: pointer
	overflow: hidden
	padding: 10px 15px

	&:not(:last-child)
		border-bottom: 1px solid #ededed

	&:hover
		background: #f1f1f1

.ng-geocoder__list__item--focus
	background: #ededed

Set scroll to geocoder list

.ng-geocoder__list
	margin: 0
	padding: 0
	width: 100%
	list-style: none
	background: #fff
	position: absolute
	overflow-y: scroll
	border-bottom-left-radius: 3px
	border-bottom-right-radius: 3px
	box-shadow: 0 1px 10px rgba(0, 0, 0, .1)

.ng-geocoder__list__item
	cursor: pointer
	overflow: hidden
	padding: 10px 15px

	&:not(:last-child)
		border-bottom: 1px solid #ededed

	&:hover
		background: #f1f1f1

.ng-geocoder__list__item--focus
	background: #ededed


// Badges
//
//
// .badge--lp-reviewed     - Lonely Planet Reviewed Badge
// .badge--top-choice      - Lonely Planet Top Choice Badge
// .badge--included        - Badge to show other included items
//
// Styleguide 1.1

// -----------------------------------------------------------------------------
// Badges
// -----------------------------------------------------------------------------

%badge
  @extend %left-icon
  @extend %left-icon--hidden-text
  @extend %inline-block
  bottom: 8px
  position: absolute
  &:before
    color: $lpblue

.badge--lp-reviewed
  @extend %badge
  @extend %lp-review-bubble-before
  &:before
    font-size: 46px
    line-height: 12px

.badge--top-choice
  @extend %badge
  @extend %top-choice-before
  width: 33px
  &:before
    font-size: 55px
    line-height: 10px

.badge--included
  @extend %rounded-corners
  @extend %inline-block
  +font-size(10)
  background-color: $green
  color: white
  font-weight: bold
  padding: 2px 5px
  text-transform: uppercase

.badge--staff, .lp-staff
  @extend %rounded-corners
  @extend %inline-block
  +font-size(12)
  background-color: $header-blue
  padding: 4px 6px
  text-transform: uppercase
  position: relative
  font-weight: bold

Add comment about new badge class name.

// Badges
//
//
// .badge--lp-reviewed     - Lonely Planet Reviewed Badge
// .badge--top-choice      - Lonely Planet Top Choice Badge
// .badge--included        - Badge to show other included items
//
// Styleguide 1.1

// -----------------------------------------------------------------------------
// Badges
// -----------------------------------------------------------------------------

%badge
  @extend %left-icon
  @extend %left-icon--hidden-text
  @extend %inline-block
  bottom: 8px
  position: absolute
  &:before
    color: $lpblue

.badge--lp-reviewed
  @extend %badge
  @extend %lp-review-bubble-before
  &:before
    font-size: 46px
    line-height: 12px

.badge--top-choice
  @extend %badge
  @extend %top-choice-before
  width: 33px
  &:before
    font-size: 55px
    line-height: 10px

.badge--included
  @extend %rounded-corners
  @extend %inline-block
  +font-size(10)
  background-color: $green
  color: white
  font-weight: bold
  padding: 2px 5px
  text-transform: uppercase

// .lp-staff comes from thorntree.
.badge--staff, .lp-staff
  @extend %rounded-corners
  @extend %inline-block
  +font-size(12)
  background-color: $header-blue
  padding: 4px 6px
  text-transform: uppercase
  position: relative
  font-weight: bold


// Padding
// ========================================

// Padding from $baseline variables

@each $name, $vaue in $baselines

  .p-#{$name}
    +rem(padding-bottom, $value)
    +rem(padding-top, $value)

  .pt-#{$name}
    +rem(padding-top, $value)

  .pb-#{$name}
    +rem(padding-bottom, $value)

// Horizontal alignment ($gutter/$gutter-half)

.pl
  +rem(padding-left, $gutter)

.pl-h
  +rem(padding-left, $gutter-half)

.pr
  +rem(padding-right, $gutter)

.pr-h
  +rem(padding-right, $gutter-half)

.px
  +rem(padding-left, $gutter)
  +rem(padding-right, $gutter)

.px-h
  +rem(padding-left, $gutter-half)
  +rem(padding-right, $gutter-half)

// Bump

.p-bump
  +bump(padding, box)

.p-bump-h
  +bump(padding, baselines gutters-half)

// Resets

.p-0
  padding: 0

.px-0
  padding-left: 0
  padding-right: 0

.py-0
  padding-bottom: 0
  padding-top: 0

.pt-0
  padding-top: 0

.pr-0
  padding-right: 0

.pb-0
  padding-bottom: 0

.pl-0
  padding-left: 0

Fix typo in padding utility

// Padding
// ========================================

// Padding from $baseline variables

@each $name, $value in $baselines

  .p-#{$name}
    +rem(padding-bottom, $value)
    +rem(padding-top, $value)

  .pt-#{$name}
    +rem(padding-top, $value)

  .pb-#{$name}
    +rem(padding-bottom, $value)

// Horizontal alignment ($gutter/$gutter-half)

.pl
  +rem(padding-left, $gutter)

.pl-h
  +rem(padding-left, $gutter-half)

.pr
  +rem(padding-right, $gutter)

.pr-h
  +rem(padding-right, $gutter-half)

.px
  +rem(padding-left, $gutter)
  +rem(padding-right, $gutter)

.px-h
  +rem(padding-left, $gutter-half)
  +rem(padding-right, $gutter-half)

// Bump

.p-bump
  +bump(padding, box)

.p-bump-h
  +bump(padding, baselines gutters-half)

// Resets

.p-0
  padding: 0

.px-0
  padding-left: 0
  padding-right: 0

.py-0
  padding-bottom: 0
  padding-top: 0

.pt-0
  padding-top: 0

.pr-0
  padding-right: 0

.pb-0
  padding-bottom: 0

.pl-0
  padding-left: 0


$color-primary: #FC4C02

@mixin transition($params)
  transition: $params
  -webkit-transition: $params
  -moz-transition: $params

@mixin transform($params)
  transform: $params
  -webkit-transform: $params
  -moz-transform: $params

Revert primary color back to do gray

$color-primary: #222

@mixin transition($params)
  transition: $params
  -webkit-transition: $params
  -moz-transition: $params

@mixin transform($params)
  transform: $params
  -webkit-transform: $params
  -moz-transform: $params


.speaker-preview
  .speaker-name
    font-weight: 300
    font-size: $size-4

  a.speaker-name:not(:hover)
    color: $grey-darker

  .subtitle
    font-size: $size-6
    font-weight: 300

  .speaker-picture
    background: $white-bis
    border-radius: 25px
    width: 50px
    height: 50px
    border: 1px solid lighten($grey-lighter, 5)
    .icon-user
      color: lighten($grey, 15)

Disable overflow on speaker name / description

.speaker-preview
  .speaker-name
    font-weight: 300
    font-size: $size-4

  a.speaker-name:not(:hover)
    color: $grey-darker

  .subtitle
    font-size: $size-6
    font-weight: 300

  .media-content
    overflow: unset

  .speaker-picture
    background: $white-bis
    border-radius: 25px
    width: 50px
    height: 50px
    border: 1px solid lighten($grey-lighter, 5)
    .icon-user
      color: lighten($grey, 15)


@mixin grid
  list-style: none
  margin-right: 0
  margin-left: -$grid-gutter
  padding-left: 0
  padding-right: 0

@mixin grid-item
  display: inline-block
  padding-left: $grid-gutter
  vertical-align: top
  width: 100%
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

Fix letter spacing to avoid grid collapse

@mixin grid
  list-style: none
  margin-right: 0
  margin-left: -$grid-gutter
  padding-left: 0
  padding-right: 0
  letter-spacing: -1000em

@mixin grid-item
  display: inline-block
  padding-left: $grid-gutter
  vertical-align: top
  width: 100%
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box
  letter-spacing: 0


#logo
  +span-columns(1)
  -webkit-filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  img
    margin:
      left: -6px
      top: -4px
    height: 65px

header
  +outer-container
  margin:
    top: 30px
    bottom: 47px

.navigation
  +span-columns(9)
  li
    display: inline-block
    float: right
    margin:
      top: $small-margin
  a
    color: darken($medium-gray, 30%)
    margin:
      left: $medium-margin / 4

Add slight border-top on body tag

body
  border-top: 1px solid rgba($matcha-green, .4)

#logo
  +span-columns(1)
  -webkit-filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  filter: drop-shadow( 0px 3px 1px lighten($light-gray, 5%))
  img
    margin:
      left: -6px
      top: -4px
    height: 65px

header
  +outer-container
  margin:
    top: 30px
    bottom: 47px

.navigation
  +span-columns(9)
  li
    display: inline-block
    float: right
    margin:
      top: $small-margin
  a
    color: darken($medium-gray, 30%)
    margin:
      left: $medium-margin / 4


@import 'styles/colors'
@import 'styles/animations'

.container
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: #101010e3
  z-index: 99999
  overflow-x: hidden
  overflow-y: auto
  position: fixed

.close
  top: 1rem
  right: 3vw
  position: fixed
  z-index: 99999
  transition: .5s ease
  &:hover
    color: $activeColor

.showOnMobile
  animation: showOnMobile .5s ease-in-out

.hideOnMobile
  animation: hideOnMobile .5s ease-in-out forwards

.showOnLargeScreens
  animation: showOnLargeScreens .5s ease-in-out

.hideOnLargeScreens
  animation: hideOnLargeScreens .5s ease-in-out forwards

Update close button on ScreenOverlay position

@import 'styles/colors'
@import 'styles/animations'

.container
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  background-color: #101010e3
  z-index: 99999
  overflow-x: hidden
  overflow-y: auto
  position: fixed

.close
  top: 1rem
  right: 1.5rem
  position: fixed
  z-index: 99999
  transition: .5s ease
  &:hover
    color: $activeColor

.showOnMobile
  animation: showOnMobile .5s ease-in-out

.hideOnMobile
  animation: hideOnMobile .5s ease-in-out forwards

.showOnLargeScreens
  animation: showOnLargeScreens .5s ease-in-out

.hideOnLargeScreens
  animation: hideOnLargeScreens .5s ease-in-out forwards


.single
    display: flex
    flex-direction: column
    overflow-x: auto
    font-size: 18px

    .single-content
        p
            text-align: justify
        img
            max-width: 100%
            max-height: 600px
            margin: 20px 0
            border: 1px solid rgba(0, 0, 0, 0.1)
            display: block
            background-color: white
        ol
            margin-bottom: 2em
            li
                list-style-type: decimal !important
        ul
            margin-bottom: 2em
            li
                list-style-type: square !important
                list-style-position: inside
                margin-left: 20px

    .single-replies
        li
            margin: 0 !important
            padding: 1em 0

Fix post image dimensions on mobile

.single
    display: flex
    flex-direction: column
    overflow-x: auto
    font-size: 18px

    .single-content
        p
            text-align: justify
        img
            max-width: 100%
            max-height: 600px
            height: auto
            margin: 20px 0
            border: 1px solid rgba(0, 0, 0, 0.1)
            display: block
            background-color: white
        ol
            margin-bottom: 2em
            li
                list-style-type: decimal !important
        ul
            margin-bottom: 2em
            li
                list-style-type: square !important
                list-style-position: inside
                margin-left: 20px

    .single-replies
        li
            margin: 0 !important
            padding: 1em 0


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

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

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


$_default-variant: $mre-glyph-set-hant

@if ( $mre-default-variant == hans )
  $_default-variant: $mre-glyph-set-hans

// **
// * Functions
// *
@function mre-biaodian( $generic: Sans, $set: Pro )
  $which: 'Biaodian Pro'

  @if ( $set == simp )
    $which: 'Biaodian'
    $set: ''
  @else if ( $set == Pro )
    $set: ''
  @else
    $set: ' ' + $set
  @return $which + ' ' + $generic + $set

@function mre-typeface( $typeface: sans, $set: default, $pre: null )
  @if ( $set == default )
    $set: ''
  @else
    $set: ' ' + $set

  @if ( $pre == null or $pre == '' )
    @return $typeface + $set

  @return $pre + ', ' + $typeface + $set

@import extend/sans
@import extend/serif
@import extend/cursive
@import extend/mono

%mre-ligature
  -moz-font-feature-settings: 'liga'
  -ms-font-feature-settings: 'liga'
  -webkit-font-feature-settings: 'liga'
  font-feature-settings: 'liga'

Fix preferred Chinese fonts not carrrying out

$_default-variant: if( $mre-default-variant == hans, $mre-glyph-set-hans, $mre-glyph-set-hant )

// **
// * Functions
// *
@function mre-biaodian( $generic: Sans, $set: Pro )
  @if ( $set == simp )
    @return 'Biaodian ' + $generic
  @return 'Biaodian Pro' + if( $set == Pro, null, ' ' + $generic + ' ' + $set )

@function mre-typeface( $typeface: 'Han Heiti', $set: default, $pre: null )
  $typeface: if( $set == default, $typeface, $typeface + ' ' + $set )
  @return if( $pre == null or $pre == '', $typeface, ($pre, $typeface))

@import extend/sans
@import extend/serif
@import extend/cursive
@import extend/mono

%mre-ligature
  -moz-font-feature-settings: 'liga'
  -ms-font-feature-settings: 'liga'
  -webkit-font-feature-settings: 'liga'
  font-feature-settings: 'liga'


@import 'compass/css3'
@import 'compass/utilities/general/clearfix'

// Units
$unit: 20px
$header-height: ($unit * 3)

// Colors
$purple-color: #6a0bc1
$border-color: rgba(black, 0.1)
$hero-bg-color: #eeeeef

// Mixins
@mixin avant-garde
  font-family: 'ITC Avant Garde Gothic W04', 'Avant Garde', sans-serif
  text-transform: uppercase
  letter-spacing: 1px

@mixin garamond
  font-family: 'Adobe Garamond W08', 'Garamond', serif

@mixin font-smoothing($value: antialiased)
  @if $value == antialiased
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
  @else
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto

Fix actual hero bg color

@import 'compass/css3'
@import 'compass/utilities/general/clearfix'

// Units
$unit: 20px
$header-height: ($unit * 3)

// Colors
$purple-color: #6a0bc1
$border-color: rgba(black, 0.1)
$hero-bg-color: #ececec

// Mixins
@mixin avant-garde
  font-family: 'ITC Avant Garde Gothic W04', 'Avant Garde', sans-serif
  text-transform: uppercase
  letter-spacing: 1px

@mixin garamond
  font-family: 'Adobe Garamond W08', 'Garamond', serif

@mixin font-smoothing($value: antialiased)
  @if $value == antialiased
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
  @else
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto


@import "compass/layout/sticky-footer"
@include sticky-footer(36px, "#root", "#root-footer", "#footer")

#primary-breadcrumb

    .logo
        margin-right: 2px

    li
        font-size: 20px
        font-family: "Helvetica Neue", Helvetica, sans-serif
        font-weight: 200

    li + li:before
        padding: 0 0 0 4px
        content: '/'

.media
    margin-bottom: 15px

.nav-tabs
    margin-bottom: 15px

#footer
    margin-top: 30px

.panel-heading
    h1, h2, h3, h4, h5, h6
        margin: 0

.has-error label
    color: #b94a48

label
    .optional, .required, .error
        font-size: 0.85em

    .optional, .required
        font-size: 0.85em
        &:before
            content: '['
        &:after
            content: ']'

Fix breadcrumb padding for non-links

@import "compass/layout/sticky-footer"
@include sticky-footer(36px, "#root", "#root-footer", "#footer")

#primary-breadcrumb

    .logo
        margin-right: 2px

    li
        font-size: 20px
        font-family: "Helvetica Neue", Helvetica, sans-serif
        font-weight: 200

    li + li:before
        padding: 0 2px 0 4px
        content: '/ '

.media
    margin-bottom: 15px

.nav-tabs
    margin-bottom: 15px

#footer
    margin-top: 30px

.panel-heading
    h1, h2, h3, h4, h5, h6
        margin: 0

.has-error label
    color: #b94a48

label
    .optional, .required, .error
        font-size: 0.85em

    .optional, .required
        font-size: 0.85em
        &:before
            content: '['
        &:after
            content: ']'


@import branding

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

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

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

Add styling and animation to img thumbnail

@import branding
@import animations.sass

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

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

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

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


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

/* external css: flickity.css */

// * {
//   -webkit-box-sizing: border-box;
//   box-sizing: border-box;
// }
//
// body { font-family: sans-serif; }
//
// .gallery {
//   background: #EEE;
// }
//
// .gallery-cell {
//   width: 66%;
//   height: 200px;
//   margin-right: 10px;
//   background: #8C8;
//   counter-increment: gallery-cell;
// }
//
// /* cell number */
// .gallery-cell:before {
//   display: block;
//   text-align: center;
//   content: counter(gallery-cell);
//   line-height: 200px;
//   font-size: 80px;
//   color: white;
// }

@import "bootstrap-sprockets"
@import "bootstrap"

Remove bullets from ul via sass

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

/* external css: flickity.css */

ul
  list-style-type: none

@import "bootstrap-sprockets"
@import "bootstrap"


@mixin col-classes($size, $columns: 12)
  @for $i from 1 through $columns
    $percentage: $i / $columns * 100 + %

    &.mt-#{$size}#{$i}
      width: calc(#{$percentage} - #{$gutter * ($columns + $i) / $columns})

    &.mt-#{$size}#{$i}-offset
      margin-left: calc(#{$percentage} - #{$gutter * ($i - $columns) / $columns})

.mt-row
  margin: 0 auto

  &:after
    content: ""
    display: table
    clear: both

  .mt-col
    float: left
    box-sizing: border-box
    margin: 0 0 $gutter $gutter
    padding: $gutter / 2

    &:last-child
      margin-right: $gutter

    @include col-classes("xxs", 4)

    @media #{$xs-or-larger}
      @include col-classes("xs", 4)

    @media #{$s-or-larger}
      @include col-classes("s", 8)

    @media #{$m-or-larger}
      @include col-classes("m")

    @media #{$l-or-larger}
      @include col-classes("l")

    @media #{$xl-or-larger}
      @include col-classes("xl")

    @media #{$xxl-or-larger}
      @include col-classes("xxl")

    @media #{$xxl-or-larger}
      @include col-classes("xxxl")

Expand .mt-col to 100% when under lowest specified screen size

@mixin col-classes($size, $columns: 12)
  @for $i from 1 through $columns
    $percentage: $i / $columns * 100 + %

    &.mt-#{$size}#{$i}
      width: calc(#{$percentage} - #{$gutter * ($columns + $i) / $columns})

    &.mt-#{$size}#{$i}-offset
      margin-left: calc(#{$percentage} - #{$gutter * ($i - $columns) / $columns})

.mt-row
  margin: 0 auto

  &:after
    content: ""
    display: table
    clear: both

  .mt-col
    float: left
    box-sizing: border-box
    margin: 0 0 $gutter $gutter
    padding: $gutter / 2
    width: calc(100% - #{$gutter * 2})

    &:last-child
      margin-right: $gutter

    @include col-classes("xxs", 4)

    @media #{$xs-or-larger}
      @include col-classes("xs", 4)

    @media #{$s-or-larger}
      @include col-classes("s", 8)

    @media #{$m-or-larger}
      @include col-classes("m")

    @media #{$l-or-larger}
      @include col-classes("l")

    @media #{$xl-or-larger}
      @include col-classes("xl")

    @media #{$xxl-or-larger}
      @include col-classes("xxl")

    @media #{$xxl-or-larger}
      @include col-classes("xxxl")


#photographs-index
  header
    text-align: center

.photo-grid
  .photo
    img
      box-shadow: 0 0 6px 1px rgba(0,0,0,.1)

#photographs-sidebar
  #photographs-creator
    margin:
      bottom: 20px

  .recommendations
    .recommend
      color: rgb(0,0,0)
    .recommended

  table
    width: 100%

Align images in centre on photo view

#photographs-index
  header
    text-align: center

#photographs-show
  .image
    text-align: center

.photo-grid
  .photo
    img
      box-shadow: 0 0 6px 1px rgba(0,0,0,.1)

#photographs-sidebar
  #photographs-creator
    margin:
      bottom: 20px

  .recommendations
    .recommend
      color: rgb(0,0,0)
    .recommended

  table
    width: 100%


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

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

Tweak API, RSS icon positioning

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

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


=cols
  #cols
    padding: 0

    li.source
      background: $color_grey_xlight
      border-bottom: 1px solid #ddd
      padding: 6px
      text-align: left

      &:dir(rtl)
        text-align: right

      &:last-child
        border-bottom: none

      .date
        float: right
        &:dir(rtl)
          float: left
        background-color: $color_grey_medium
        color: #ffffff
        font-size: 10px
        font-weight: bold
        padding: 5px
        margin: 5px

      .designation
        display: inline-block
        min-width: 260px

        a
          color: #333
          font-weight: bold
          margin: 5px
          display: inline-block

      .submission-count
        display: inline-block

        span
          border: 1px solid #dedede
          padding: 3px
          margin-right: 5px
          font-size: 12px

          &.unread
            border: 0

Make minimum width of designation in percent rather than pixel

=cols
  #cols
    padding: 0

    li.source
      background: $color_grey_xlight
      border-bottom: 1px solid #ddd
      padding: 6px
      text-align: left

      &:dir(rtl)
        text-align: right

      &:last-child
        border-bottom: none

      .date
        float: right
        &:dir(rtl)
          float: left
        background-color: $color_grey_medium
        color: #ffffff
        font-size: 10px
        font-weight: bold
        padding: 5px
        margin: 5px

      .designation
        display: inline-block
        min-width: 35%

        a
          color: #333
          font-weight: bold
          margin: 5px
          display: inline-block

      .submission-count
        display: inline-block

        span
          border: 1px solid #dedede
          padding: 3px
          margin-right: 5px
          font-size: 12px

          &.unread
            border: 0


#board
    position: relative
    +set-dims(100vw, 100vh)
    background: $board-color

    .nano-pane
        display: block !important

    .board-header
        position: relative
        text-align: center

    .posts
        position: relative

Fix styles for pre tag on board to cut off and align properly

#board
    position: relative
    +set-dims(100vw, 100vh)
    background: $board-color

    .nano-pane
        display: block !important

    .board-header
        position: relative
        text-align: center

    .posts
        position: relative

    pre
        width: 100%
        display: inline-block
        text-overflow: ellipsis
        text-align: left !important
        overflow: hidden


.mod-content
  padding: 2rem
  .lt-ie9 &
    padding: 2em

  h1, h2, h3
    margin-bottom: .5rem
    .lt-ie9 &
      margin-bottom: .5em

  h1
    @extend %h1

  h2
    @extend %h2

  h3
    @extend %h3

  ul, ol, p
    margin-bottom: 1rem
    .lt-ie9 &
      margin-bottom: 1em

  ul
    list-style: square

  ol
    list-style: decimal

  ul,
  ol
    margin-left: 1.5rem
    .lt-ie9 &
      margin-left: 1.5em

  @for $i from 1 through 20
    .percent_#{$i * 5}
      width: #{$i * 5%}

  img.pull-right
    float: right
    margin-left: 1em

  header
    display: flex
    align-items: center
    margin-bottom: 0.5rem
    .lt-ie9 &
      margin-bottom: 0.5em

    h1
      margin-bottom: 0

    img
      max-height: 1.7rem
      width: auto
      margin-right: 1rem
      .lt-ie9 &
        max-height: 1.7em
        margin-right: 1em

        img[src$=".svg"]
          display: none

    .lt-ie10 &, .safari5 &, .safari6 &
      h1, img
        display: inline-block
        vertical-align: middle

Fix style after fixing linting issues

.mod-content
  padding: 2rem
  .lt-ie9 &
    padding: 2em

  h1, h2, h3
    margin-bottom: .5rem
    .lt-ie9 &
      margin-bottom: .5em

  h1
    @extend %h1

  h2
    @extend %h2

  h3
    @extend %h3

  ul, ol, p
    margin-bottom: 1rem
    .lt-ie9 &
      margin-bottom: 1em

  ul
    list-style: square

  ol
    list-style: decimal

  ul,
  ol
    margin-left: 1.5rem
    .lt-ie9 &
      margin-left: 1.5em

  @for $i from 1 through 20
    .percent_#{$i * 5}
      width: #{$i * 5%}

  img.pull-right
    float: right
    margin-left: 1em

  header
    display: flex
    align-items: center
    margin-bottom: 0.5rem
    .lt-ie9 &
      margin-bottom: 0.5em
      img[src$=".svg"]
        display: none
    h1
      margin-bottom: 0

    img
      max-height: 1.7rem
      width: auto
      margin-right: 1rem
      .lt-ie9 &
        max-height: 1.7em
        margin-right: 1em

    .lt-ie10 &, .safari5 &, .safari6 &
      h1, img
        display: inline-block
        vertical-align: middle


.new-input-slider
  // Clearfix.
  overflow: visible

  label, .left-buttons, .quinn, .right-buttons, .value, .show-info
    float: left
    margin-bottom: 5px
    height: 22px

  label
    width: 124px

  .left-buttons
    width: 40px

  .quinn
    width: 110px

  .right-buttons, .show-info
    width: 20px

  .value
    padding-right: 5px
    text-align: right
    width: 99px

  .info
    background: #eee
    clear: both
    margin: 0 0 10px
    padding: 7px 10px
    width: 418px - 20px

Reduce slider label and value back to 12px as before.

.new-input-slider
  // Clearfix.
  overflow: visible

  label, .left-buttons, .quinn, .right-buttons, .value, .show-info
    float: left
    margin-bottom: 5px
    height: 22px

  label
    width: 124px

  .left-buttons
    width: 40px

  .quinn
    width: 110px

  .right-buttons, .show-info
    width: 20px

  .value
    padding-right: 5px
    text-align: right
    width: 99px

  .info
    background: #eee
    clear: both
    margin: 0 0 10px
    padding: 7px 10px
    width: 418px - 20px

  // Adjustment to vertical alignment of label and value text.
  .label, .value
    font-size: 12px
    padding-top: 1px
    height: 21px


body
  padding-top: 60px

#plattform_brand
  padding: 10px 0px 10px 0px
  margin-left: 0px

#product_brand
  margin-left: 0px
  padding: 10px 15px 10px 5px

pre
  background-color: white
  border: 0px
  border-radius: 0px
  display: block
  font-size: 10px
  line-height: 18px
  margin: 0px
  padding: 0px
  white-space: pre-wrap
  word-wrap: break-word

code, pre
  font-family: Arial

code
  border-radius: 0px
  border-width: 0px
  color: black
  background-color: white
  font-size: 10px
  padding: 0px

.auto_width
  width: auto

.ui-widget
  font-family: Arial
  font-size: 10px

html, body, div, span
  font-family: Arial
  font-size: 10px

.nav a
  font-family: Arial
  font-size: 10px

.nested_comments
  margin-left: 30px

.nested_comments .nested_comments .nested_comments .nested_comments
  margin-left: 0

.footer
  margin-top: 20px

.floating_form fieldset .control-group
  float: left
  margin-right: 10px
  margin-bottom: 0px

Remove font-size preference from span.

body
  padding-top: 60px

#plattform_brand
  padding: 10px 0px 10px 0px
  margin-left: 0px

#product_brand
  margin-left: 0px
  padding: 10px 15px 10px 5px

pre
  background-color: white
  border: 0px
  border-radius: 0px
  display: block
  font-size: 10px
  line-height: 18px
  margin: 0px
  padding: 0px
  white-space: pre-wrap
  word-wrap: break-word

code, pre
  font-family: Arial

code
  border-radius: 0px
  border-width: 0px
  color: black
  background-color: white
  font-size: 10px
  padding: 0px

.auto_width
  width: auto

.ui-widget
  font-family: Arial
  font-size: 10px

html, body, div
  font-family: Arial
  font-size: 10px

.nav a
  font-family: Arial
  font-size: 10px

.nested_comments
  margin-left: 30px

.nested_comments .nested_comments .nested_comments .nested_comments
  margin-left: 0

.footer
  margin-top: 20px

.floating_form fieldset .control-group
  float: left
  margin-right: 10px
  margin-bottom: 0px


.footer-widgets
  max-width: 980px
  margin: auto
  clear: both

.header-widgets
  float: left
  width: 81%
  margin: 0px 0px 3px 3px

.sidebar-widgets
  float: left

Fix sidebar width in show question view


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
    .caret
        display: none

Fix ticket edit dialog in IE

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
    .caret
        display: none
    .dialog-content
        textarea
            max-height: 190px !important


.plan
  display: none

  &__title
    color: get-color(raiz)
    font-size: 24px
    font-weight: 600
    text-align: center

  &__price
    color: get-color(rock)
    font-size: 14px
    text-align: center

    span
      color: get-color(gafieira)
      font-size: 24px
      font-weight: 600

  &__features
    list-style: none
    margin-left: 0
    margin-right: 0
    padding: 0

  &__feature
    background-color: get-color((color: raiz, opacity: .1))
    color: get-color((color: dark, opacity: .6))
    font-size: 14px
    font-weight: 600
    padding: 15px

    &:nth-child(even)
      background-color: get-color(air)

    &--inactive
      color: get-color((color: dark, opacity: .3))

  &__check
    margin-right: 13px

  &__badge
    background-color: get-color(cancan)
    border-radius: 4px
    color: get-color(air)
    font-size: 12px
    font-weight: 700
    left: 50%
    margin: -36px auto 0
    padding: 7px 16px
    position: absolute
    text-align: left
    text-transform: uppercase
    transform: translate(-50%, -50%)

  &--unselected
    display: none

  &--selected
    display: flex

Fix align features plan component.

.plan
  display: none

  &__title
    color: get-color(raiz)
    font-size: 24px
    font-weight: 600
    text-align: center

  &__price
    color: get-color(rock)
    font-size: 14px
    text-align: center

    span
      color: get-color(gafieira)
      font-size: 24px
      font-weight: 600

  &__features
    list-style: none
    margin-left: 0
    margin-right: 0
    padding: 0

  &__feature
    align-items: flex-start
    background-color: get-color((color: raiz, opacity: .1))
    color: get-color((color: dark, opacity: .6))
    display: flex
    flex-direction: row
    font-size: 14px
    font-weight: 600
    padding: 15px

    &:nth-child(even)
      background-color: get-color(air)

    &--inactive
      color: get-color((color: dark, opacity: .3))

  &__check
    margin-right: 13px

  &__badge
    background-color: get-color(cancan)
    border-radius: 4px
    color: get-color(air)
    font-size: 12px
    font-weight: 700
    left: 50%
    margin: -36px auto 0
    padding: 7px 16px
    position: absolute
    text-align: left
    text-transform: uppercase
    transform: translate(-50%, -50%)

  &--unselected
    display: none

  &--selected
    display: flex


@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Montserrat:300,500,600|Material+Icons|Lobster')
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')

Load Charis font for Arkis logo

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Montserrat:300,500,600|Material+Icons|Lobster')
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')

@font-face
  font-family: Charis
  font-style: normal
  font-weight: bold
  src: local('Charis'), url('https://arkis.io/home/fonts/charissil-b-webfont.woff2') format('woff2'), url('https://arkis.io/home/fonts/charissil-b-webfont.woff') format('woff'), url('https://arkis.io/home/fonts/CharisSIL-B.ttf') format('ttf')


html
  background: $body-bg

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

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

ul.no-style
  list-style: none

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

.reveal-modal-bg
  z-index: 100

.white
  background: white

.clearfix
  +clearfix

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

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

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

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

.see-more
  color: $primary-color
  text-transform: uppercase
  font-size: 130%
  font-weight: 300
  i
    padding-left: +emCalc(5px)

.alert-box.hide
  display: none

.error-page
  .columns
    text-align: center
    margin: +emCalc(50px, 0)

Fix list style with paragraph for firefox

html
  background: $body-bg

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

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

ul.no-style
  list-style: none

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

.reveal-modal-bg
  z-index: 100

.white
  background: white

.clearfix
  +clearfix

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

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

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

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

.see-more
  color: $primary-color
  text-transform: uppercase
  font-size: 130%
  font-weight: 300
  i
    padding-left: +emCalc(5px)

.alert-box.hide
  display: none

.error-page
  .columns
    text-align: center
    margin: +emCalc(50px, 0)

ul, ol
  li
    p
      display: inline-block


$red: red
$green: green
$blue: blue
$brown: brown

$body-bg: #fafafa
$text-color: #333

$link-color: $blue;

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

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, "Times New Roman", Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;

$font-family-base: $font-family-sans-serif;

Remove semicolons in SASS vars

$red: red
$green: green
$blue: blue
$brown: brown

$body-bg: #fafafa
$text-color: #333

$link-color: $blue

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

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif
$font-family-serif: Georgia, "Times New Roman", Times, serif
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace

$font-family-base: $font-family-sans-serif


.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

.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

Align kebab dropdown tip with kebab

.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


// Media print specific styles ****
#top-menu, #header, #main-menu, #sidebar, #footer, .contextual, .other-formats
  display: none

#main
  background: white

#content
  width: 99%
  margin: 0
  padding: 0
  border: 0
  background: white
  overflow: visible !important

h1
  display: none

Hide sidebar navigation in print.

// Media print specific styles ****
#top-menu, #header, #main-menu, #sidebar-column, #footer, .contextual, .other-formats
  display: none

#main
  background: white

#content
  width: 99%
  margin: 0
  padding: 0
  border: 0
  background: white
  overflow: visible !important

h1
  display: none


[data-view="schools.show"]
  .grid
    +media($breakpoint-normal)
      &--teacher, &--group
        +grid-column(6)

Change teacher grid on school page

[data-view="schools.show"]
  .grid
    &--teacher
      +grid-column(6)

    +media($breakpoint-normal)
      &--group
        +grid-column(6)


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

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

Add pages folder to css

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

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


.menu
  display: flex
  flex-flow: row wrap
  justify-content: flex-start
  align-items: stretch

  width: 100%
  height: 40px

  background: #3D77E2

.menu-item
  width: 100px

  padding: 0 9px

  line-height: 39px

  color: darken(#FFFFFF, 3%)
  text-align: center
  text-decoration: none

  transition: color, 0.4s

  &:hover
    color: #FFFFFF

    background: #3160B8

Fix menu by removing .l-container paddings.

.menu
  display: flex
  flex-flow: row wrap
  justify-content: flex-start
  align-items: stretch

  width: 100%
  height: 40px

  background: #3D77E2

  .l-container
    padding: 0

.menu-item
  width: 100px

  padding: 0 9px

  line-height: 39px

  color: darken(#FFFFFF, 3%)
  text-align: center
  text-decoration: none

  transition: color, 0.4s

  &:hover
    color: #FFFFFF

    background: #3160B8


.comment
  line-height: 1em
  margin-bottom: 9px
  clear: both
  overflow: auto

.comment-photo
  width: 50px
  height: 50px
  float: left

.comment-text
  margin-left: 59px
  margin-bottom: 0
  font-size: 0.8em

.comment-name
  font-weight: bold

.comment-body
  padding-left: 9px

Switch to overflow: hidden for clearfix

.comment
  line-height: 1em
  margin-bottom: 9px
  clear: both
  overflow: hidden

.comment-photo
  width: 50px
  height: 50px
  float: left

.comment-text
  margin-left: 59px
  margin-bottom: 0
  font-size: 0.8em

.comment-name
  font-weight: bold

.comment-body
  padding-left: 9px


#header
  background-color: $brand-color
  position: fixed
  width: 100%
  z-index: 9999999

  .top-bar
    background-color: $brand-color

    a
      font-size: 1.1rem

    .top-bar-section
      .has-dropdown
        &:hover, &.hover
          a
            background-color: $lightest-brand-color
            color: #fff !important

            &.addon-link
              background-color: transparent
              color: #4c8dcf !important

          & > a:after
            border-color: rgba(255, 255, 255, 1) transparent transparent transparent

    .top-bar-section
      ul
        li
          & > a
            background-color: $brand-color
            padding-right: 44px !important

            &:hover
              background-color: $lightest-brand-color

        & > .divider
          border-right-color: $top-menu-border-color

  .title-area
    width: 239px

    a
      color: #fff

Fix the right padding of the top menus

#header
  background-color: $brand-color
  position: fixed
  width: 100%
  z-index: 9999999

  .top-bar
    background-color: $brand-color

    a
      font-size: 1.1rem

    .top-bar-section
      .has-dropdown
        &:hover, &.hover
          a
            background-color: $lightest-brand-color
            color: #fff !important

            &.addon-link
              background-color: transparent
              color: #4c8dcf !important

          & > a:after
            border-color: rgba(255, 255, 255, 1) transparent transparent transparent

    .top-bar-section
      ul
        li
          & > a
            background-color: $brand-color

            &:hover
              background-color: $lightest-brand-color

        & > .divider
          border-right-color: $top-menu-border-color

  .title-area
    width: 239px

    a
      color: #fff


.article-preview
  width: 45%
  box-shadow: 0px 3px 6px rgba(0,0,0,0.3)

  header
    position: relative

    img
      width: 100%

  .article-preview-overlay
    background-color: rgba(0,0,0,0.3)
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    display: flex
    align-items: center
    justify-content: center
    padding: 2%

  .article-preview-heading
    color: white
    text-align: center
    font-size: 1.4rem
    font-weight: normal

  .article-preview-text, footer
    padding: 3%

  footer
    display: flex
    justify-content: space-between
    align-items: center

    time
      font-size: 0.9rem

      &::before
        content: ''
        display: inline-block
        vertical-align: middle
        width: 30px
        height: 30px
        background:
          image: url('../img/icons/time-icon.svg')
          repeat: no-repeat
          size: cover

// Media Queries Article Preview //
@import '../media/_media_article-preview'

Increase alpha value of article-preview-overlay background

.article-preview
  width: 45%
  box-shadow: 0px 3px 6px rgba(0,0,0,0.3)

  header
    position: relative

    img
      width: 100%

  .article-preview-overlay
    background-color: rgba(0,0,0,0.5)
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    display: flex
    align-items: center
    justify-content: center
    padding: 2%

  .article-preview-heading
    color: white
    text-align: center
    font-size: 1.4rem
    font-weight: normal

  .article-preview-text, footer
    padding: 3%

  footer
    display: flex
    justify-content: space-between
    align-items: center

    time
      font-size: 0.9rem

      &::before
        content: ''
        display: inline-block
        vertical-align: middle
        width: 30px
        height: 30px
        background:
          image: url('../img/icons/time-icon.svg')
          repeat: no-repeat
          size: cover

// Media Queries Article Preview //
@import '../media/_media_article-preview'


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

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

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

  .copy--title
    margin: 0

.stack__intro__content
  position: relative
  overflow: hidden

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

  .no-js &
    max-height: none

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

Make the results position relative again so the double mpu moves with the results when 'read more' is clicked.

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

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

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

  .copy--title
    margin: 0

.stack .results
  position: relative

.stack__intro__content
  position: relative
  overflow: hidden

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

  .no-js &
    max-height: none

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


// *************************************
//
//   Markdown
//   -> Namespaced Markdown styles
//
// *************************************

.markdown

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

  // Blockquote

  blockquote
    padding-left: $b-space

  // Headings

  h1, h2, h3, h4, h5, h6
    font-family: $b-fontFamily
    font-weight: bold
    margin-bottom: $b-space-s

  h1
    font-family: $b-fontFamily-heading
    margin-bottom: $b-space-xs

  h2
    font-size: $b-fontSize-l

  h3
    color: $c-subdue
    font-size: $b-fontSize-l
    font-style: italic
    font-weight: normal

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

  h5
    font-size: $b-fontSize

  h6
    color: $c-subdue
    font-size: $b-fontSize
    font-style: italic
    font-weight: normal

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

  // Links

  a
    &[href^='http']
      word-wrap: break-word // Break lengthy URLs entered in content

  // Code

  code
    background: $c-background
    border-radius: $b-borderRadius
    display: inline-block
    padding-left: $b-space-xs
    padding-right: $b-space-xs

Add Markdown blockquote and list styles

// *************************************
//
//   Markdown
//   -> Namespaced Markdown styles
//
// *************************************

.markdown

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

  // Blockquote

  blockquote
    border-left: 4px solid $c-border
    margin: $b-space 0
    padding-left: $b-space

  // Lists

  ol, ul
    padding-left: $b-space

    > li
      margin-bottom: $b-space-s

  // Headings

  h1, h2, h3, h4, h5, h6
    font-family: $b-fontFamily
    font-weight: bold
    margin-bottom: $b-space-s

  h1
    font-family: $b-fontFamily-heading
    margin-bottom: $b-space-xs

  h2
    font-size: $b-fontSize-l

  h3
    color: $c-subdue
    font-size: $b-fontSize-l
    font-style: italic
    font-weight: normal

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

  h5
    font-size: $b-fontSize

  h6
    color: $c-subdue
    font-size: $b-fontSize
    font-style: italic
    font-weight: normal

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

  // Links

  a
    &[href^='http']
      word-wrap: break-word // NOTE: Added to break URLs entered in content

  // Code

  code
    background: $c-background
    border-radius: $b-borderRadius
    display: inline-block
    padding-left: $b-space-xs
    padding-right: $b-space-xs


/* Put custom presentation styles in this file! */

Add some basic default styling.

/* Put custom presentation styles in this file! */

$font-size: 24px
$leading: 30px

.centered
  text-align: center

.slide
  padding: $leading 0 0 0

  pre, ol, ul, li, p, h1, h2, h3, h4, h5, h6
    margin: 0 0 $leading 0
    padding: 0

  code
    font-family: "Source Code Pro"

  h1, h2, h3, h4, h5, h6
    font-family: "Source Sans Pro"

  h1
    font-size: 3em
    margin-top: 1em

  h2
    font-size: 2em
    color: rgb(203,96,21)

  pre
    $pre-bg: #f8f8f8
    padding: $leading / 4
    border-radius: 10px
    border: solid 1px darken($pre-bg, 10%)
    background: $pre-bg

  ol, ul
    list-style: none

    li:before
      // content: '\2605' // ★
      content: '\261e' // ☞
      margin: 0 1em

  ::selection
    background: #f93
    color: #fff

  a,
  a:hover,
  a:focus,
  a:active,
  a:visited
    color: #369
    text-decoration: none

  a:hover, a:focus
    text-decoration: underline

.deck-container
  background: #fff
  font-family: "Source Sans Pro"
  font-size: $font-size
  line-height: $leading / $font-size
  -webkit-font-smoothing: antialiased
  -webkit-text-size-adjust: 100%

.deck-before, .deck-previous
  opacity: 0.4

.deck-status
  font-size: 0.6666em

.deck-menu
  .slide
    background: #eee
  .deck-current
    background: #ddf

.no-touch .deck-container.deck-menu .slide:hover
  background: #ddf


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

textarea
  height: +emCalc(200px)

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

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

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

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

label
  abbr
    color: red

Adjust styles for inputs with errors

.input.boolean
  label.checkbox
    input
      margin-right: 0.5em
  &.error
    small
      margin-top: 0.1em
.input.error small.error, form.custom .error .custom.dropdown + small.error
  z-index: 4
  position: relative
  margin-top: +emCalc(-3px)

textarea
  height: +emCalc(200px)

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

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

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

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

.input.error
  span.prefix, span.postfix
    border-color: $alert-color
    background: rgba($alert-color, 0.1)

label
  abbr
    color: red


.panel
  display: block

  p
    clear: both

[data-gallery]
  a.panel
    margin-bottom: 0
    @include clearfix

    &:hover
      @include panel-callout

  a.callout:hover
    cursor: default

Add transition property to module panel background color and icon color

.panel
  display: block

  p
    clear: both

[data-gallery]
  a.panel
    margin-bottom: 0
    transition: background 0.2s ease
    @include clearfix

    i
      transition: color 0.2s ease

    &:hover
      @include panel-callout

  a.callout:hover
    cursor: default


@import globals/variables
@import globals/mixins

@import components/buttons
@import components/forms
@import components/grid
@import components/typography

*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

::-moz-selection
  background: lighten($whodini-green, 40%)
::selection
  background: lighten($whodini-green, 40%)

body
  background-color: #eee
  padding-top: $base-line-height*2

// TODO: factor these out in favor of html5bp approach?
.hide
  display: none
.show
  display: block

Add !important to hide and show

@import globals/variables
@import globals/mixins

@import components/buttons
@import components/forms
@import components/grid
@import components/typography

*
  -moz-box-sizing: border-box
  -webkit-box-sizing: border-box
  box-sizing: border-box

::-moz-selection
  background: lighten($whodini-green, 40%)
::selection
  background: lighten($whodini-green, 40%)

body
  background-color: #eee
  padding-top: $base-line-height*2

// TODO: factor these out in favor of html5bp approach?
.hide
  display: none!important
.show
  display: block!important