.m-claim
  display flex
  align-items center
  height 90vh
  padding 0 $margin
  font-size $font-xlarge-size
  font-weight 500

  article
    width 100%
    margin rem(-43px) auto 0 auto

  p
    margin-top 0
    margin-bottom .25em
    line-height .9
    letter-spacing -0.02em
    max-width 80%
    &.description
      margin-bottom .75em
      line-height 1.1
      font-size rem(22px)

  .btn, .btn-secondary
    color $font-color-3

    &:hover
      color $font-color-2

  @media (max-width: $screen-sm)
    align-items flex-start

    article
      height 100%
      margin 0 auto

      .btn-secondary
        position absolute
        top auto
        bottom $margin

  @media screen and (min-width: $screen-md)
    font-size rem(110px)
    height 95vh

  @media screen and (min-width: $screen-lg)
    padding 0

Modify buttons positions in about page

.m-claim
  display flex
  align-items center
  height 90vh
  padding 0 $margin
  font-size $font-xlarge-size
  font-weight 500

  article
    width 100%
    margin rem(-43px) auto 0 auto

  p
    margin-top 0
    margin-bottom .25em
    line-height .9
    letter-spacing -0.02em
    max-width 80%
    &.description
      margin-bottom .75em
      line-height 1.1
      font-size rem(22px)

  .btn
    color $font-color-2
    margin-left $margin
  .btn-secondary
    color $font-color-3

    &:hover
      color $font-color-2

  @media (max-width: $screen-sm)
    align-items flex-start

    article
      height 100%
      margin 0 auto

      .btn
        position absolute
        top auto
        right $margin
        bottom $margin

      .btn-secondary
        position absolute
        top auto
        bottom $margin

  @media screen and (min-width: $screen-md)
    font-size rem(110px)
    height 95vh

  @media screen and (min-width: $screen-lg)
    padding 0


// Bootstrap Override
th {
    font-weight: normal;
}
label {
    font-weight: normal;
}

// Nav
.navbar-brand {
    text-decoration: none;
}
.nav > li > a {
    font-size: 14px;
    text-decoration: none;
}

// font-size
.btn,
.dropdown-header,
.dropdown-menu,
.form-control {
    font-size: 13px;
}

// line-height
.checkbox label,
.radio label {
    line-height: 20px;
}

// table
table thead > tr > th,
table tbody > tr > td {
    text-align: left;
    padding: 2px 4px;
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-bottom-width: 1px;
}

// http://stackoverflow.com/questions/22920589/bootstrap-3-input-xs-smaller-than-sm
.input-group-xs .form-control,
.input-group-xs .input-group-addon,
.input-group-xs .input-group-btn .btn {
    height: 20px;
    padding: 1px 5px;
    font-size: 13px;
}

Set default line height to 20px for bootstrap buttons

// Bootstrap Override
th {
    font-weight: normal;
}
label {
    font-weight: normal;
}

// Nav
.navbar-brand {
    text-decoration: none;
}
.nav > li > a {
    font-size: 14px;
    text-decoration: none;
}

// font-size
.btn,
.dropdown-header,
.dropdown-menu,
.form-control {
    font-size: 13px;
}

// line-height
.btn-xs, .btn-group-xs > .btn,
.btn-sm, .btn-group-sm > .btn,
.btn-md, .btn-group-md > .btn,
.btn-lg, .btn-group-lg > .btn {
    line-height: 20px;
}
.checkbox label,
.radio label {
    line-height: 20px;
}

// table
table thead > tr > th,
table tbody > tr > td {
    text-align: left;
    padding: 2px 4px;
}

.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-bottom-width: 1px;
}

// http://stackoverflow.com/questions/22920589/bootstrap-3-input-xs-smaller-than-sm
.input-group-xs .form-control,
.input-group-xs .input-group-addon,
.input-group-xs .input-group-btn .btn {
    height: 20px;
    padding: 1px 5px;
    font-size: 13px;
}


@import variables
global-reset()

html
  height 100%

body
  height 100%
  font-size 18px
  font-family Lato, sans-serif
  font-weight 300
  margin 0

a
  color link-color

h1, h2, h3, h4, h5
  font-weight 400

@import layout
@import helpers
@import buttons
@import alerts
@import builds
@import projects
@import workers

Make img max width 100%

@import variables
global-reset()

html
  height 100%

body
  height 100%
  font-size 18px
  font-family Lato, sans-serif
  font-weight 300
  margin 0

a
  color link-color

h1, h2, h3, h4, h5
  font-weight 400

img
  max-width 100%

@import layout
@import helpers
@import buttons
@import alerts
@import builds
@import projects
@import workers


@import 'cozy-ui'

:local
    @extend         $form
    @extend         $form-text
    @extend         $form-button
    @extend         $form-progress

    .visibility
        text-transform  uppercase
        position        absolute
        cursor          pointer
        right           0
        font-weight     bold

    .reset-link
        margin-top      .5em

    progress
        &.pw-weak
            color   red
            &::-webkit-progress-value
                background    red
            &::-moz-progress-bar
                background    red
        &.pw-moderate
            color   orange
            &::-webkit-progress-value
                background    orange
            &::-moz-progress-bar
                background    orange
        &.pw-strong
            color   green
            &::-webkit-progress-value
                background    green
            &::-moz-progress-bar
                background    green

Use better cozy-ui colours variables

@import 'cozy-ui'

:local
    @extend         $form
    @extend         $form-text
    @extend         $form-button
    @extend         $form-progress

    .visibility
        text-transform  uppercase
        position        absolute
        cursor          pointer
        right           0
        font-weight     bold

    .reset-link
        margin-top      .5em

    progress
        &.pw-weak
            color   pomegranate
            &::-webkit-progress-value
                background    pomegranate
            &::-moz-progress-bar
                background    pomegranate
        &.pw-moderate
            color   orange
            &::-webkit-progress-value
                background    texas-rose
            &::-moz-progress-bar
                background    texas-rose
        &.pw-strong
            color   green
            &::-webkit-progress-value
                background    emerald
            &::-moz-progress-bar
                background    emerald


.geniblocks.target-drake-container
  display: flex
  flex-direction: row
  height: 204px
  width: 520px
  background: url('../resources/fablevision/layout-c/target_drake_gizmo.png')
  background-repeat: no-repeat
  background-size: cover
  justify-content: center
  align-self: center
  z-index: 3

  .target-drake-text
    font-family: 'Yanone Kaffeesatz'
    font-size: 30px
    color: white
    margin-top: 70px
    margin-left: -10px

  .organism
    margin-top: 10px

Fix position of target container (fixes issue on Firefox)

.geniblocks.target-drake-container
  display: flex
  flex-direction: row
  height: 195px
  width: 500px
  background: url('../resources/fablevision/layout-c/target_drake_gizmo.png')
  background-repeat: no-repeat
  background-size: cover
  justify-content: center
  align-self: center
  z-index: 3
  position:absolute
  bottom:0px

  .target-drake-text
    font-family: 'Yanone Kaffeesatz'
    font-size: 30px
    color: white
    margin-top: 70px
    margin-left: -10px

  .organism
    margin-top: 10px


.c-vis-composite-buffer,.c-vis-spritesheet-buffer
  display none

Change mouse cursor over rendered image

.c-vis-composite-buffer,.c-vis-spritesheet-buffer
  display none
.c-vis-render-canvas
  cursor move


@media $media-width-tablet {
  article.account {
    .hero {
      background: none;
      // margin-bottom: 20px;

      .img {
        width: 105px
        height: @width;
        margin-right: 20px;
        margin-bottom: -54px;
        margin-left: 20px;
        // margin: 30px 20px;
        // margin-bottom: (@width / -2) - 2px !important;
      }

      h1 {
        font-size: 32px;
        line-height: 32px;
        max-height: 32px;
      }

      .details {
        clear: both;
        background: $content-fill-color;
        padding: 25px
        display: flex;

        ul {
          flex: 1 1 0px;
          margin-top: 50px;
        }

        .bio {
          margin: 0;
          flex: 2 2 0px;
        }
      }
    }
  }
}

Fix spacing on account page

@media $media-width-tablet {
  article.account {
    .hero {
      background: none;
      padding-bottom: 0;
      // margin-bottom: 20px;

      .img {
        width: 105px
        height: @width;
        margin-right: 20px;
        margin-bottom: -54px;
        margin-left: 20px;
        // margin: 30px 20px;
        // margin-bottom: (@width / -2) - 2px !important;
      }

      h1 {
        font-size: 32px;
        line-height: 32px;
        max-height: 32px;
      }

      .details {
        clear: both;
        background: $content-fill-color;
        padding: 25px
        display: flex;

        ul {
          flex: 1 1 0px;
          margin-top: 50px;
        }

        .bio {
          margin: 0;
          flex: 2 2 0px;
        }
      }
    }
  }
}


generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// pull content to the right
.flex-pull-row-right
    justify-content flex-end

// pull content to the center
.flex-pull-row-center
    align-items center
    justify-content center

// TODO: Add column layouts

// for small screens/default size
generateFlexGrid('sm', $columns)

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md', $columns)

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg', $columns)

Add alignment to each screen size

generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)
    .flex-{$name}-right
        justify-content flex-end
    .flex-{$name}-center
        justify-content center
    .flex-{$name}-middle
        align-items center

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// TODO: Add column layouts

// for small screens/default size
generateFlexGrid('sm', $columns)

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md', $columns)

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg', $columns)


/* Author: <%= authorName %>, <%= authorUrl %>, <%= (new Date).getFullYear() %> */

max_width = 1200px;
content_max_width = null;
sticky_footer_height = null;
spacer = 10px;
bg_color = #fff;
base_color = #111;
link_style = "underline";
link_color = #1978c8;
visited_color = #8c5ad2;
hover_color = #1694ec;

@import "tamia";
@import "styles";

Disable default skin for default.

/* Author: <%= authorName %>, <%= authorUrl %>, <%= (new Date).getFullYear() %> */

blocks_default_skin = false;
max_width = 1200px;
content_max_width = null;
sticky_footer_height = null;
spacer = 10px;
bg_color = #fff;
base_color = #111;
link_style = "underline";
link_color = #1978c8;
visited_color = #8c5ad2;
hover_color = #1694ec;

@import "tamia";
@import "styles";


@import "../node_modules/nib"
@import 'common';

@import "../node_modules/zooniverse/css/zooniverse.css"
@import "../node_modules/zootorial/src/css/zootorial"

@import 'layout';
@import 'sub_page';
@import 'navigation';
@import 'home_page';
@import 'classify_page';
@import 'classification_tools';
@import 'about_page';
@import 'profile_page';
@import 'tutorial';

Fix reference to zootorial css

@import "../node_modules/nib"
@import 'common';

@import "../node_modules/zooniverse/css/zooniverse.css"
@import "../node_modules/zootorial/zootorial.css"

@import 'layout';
@import 'sub_page';
@import 'navigation';
@import 'home_page';
@import 'classify_page';
@import 'classification_tools';
@import 'about_page';
@import 'profile_page';
@import 'tutorial';


box-sizing-reset()
    *, *:before, *:after
        box-sizing border-box

Add inheritance to box-sizing reset

box-sizing-reset()
    html
        box-sizing border-box

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


media-query( media = all, conditions... )
    if ks-support-media-queries
        parsed-conditions = ()
        push( parsed-conditions, join( " ", media ) )
        for condition in conditions
            push( parsed-conditions, "(" + condition[ 0 ] + ": " + condition[ 1 ] + ")" )
        query = unquote( join( " and ", parsed-conditions ) )
        @media query
            {block}
    else
        {block}

Fix variables in media query mixin bug

_parse-media-query-conditions( conditions, skipMedia = false )
    parsed-conditions = ()
    for condition, index in conditions
        if index is 0 and skipMedia is false
            push( parsed-conditions, ( join( " ", condition ) ) )
        else
            push( parsed-conditions, "(" + condition[ 0 ] + ": " + condition[ 1 ] + ")" )
    return unquote( join( " and ", parsed-conditions ) )

media-query( media = all, conditions... )
    if ks-support-media-queries
        query = length( media[ 0 ] ) > 1 ? _parse-media-query-conditions( media ) : join( " ", media )
        if length( conditions )
            query = query + " and " + _parse-media-query-conditions( conditions, true )
        @media query
            {block}
    else
        {block}


// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
  .bespoke-active
    pointer-events: auto

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease

Fix Firefox presentation overflow issue

// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  overflow: hidden

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  pointer-events: none
  .bespoke-active
    pointer-events: auto

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease


.my-articles
  margin-bottom 0

  div.my-articles-header
    margin-bottom 15px

    .tooltip
      p
        font-size 12px

.my-assignment

.my-assignment-button
  div
    float right
    margin-left 10px

.my-assignment-title
  font-size 130%

.my-assignment-checklist
  font-size 120%
  padding 20px 40px
  overflow-y auto

  h2
    text-align center

  dd
    margin 10px

  button
    float right

.feedback
  font-size 120%
  padding 20px 40px
  overflow-y auto

  div
    float none

  h2
    text-align left
    display inline

  .okay
    float right

.feedback-body
  padding 20px

  .rating-description
    font-size 75%
    color bayoux

.feedback-form
  margin-top 10px

hr.assignment-divider
  margin-bottom 4px

Make sure large checklists remain accessible

.my-articles
  margin-bottom 0

  div.my-articles-header
    margin-bottom 15px

    .tooltip
      p
        font-size 12px

.my-assignment

.my-assignment-button
  div
    float right
    margin-left 10px

.my-assignment-title
  font-size 130%

.my-assignment-checklist
  font-size 120%
  padding 20px 40px
  overflow-y auto
  max-height 80%

  h2
    text-align center

  dd
    margin 10px

  button
    float right

.feedback
  font-size 120%
  padding 20px 40px
  overflow-y auto

  div
    float none

  h2
    text-align left
    display inline

  .okay
    float right

.feedback-body
  padding 20px

  .rating-description
    font-size 75%
    color bayoux

.feedback-form
  margin-top 10px

hr.assignment-divider
  margin-bottom 4px


@keyframes loading-indicator-bounce
  0%
    transform: translateY(-0.3em)

  100%
    transform: translateY(0.3em)

.loading-indicator > *
  TIME = 500ms

  animation: loading-indicator-bounce TIME ease-in-out infinite alternate

  &:nth-child(3n-1)
    animation-delay: (TIME / 3)ms

  &:nth-child(3n)
    animation-delay: (TIME / 1.5)ms

Tweak loading indicator time handling

@keyframes loading-indicator-bounce
  0%
    transform: translateY(-0.3em)

  100%
    transform: translateY(0.3em)

.loading-indicator > *
  TIME = 500ms

  animation: loading-indicator-bounce TIME ease-in-out infinite alternate

  &:nth-child(3n-1)
    animation-delay: unit(TIME / 3, unit(TIME))

  &:nth-child(3n)
    animation-delay: unit(TIME / 1.5, unit(TIME))


$primary = #345E7E
$primary-light = #6286A2
$primary-l-light = lighten($primary, 90%)
$secondary = #F7B297
$secondary-light = #FAF0EC
$secondary-l-light = lighten($secondary, 90%)
$highlight = #F07382

$blue = #2D5987

$ll-gray = #f9f9f9
$l-gray = #ebebeb
$m-gray = #808080
$d-gray = #333

$map-background = RGBA(205, 210, 212, 1)

$positive = #A7DB7A
$warning = #EFAC56
$delete = $highlight

$border-primary = lighten($primary, 50%)
$border-secondary = lighten($secondary, 30%)
$border-btn = #95989A

$tableRadius = 5px
$table-border = 1px solid #DDD

$header-height = 70px + 2 // 2px border
$mobile-header-height = 60px + 2 // 2px border

$footer-height = 100px
$mobile-footer-height = 65px

$link-color = darken($highlight, 5%)
$link-color-hover = $primary

Replace primary light color with lighter value

$primary = #345E7E
$primary-light = #EAEEF2
$primary-l-light = lighten($primary, 90%)
$secondary = #F7B297
$secondary-light = #FAF0EC
$secondary-l-light = lighten($secondary, 90%)
$highlight = #F07382

$blue = #2D5987

$ll-gray = #f9f9f9
$l-gray = #ebebeb
$m-gray = #808080
$d-gray = #333

$map-background = RGBA(205, 210, 212, 1)

$positive = #A7DB7A
$warning = #EFAC56
$delete = $highlight

$border-primary = lighten($primary, 50%)
$border-secondary = lighten($secondary, 30%)
$border-btn = #95989A

$tableRadius = 5px
$table-border = 1px solid #DDD

$header-height = 70px + 2 // 2px border
$mobile-header-height = 60px + 2 // 2px border

$footer-height = 100px
$mobile-footer-height = 65px

$link-color = darken($highlight, 5%)
$link-color-hover = $primary


@import "colors"

button
  background regular-pink
  border none
  color white
  cursor pointer
  text-transform uppercase
  &.see-more
    display inline-block
    font-size 18px
    height 24px
    line-height 2px
    position absolute
    right 4px
    text-align center
    top 4px
    width 24px
    &:after
      color white
      content "+"
  &.zoom
    background-color transparent
    background-image url(../images/magnifier.png)
    background-position center
    background-repeat no-repeat
    background-size 20px
    height 26px
    left 1px
    position absolute
    top 1px
    width 26px

Fix styling for see more button

@import "colors"

button
  background regular-pink
  border none
  color white
  cursor pointer
  text-transform uppercase
  &.see-more
    display inline-block
    font-size 18px
    height 24px
    line-height 2px
    position absolute
    right 4px
    text-align center
    top 4px
    width 24px
    &:after
      color white
      content "+"
      position relative
      top -1px
  &.zoom
    background-color transparent
    background-image url(../images/magnifier.png)
    background-position center
    background-repeat no-repeat
    background-size 20px
    height 26px
    left 1px
    position absolute
    top 1px
    width 26px


@import "vars/colors.styl"
@import "vars/layout.styl"
@import "blocks/button/button.styl"
@import "blocks/popup/popup.styl"
@import "blocks/radio-button/radio-button.styl"
@import "blocks/select/select.styl"
@import "blocks/checkbox/checkbox.styl"
@import "blocks/icon/icon.styl"

IMG
  border: 0;

._hidden
  display: none !important

._link
  color: #22C
  cursor: pointer
  transition: color .15s ease-out

a._link
  text-decoration: none

._link:hover
  color: #D00

._link_outer
  color: #070

Revert "Hidden class is more important"

@import "vars/colors.styl"
@import "vars/layout.styl"
@import "blocks/button/button.styl"
@import "blocks/popup/popup.styl"
@import "blocks/radio-button/radio-button.styl"
@import "blocks/select/select.styl"
@import "blocks/checkbox/checkbox.styl"
@import "blocks/icon/icon.styl"

IMG
  border: 0;

._hidden
  display: none;

._link
  color: #22C
  cursor: pointer
  transition: color .15s ease-out

a._link
  text-decoration: none

._link:hover
  color: #D00

._link_outer
  color: #070


html
  background-color: $hl
  color: $fg
  margin: 1em

body
  background-color: $bg
  margin: 0 auto
  max-width: 23cm
  border: 1pt solid $comment
  padding: 1em

code
  background-color: $hl
  padding: 2px

a
  color: $blue

a:visited
  color: $orange

a:hover
  color: $orange

h1
  color: $red

h2,h3,h4,h5,h6
  if $solarized is dark
    color: $yellow
  else
    color: $violet
  text-align: center

pre
  background-color: $bg
  color: $fg
  border: 1pt solid $comment
  padding: 1em
  box-shadow: 5pt 5pt 8pt $hl
  code
    background-color: @background-color

h1
  font-size: 2.8em
h2
  font-size: 2.4em
h3
  font-size: 1.8em
h4
  font-size: 1.4em
h5
  font-size: 1.3em
h6
  font-size: 1.15em

table
  border: hidden
  border-color: $comment
  margin-left:auto;
  margin-right:auto;

colgroup
  border: 1px solid $comment

tr:nth-child(even)
  background-color: $hl

Use justify to align body text

html
  background-color: $hl
  color: $fg
  margin: 1em

body
  background-color: $bg
  margin: 0 auto
  max-width: 23cm
  border: 1pt solid $comment
  padding: 1em
  text-align: justify

code
  background-color: $hl
  padding: 2px

a
  color: $blue

a:visited
  color: $orange

a:hover
  color: $orange

h1
  color: $red

h2,h3,h4,h5,h6
  if $solarized is dark
    color: $yellow
  else
    color: $violet
  text-align: center

pre
  background-color: $bg
  color: $fg
  border: 1pt solid $comment
  padding: 1em
  box-shadow: 5pt 5pt 8pt $hl
  code
    background-color: @background-color

h1
  font-size: 2.8em
h2
  font-size: 2.4em
h3
  font-size: 1.8em
h4
  font-size: 1.4em
h5
  font-size: 1.3em
h6
  font-size: 1.15em

table
  border: hidden
  border-color: $comment
  margin-left:auto;
  margin-right:auto;

colgroup
  border: 1px solid $comment

tr:nth-child(even)
  background-color: $hl


.eoy-artist-item
  width 25%
  display inline-block
  clearfix()
  margin-bottom 10px
  &__thumbnail
    float left
    img
      border-radius 50px
      width 50px
      height 50px
  &__name
    float left
    avant-garde-size('body')
    padding-left 20px

Add media queries to make artist items more responsive

.eoy-artist-item
  width 25%
  display inline-block
  margin-bottom 10px
  clearfix()
  @media (max-width: 1300px)
    width 33%
  @media (max-width: 1100px)
    width 50%
  &__thumbnail
    float left
    img
      border-radius 50px
      width 50px
      height 50px
  &__name
    float left
    avant-garde-size('body')
    padding-left 20px


<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  display: none

.bespoke-bullet-inactive
  display: none
<% } %>

Add bespoke-scale styles for Firefox

<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  display: none

.bespoke-bullet-inactive
  display: none
<% } %>


.header
  td
    border 1px solid
    padding 2px
    background-color lightgrey

.even
  td
    border 1px solid
    padding 2px
    background-color #ffffff

.odd
  td
    border 1px solid
    padding 2px
    background-color #e7e7e7

.ui-dialog
  opacity: .80 !important
  filter: Alpha(Opacity=80) !important

Remove opacity from CSS to increase visibility


/*!
 * V4Fire Client Core
 * https://github.com/V4Fire/Client
 *
 * Released under the MIT license
 * https://github.com/V4Fire/Client/blob/master/LICENSE
 */

@import "super/i-data/i-data.styl"

$p = {
	width: auto
}

b-window extends i-data
	absolute top 0 left 0
	zIndex(overall)
	min-width 100%

	&_width_full &__window
		width 100%

	&_width_auto &__window
		width auto

	&__back
		fixed top 0 left 0
		size 100%

	&__wrapper
		position relative
		z-index 1
		display flex
		justify-content center
		size 100% 100vh

	&__window
		width $p.width
		max-width 100%
		align-self center

	&__title
		display block

	&__control
		display inline-block

Store index pos in variable

/*!
 * V4Fire Client Core
 * https://github.com/V4Fire/Client
 *
 * Released under the MIT license
 * https://github.com/V4Fire/Client/blob/master/LICENSE
 */

@import "super/i-data/i-data.styl"

$p = {
	width: auto
	zIndexPos: overall
}

b-window extends i-data
	absolute top 0 left 0
	zIndex($p.zIndexPos)
	min-width 100%

	&_width_full &__window
		width 100%

	&_width_auto &__window
		width auto

	&__back
		fixed top 0 left 0
		size 100%

	&__wrapper
		position relative
		z-index 1
		display flex
		justify-content center
		size 100% 100vh

	&__window
		width $p.width
		max-width 100%
		align-self center

	&__title
		display block

	&__control
		display inline-block


@require '../mixins/button--raised'

.sidebar {
	flex: 0 0 270px
	min-width: 270px
	margin-right: $page-edge-padding
}

@media all and (max-width: $single-column-width) {
	.sidebar {
		margin-right: 0
		flex-basis: auto
	}
}

.button-list {
	font-size: 0.85em
	display: flex
	flex-flow: row wrap
	justify-content: space-around

	button, input[type='submit'] {
		button--raised()

		flex-grow: 1
		padding-left: 1em
		padding-right: 1em

		$spacing = 0.5em
		margin-right: $spacing / 2
		margin-left: $spacing / 2
		margin-bottom: $spacing
	}

	margin-bottom: 0.5em
}

Fix up a stylus thing

@require '../mixins/button--raised'

.sidebar {
	flex: 0 0 270px
	min-width: 270px
	margin-right: $page-edge-padding
}

@media all and (max-width: $single-column-width) {
	.sidebar {
		margin-right: 0
		flex-basis: auto
	}
}

.button-list {
	font-size: 0.85em
	display: flex
	flex-flow: row wrap
	justify-content: space-around

	button, input[type='submit'] {
		button--raised()

		flex-grow: 1
		padding-left: 1em
		padding-right: 1em

		$spacing = 0.5em
		margin-right: ($spacing / 2)
		margin-left: ($spacing / 2)
		margin-bottom: $spacing
	}

	margin-bottom: 0.5em
}


.fui-select
	position: relative

	&:before
		@extend .fuicon-menu:before

		position: absolute
		z-index: 1
		top: 22px
		right: 19px
		display: block
		color: $widgetFontColor
		text-shadow: light

		pointer-events: none // Clicks pass through to select

	select
		// IE 8: Top and bottom padding of 10px is required to align the text vertically
		padding: 10px 28px 10px 8px

		cursor: pointer

		&:focus
			margin-left: $widgetMargin - 1
			margin-right: $widgetMargin - 1

	&.fui-primary
		&, &:active
			background: transparent

		select
			background: $widgetBackgroundPrimary

// Hide the icon in IE, it has the menu button already
// Observed: IE 8, IE 9, IE 10, Win FF 3.6
.fui-ie
	.fui-select
		select
			padding-right: 8px

		&:before
			display: none;

// Fix vertical shift of select menu on focus in IE
// Observed: IE 8, IE 9
.fui-lt-ie10
	.fui-select
		select:focus
			padding-top: 9px
			padding-bottom: 9px

Fix alignment of select menu

.fui-select
	display: inline-block
	position: relative

	&:before
		@extend .fuicon-menu:before

		position: absolute
		z-index: 1
		top: 22px
		right: 16px
		display: block
		color: $widgetFontColor
		text-shadow: light

		pointer-events: none // Clicks pass through to select

	select
		// IE 8: Top and bottom padding of 10px is required to align the text vertically
		padding: 10px 28px 10px 8px

		cursor: pointer

		&:focus
			margin-left: $widgetMargin - 1
			margin-right: $widgetMargin - 1

	&.fui-primary
		&, &:active
			background: transparent

		select
			background: $widgetBackgroundPrimary

// Hide the icon in IE, it has the menu button already
// Observed: IE 8, IE 9, IE 10, IE 11, FF 3.6, FF 23
.fui-ie
	.fui-select
		select
			padding-right: 8px

		&:before
			display: none;

// Fix vertical shift of select menu on focus in IE
// Observed: IE 8, IE 9
.fui-lt-ie10
	.fui-select
		select:focus
			padding-top: 9px
			padding-bottom: 9px


$contentPadding = 10px
$backgroundColor = #f8f8ff
$contentBackground = white
$dividerColor = #ccc
$dividerBorder = 1px solid $dividerColor

body > nav
  background $backgroundColor
  border $dividerBorder

button[data-tab]
  @extend body > nav
  padding 0 $contentPadding
  line-height 2em
  margin-bottom -1px

  &.doc-active
    font-weight bold
    border-bottom-color $contentBackground
    background-color $contentBackground

section.doc-tabbed
  display none !important
  margin $contentPadding
  background-color $contentBackground

  &.doc-active
    display block !important

  > p
  > pre
    float left
    clear left
    margin 10px 0
    line-height 1.3
    width 40%

  > .style-doc-sample
  > .style-doc-highlight
    float right
    clear right
    padding-left 2%
    width 58%

  > h3
  > h4
    clear both

code
  overflow auto !important
  border $dividerBorder !important

pre
  display none

  .show-code &
    display block

.style-doc-highlight
  display none

  &:after
  &:before
    content ''
    display block
    height 1px
    margin $contentPadding
    border none
    background-image linear-gradient(left, #efefef, #ccc 50%, #efefef)

  .show-highlights &
    display block

Use single column on smaller screen sizes

$contentPadding = 10px
$backgroundColor = #f8f8ff
$contentBackground = white
$dividerColor = #ccc
$dividerBorder = 1px solid $dividerColor

body > nav
  background $backgroundColor
  border $dividerBorder

button[data-tab]
  @extend body > nav
  padding 0 $contentPadding
  line-height 2em
  margin-bottom -1px

  &.doc-active
    font-weight bold
    border-bottom-color $contentBackground
    background-color $contentBackground

section.doc-tabbed
  display none !important
  margin $contentPadding
  background-color $contentBackground

  &.doc-active
    display block !important

  > p
  > pre
    float left
    clear left
    margin 10px 0
    line-height 1.3
    width 40%

  > .style-doc-sample
  > .style-doc-highlight
    float right
    clear right
    padding-left 2%
    width 58%

  > h3
  > h4
    clear both

@media only screen and (max-width: 480px)
  section.doc-tabbed
    > p
    > pre
    > .style-doc-sample
    > .style-doc-highlight
      float none
      width 100%

code
  overflow auto !important
  border $dividerBorder !important

pre
  display none

  .show-code &
    display block

.style-doc-highlight
  display none

  &:after
  &:before
    content ''
    display block
    height 1px
    margin $contentPadding
    border none
    background-image linear-gradient(left, #efefef, #ccc 50%, #efefef)

  .show-highlights &
    display block


// Buttons of any kind
.coz-btn
    box-sizing       border-box
    display          inline-block
    vertical-align   top
    margin           0 em(8px)
    border           1px solid grey-09
    height           em(43px)
    padding          em(11px) em(15px) em(10px)
    background-color white
    font-size(14px)
    text-transform   uppercase

    &--regular
        border-color     dodger-blue
        background-color dodger-blue
        color            white

    &--upload
        left-padded(44px)
        background-image    embedurl("../assets/icons/icon-upload.svg")
        background-position em(17px, 16px) center
        background-repeat   no-repeat

    &--more
        width      em(46px)
        background embedurl("../icons/icon-dots.svg") center center no-repeat

Fix wrong path to SVG

// Buttons of any kind
.coz-btn
    box-sizing       border-box
    display          inline-block
    vertical-align   top
    margin           0 em(8px)
    border           1px solid grey-09
    height           em(43px)
    padding          em(11px) em(15px) em(10px)
    background-color white
    font-size(14px)
    text-transform   uppercase

    &--regular
        border-color     dodger-blue
        background-color dodger-blue
        color            white

    &--upload
        left-padded(44px)
        background-image    embedurl("../assets/icons/icon-upload.svg")
        background-position em(17px, 16px) center
        background-repeat   no-repeat

    &--more
        width      em(46px)
        background embedurl("../assets/icons/icon-dots.svg") center center no-repeat


.pagination
  text-align center
  margin 30px 10px
  display flex
  list-style none
  cursor pointer

  li
    margin 0
    &.disabled > a
      background-color transparent
      border 1px solid #e7e7e7
      color #6a6a6a

  .previous_page, .next_page, a
    border-radius 3px
    font-size 14px
    line-height 1.5
    background-color #676eb4
    color #fff
    text-decoration none
    padding 8px 20px 8px
    font-weight 600
    margin 10px 5px

  .previous_page, .next_page
    &:hover
      background-color #878dcd
      color #fff
    &.disabled
      background-color transparent
      border 1px solid #e7e7e7
      color #6a6a6a

  .current, .active > a
    color #6a6a6a
    background #e7e7e7

  a
    background transparent
    color #6a6a6a
    border 1px solid #e7e7e7

    &:hover
      color #6a6a6a
      background #e7e7e7

Fix styling for current page in pagination links

.pagination
  text-align center
  margin 30px 10px
  display flex
  list-style none
  cursor pointer

  li
    margin 0
    &.disabled > a
      background-color transparent
      border 1px solid #e7e7e7
      color #6a6a6a

  .previous_page, .next_page, .current, a
    border-radius 3px
    font-size 14px
    line-height 1.5
    background-color #676eb4
    color #fff
    text-decoration none
    padding 8px 20px 8px
    font-weight 600
    margin 10px 5px

  .previous_page, .next_page
    &:hover
      background-color #878dcd
      color #fff
    &.disabled
      background-color transparent
      border 1px solid #e7e7e7
      color #6a6a6a

  .current, .active > a
    color #6a6a6a
    background #e7e7e7

  a
    background transparent
    color #6a6a6a
    border 1px solid #e7e7e7

    &:hover
      color #6a6a6a
      background #e7e7e7


.galleries-institutions-search-results
  .galleries-institutions-results-grid
    .partner-cell
      margin-top 30px
      &:nth-child(3n)
        margin-right 0

  &[data-state='finished-paging']
    .galleries-institutions-spinner
      display none

.galleries-institutions-spinner
  position relative
  padding 100px 0

.galleries-institutions-results-heading
  garamond-size('headline')
  border-bottom 1px solid gray-lighter-color
  padding-bottom 12px

Fix partner_cell layout on the galleries filtered result grid.

@require '../partner_cell'

.galleries-institutions-search-results
  .galleries-institutions-results-grid
    .partner-cell
      margin-top 30px
      width calc(33.333% \- (cell-margin * 2 / 3))
      margin-right cell-margin
      &:nth-child(3n)
        margin-right 0
      @media screen and (max-width: 1024px)
        cell-margin = cell-margin / 2
        width calc(33.333% \- (cell-margin * 2 / 3))
        margin-right cell-margin

  &[data-state='finished-paging']
    .galleries-institutions-spinner
      display none

.galleries-institutions-spinner
  position relative
  padding 100px 0

.galleries-institutions-results-heading
  garamond-size('headline')
  border-bottom 1px solid gray-lighter-color
  padding-bottom 12px


// Stylesheet for maps integration.

.angular-google-map-container
    height 500px

Add styles for map search box.

// Stylesheet for maps integration.

// By default there is no height on the map container
.angular-google-map-container
    height 400px

// Map search box, styles similar to Google Maps itself
input.map-search-box {
    font-size 15px
    line-height 20px
    font-weight 300
    width 300px
    margin 0 !important
    padding 0 6px !important
    height auto !important
    top 6px !important
}


body, html
	width: 100%
	height: 100%
	margin: 0
	padding: 0
	overflow-x: hidden
	overflow-y: hidden
	font-family: 'WeblySleek UI'
	font-size: 12pt

// Blue base
$blue_base = dodgerblue
// Darker navy tone
$navy_base = #2c3e50
// Ultra light gray
$gray_base = #eeeeee
// Hot pink accent
$accent = #ec407a
// Twitter accent
$twitter_blue = #00ACED
// Nice gray tone used by Twitter
$twitter_gray = #292f33

// Miscellaneous Twitter colors...
$twitterGray2 = #66757f
$twitterGray3 = #ccd6dd
$twitterGray4 = #e1e8ed

// Link styles

a
	color: $blue_base
	text-decoration: none

a:hover
	text-decoration: underline

Use system fonts and change color palette

body, html
	width: 100%
	height: 100%
	margin: 0
	padding: 0
	overflow-x: hidden
	overflow-y: hidden
	font-family: BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif
	font-size: 12pt

// Blue base
blueBase = dodgerblue
// Darker navy tone
navyBase = #2c3e50
// Ultra light gray
grayBase = #eeeeee
// Hot pink accent
accent = #ec407a
// Twitter accent
twitterBlue = #00ACED
// Nice gray tone used by Twitter
twitterGray = #292f33

// Miscellaneous Twitter colors...
twitterGray2 = #66757f
twitterGray3 = #ccd6dd
twitterGray4 = #e1e8ed

// Link styles

a
	color: blueBase
	text-decoration: none

a:hover
	text-decoration: underline


.letter-piece
  background lightcyan
  width 35px
  height 35px
  border 1px solid black
  border-radius 2px
  display flex
  align-items center
  justify-content center
  z-index 1
  font-size 16pt
  font-weight bold
  position relative

.letter-piece:after
  position absolute
  font-size 10pt
  bottom 2px
  right 2px

.score-1:after
  content '1'

.score-2:after
  content '2'

.score-3:after
  content '3'

.score-4:after
  content '4'

.score-5:after
  content '5'

.score-8:after
  content '8'

.score-10:after
  content '10'

Fix cursor to be default

.letter-piece
  background lightcyan
  width 35px
  height 35px
  border 1px solid black
  border-radius 2px
  display flex
  align-items center
  justify-content center
  z-index 1
  font-size 16pt
  font-weight bold
  position relative
  cursor default

.letter-piece:after
  position absolute
  font-size 10pt
  bottom 2px
  right 2px

.score-1:after
  content '1'

.score-2:after
  content '2'

.score-3:after
  content '3'

.score-4:after
  content '4'

.score-5:after
  content '5'

.score-8:after
  content '8'

.score-10:after
  content '10'


// maintain aspect ratio of 4:3 for the map, see
// https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
//
.user-settings-location__map-container
  width 100%
  padding-bottom 56.25%
  position relative
  margin-bottom 1rem

.user-settings-location__map
  position absolute
  top 0
  bottom 0
  left 0
  right 0

.user-settings-location__submit
  position absolute
  top 10px
  right 10px
  z-index 1000

Increase map height on narrow screens

@import "nodeca.core/client/common/_variables"

// aspect ratio 16:9 on wide screens
.user-settings-location__map-container
  width 100%
  padding-bottom 56.25%
  position relative
  margin-bottom 1rem

.user-settings-location__map
  position absolute
  top 0
  bottom 0
  left 0
  right 0

.user-settings-location__submit
  position absolute
  top 10px
  right 10px
  z-index 1000

// aspect ratio 1:1 on narrow screens
@media (max-width: $grid-breakpoints.sm - 1)
  .user-settings-location__map-container
    padding-bottom 100%


@import 'stylus-normalize/normalize'

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

*
  box-sizing: border-box

wowser
  display: flex
  align-items: center
  justify-content: center
  width: 100%
  height: 100%
  background: #222222
  font-family: Galdeano
  font-size: 13px
  color: #FFFFFF
  -webkit-font-smoothing: antialiased

  .branding
    absolute: top 10px right 10px
    z-index: 4

    header
      width: 204px
      height: 47px
      background: url('/images/logo.png') no-repeat
      hide-text()

    .divider
      margin: 5px 0

    .slogan
      color: #FFCC00
      letter-spacing: .075em

  select.screen-selector
    absolute: top 100px right 10px
    z-index: 4

Hide cursor when mouse dragging

@import 'stylus-normalize/normalize'

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

*
  box-sizing: border-box

wowser
  display: flex
  align-items: center
  justify-content: center
  width: 100%
  height: 100%
  background: #222222
  font-family: Galdeano
  font-size: 13px
  color: #FFFFFF
  -webkit-font-smoothing: antialiased

  &:active
    cursor: none

  .branding
    absolute: top 10px right 10px
    z-index: 4

    header
      width: 204px
      height: 47px
      background: url('/images/logo.png') no-repeat
      hide-text()

    .divider
      margin: 5px 0

    .slogan
      color: #FFCC00
      letter-spacing: .075em

  select.screen-selector
    absolute: top 100px right 10px
    z-index: 4


// Page header block (under breadcrubmbs): title + description
//

@import "nodeca.core/client/common/_variables"

.page-head
  margin-top 1.5rem // For pages without breadcrumbs
  margin-bottom 2rem

  .page-actions
    margin-top -.25rem

.page-head__title
  margin 0
  font-weight normal
  font-size $font-size-h3
  color $brand-primary

.page-head__descr
  font-size $font-size-xs
  color $body-color-secondary
  margin .2em 0 0 0

Reduce margin under page header

// Page header block (under breadcrubmbs): title + description
//

@import "nodeca.core/client/common/_variables"

.page-head
  margin-top 1.5rem // For pages without breadcrumbs
  margin-bottom 1.5rem

  .page-actions
    margin-top -.25rem

.page-head__title
  margin 0
  font-weight normal
  font-size $font-size-h3
  color $brand-primary

.page-head__descr
  font-size $font-size-xs
  color $body-color-secondary
  margin .2em 0 0 0


.project-details
    .title
        color #fff
        max-width 290px
        overflow-x hidden
        text-overflow ellipsis
        white-space nowrap
    .projectStatus
        padding: 1px 4px

Increase project status badge padding

.project-details
    .title
        color #fff
        max-width 290px
        overflow-x hidden
        text-overflow ellipsis
        white-space nowrap
    .projectStatus
        padding: 5px 7px


.parallax
  background transparent
  height 90vh

.image
  background-attachment fixed
  background-size cover
  background-position center

Make parallax smaller, more aesthetic.

.parallax
  background transparent
  height 50vh

.image
  background-attachment fixed
  background-size cover
  background-position center


private-connection-count-colors-exceeded = colors-state-alert

.PrivateConnectionCount
  &__count
    float right

  &__warning
    text-align right
    color private-connection-count-colors-exceeded

  &[data-state='exceeded']
    .PrivateConnectionCount
      &__count
        > span
          color private-connection-count-colors-exceeded

    .PrivateConnectionsMeter
      &__fill
        background-color private-connection-count-colors-exceeded

.PrivateConnectionsMeter
  height 2em
  border 1px solid colors-gray-border
  overflow hidden

  &__fill
    height 100%
    background-color colors-gray-text

Tweak according to new comps

private-connection-count-colors-exceeded = colors-state-alert

.PrivateConnectionCount
  &__count
    float right

  &__warning
    text-align right
    font-size font-size-xs

  &[data-state='exceeded']
    .PrivateConnectionCount
      &__count
        > span
          color private-connection-count-colors-exceeded

    .PrivateConnectionsMeter
      &__fill
        background-color private-connection-count-colors-exceeded

.PrivateConnectionsMeter
  height 2em
  border 1px solid colors-gray-border
  overflow hidden

  &__fill
    height 100%
    background-color colors-gray-text


.meiosis, .meiosis-parent
  position: relative
  border: 1px solid lightgrey
  width: 300px
  height: 300px
  .cell
    width: 300px
    height: 304px

.controls
  margin-top: 10px
  .buttons
    display: inline-block
    button
      width: 38px
      height: 38px
      padding: 5px
  .scrub
    width: 125px
    display: inline-block
    margin-left: 15px
    position: relative
    top: -4px
    .ui-slider-handle
      width: 6px
      margin-left: -3px

Fix button color sticking on IE

.meiosis, .meiosis-parent
  position: relative
  border: 1px solid lightgrey
  width: 300px
  height: 300px
  .cell
    width: 300px
    height: 304px

.controls
  margin-top: 10px
  .buttons
    display: inline-block
    button
      width: 38px
      height: 38px
      padding: 5px
      &:hover
        // This is dumb, but it prevents the buttons from sticking in an active color on IE
        width: 38px

  .scrub
    width: 125px
    display: inline-block
    margin-left: 15px
    position: relative
    top: -4px
    .ui-slider-handle
      width: 6px
      margin-left: -3px


.basic-modal
  background white
  padding 20px
  position fixed
  margin auto
  left 0
  right 0
  top 20%
  max-width 800px
  border 1px solid mischka
  border-radius 3px
  box-shadow 0 0 20px 0 rgba(0, 0, 0, .6)
  z-index 12

  .right
    text-align right
    float left

  .left
    text-align left
    float left

Fix styling of stats download modal

.basic-modal
  background white
  padding 20px
  position fixed
  margin auto
  left 0
  right 0
  top 20%
  max-width 800px
  max-height 80%
  border 1px solid mischka
  border-radius 3px
  box-shadow 0 0 20px 0 rgba(0, 0, 0, .6)
  overflow-y auto
  z-index 12

  .right
    text-align right
    float left

  .left
    text-align left
    float left


@require '../templates/mixins'

.event-item
  pad-lr(1em)
  unstyled()

.events-list
  pad-left(0)

body
  background-color #E8E8E8
  margin 0

Define the default font for the app; Use stylus variables;

@require '../templates/mixins'

.event-item
  pad-lr(1em)
  unstyled()

.events-list
  pad-left(0)

body
  background-color $grey
  font 16px/1.2 Arial, Helvetica, sans-serif
  margin 0


.y-model-view
  dock()
  padding 0 35px

  .y-tag
    font-size 11px
    text-transform uppercase
    display inline-block
    background y-color-yellow
    padding 3px 5px

  .y-title
    font-size 36px
    font-weight 300

  .y-subtitle
    font-size 22px
    font-weight 300

  .y-summary
    background #f5f5f5
    padding 20px 0

  .y-summary-item
    display inline-block
    padding 0 10px

  .y-summary-key
    text-transform uppercase
    font-size 11px
    color #888

Improve layout for parameter summaries for model pages. PP-10

.y-model-view
  dock()
  padding 0 35px

  .y-tag
    font-size 11px
    text-transform uppercase
    display inline-block
    background y-color-yellow
    padding 3px 5px

  .y-title
    font-size 36px
    font-weight 300

  .y-subtitle
    font-size 22px
    font-weight 300

  .y-summary
    background #f5f5f5
    padding 5px 0

  .y-summary-item
    display inline-block
    padding 10px

  .y-summary-key
    text-transform uppercase
    font-size 11px
    color #888


// Common markup styles for all messages

@import "nodeca.core/client/common/_variables"

.markup
  // Avoid layout width break by long strings
  overflow auto

  // Fix for overflow to not cut attachments shadows
  padding-left 3px
  margin-left -3px
  padding-right 3px
  margin-right -3px

  font-family $font-family-sans-serif-wide

  // External images
  .image
    max-width 100%
    display inline-block
    border-radius 2px
    position relative
    // protect from hidden images
    min-width 10px
    min-height 10px
    background-color #ccc

    & > img
      max-width 100%
      border-radius 2px
      position absolute

  .image__spacer
    display block

  // Attachments in text
  .thumb__image
    border-radius 2px

  a.link
  a.ez-inline
    color #744
    border-bottom 1px dotted
    text-decoration none
    &:hover
      border-bottom 1px solid
    &:focus
      border-bottom none
      outline thin dotted
      outline-offset -1px

  pre code
    white-space unset

  .ez-block
    margin-bottom (baseLineHeight / 2)
    border-radius 2px

  .emoji
    font-size 120%
    line-height 100%
    vertical-align middle
    color #990

.markup-tail
  // Attachments thumbnails
  .thumb__image
    border-radius 2px

Use default font-face in messages

// Common markup styles for all messages

@import "nodeca.core/client/common/_variables"

.markup
  // Avoid layout width break by long strings
  overflow auto

  // Fix for overflow to not cut attachments shadows
  padding-left 3px
  margin-left -3px
  padding-right 3px
  margin-right -3px

  //font-family $font-family-sans-serif-wide

  // External images
  .image
    max-width 100%
    display inline-block
    border-radius 2px
    position relative
    // protect from hidden images
    min-width 10px
    min-height 10px
    background-color #ccc

    & > img
      max-width 100%
      border-radius 2px
      position absolute

  .image__spacer
    display block

  // Attachments in text
  .thumb__image
    border-radius 2px

  a.link
  a.ez-inline
    color #744
    border-bottom 1px dotted
    text-decoration none
    &:hover
      border-bottom 1px solid
    &:focus
      border-bottom none
      outline thin dotted
      outline-offset -1px

  pre code
    white-space unset

  .ez-block
    margin-bottom (baseLineHeight / 2)
    border-radius 2px

  .emoji
    font-size 120%
    line-height 100%
    vertical-align middle
    color #990

.markup-tail
  // Attachments thumbnails
  .thumb__image
    border-radius 2px


yunity-orange = #f66c41;

.splash
  height: 100%
  background-color: yunity-orange
  padding: 5em 0

.translucent-1
  background-color: rgba(255, 255, 255, .1)

// the main layout panel
.main-panel
  padding: 16px
  margin-top: 1em

.md-dialog-container > md-dialog
  width: 95%
  max-width: 40em

.multiline
  white-space: pre;

// styles for angular-xeditable
md-input-container.editable-controls
  padding 0
  width 100%

md-input-container.editable-controls [ng-message]
  position static

.editable-wrap
  width 100%

.editable-click
  color inherit
  border-bottom none

.editable-click:hover
  opacity 0.8
  color inherit

.footer
  opacity 0.6
  text-align center

.footer a
  opacity 0.8
  text-decoration: none;
  font-weight: 500;

.footer a:hover
  opacity 1.0

Move md-dialog on top of leaflet

yunity-orange = #f66c41;

.splash
  height: 100%
  background-color: yunity-orange
  padding: 5em 0

.translucent-1
  background-color: rgba(255, 255, 255, .1)

// the main layout panel
.main-panel
  padding: 16px
  margin-top: 1em

.md-dialog-container > md-dialog
  width: 95%
  max-width: 40em

.multiline
  white-space: pre;

// styles for angular-xeditable
md-input-container.editable-controls
  padding 0
  width 100%

md-input-container.editable-controls [ng-message]
  position static

.editable-wrap
  width 100%

.editable-click
  color inherit
  border-bottom none

.editable-click:hover
  opacity 0.8
  color inherit

.footer
  opacity 0.6
  text-align center

.footer a
  opacity 0.8
  text-decoration: none;
  font-weight: 500;

.footer a:hover
  opacity 1.0

// display md-dialog on top of leaflet
md-backdrop.md-dialog-backdrop
  z-index 1010 !important

.md-dialog-container
  z-index 1020 !important


/*
 * Hide text.
 */

hide-text()
  text-indent: 100%
  white-space: nowrap
  overflow: hidden

Make sure text is invisible.

/*
 * Hide text.
 */

hide-text()
  text-indent: 101%
  white-space: nowrap
  overflow: hidden


.button-container
	margin: 30px 0
	.btn
		background: rgba(0,0,0,0.03)
		padding: 10px 20px
		font-size: 1.25rem
		border-radius: 4px
		border: 1px solid rgba(185, 185, 185, 0.44)
		cursor: pointer
		color: #d2d2d2
		user-select: none
		opacity: 1
		transition: all 0.3s
		&:hover
			background: rgba(0,0,0,0.04)
			box-shadow: 3px 3px 12px rgba(0,0,0,0.19)
			border: 1px solid rgba(0, 0, 0, 0)
		&.disabled
			opacity: 0.4
			cursor: default
			background: rgba(0,0,0,0.03)
			border: 1px solid rgba(185,185,185,0.44)
			box-shadow: none

Set media query style for max height 500px

.button-container
	margin: 30px 0
	.btn
		background: rgba(0,0,0,0.03)
		padding: 10px 20px
		font-size: 1.25rem
		border-radius: 4px
		border: 1px solid rgba(185, 185, 185, 0.44)
		cursor: pointer
		color: #d2d2d2
		user-select: none
		opacity: 1
		transition: all 0.3s
		&:hover
			background: rgba(0,0,0,0.04)
			box-shadow: 3px 3px 12px rgba(0,0,0,0.19)
			border: 1px solid rgba(0, 0, 0, 0)
		&.disabled
			opacity: 0.4
			cursor: default
			background: rgba(0,0,0,0.03)
			border: 1px solid rgba(185,185,185,0.44)
			box-shadow: none
	@media (max-height: 500px)
		margin: 10px 0
		.btn
			font-size: 0.9rem


.module
  background-color white
  border 1px solid zircon
  margin 20px auto
  padding 20px
  position relative
  &:first-child
    +above(desktop)
      margin-top 20px
      margin-bottom 0
  .section-header
    min-height 40px
    padding 0
    h3
      color bayoux
    .controls
      padding 0

  .module__data
    textarea
      width 100%
    > p > .button
      margin-left 0
      text-align center
      width 100%
    .tags
      text-transform capitalize

  .week
    margin-bottom 0 !important

.module.course-details
  p
    margin 0 0 5px 0
  fieldset
    margin 0 0 5px 0
    > p
      margin 0

.module.course-description
  table
    margin-bottom 16px
    border 1px solid border_lt
    &:last-child
      margin-bottom 0
    td, th
      padding .5em .75em
      height auto
      border 1px solid border_lt
      white-space normal
    thead
      background smoke

.alert
  padding 20px
  text-align center
  p
    color burnt

.notification
  background-color sprout
  padding global-margin
  p
    col(1)
    color black
    float left
    margin 0
    +above(desktop)
      col(3/4)
  .button
    float left
    margin 10px 0 0
    +above(desktop)
      margin 0
      float right

Align table content to the top of cells

.module
  background-color white
  border 1px solid zircon
  margin 20px auto
  padding 20px
  position relative
  &:first-child
    +above(desktop)
      margin-top 20px
      margin-bottom 0
  .section-header
    min-height 40px
    padding 0
    h3
      color bayoux
    .controls
      padding 0

  .module__data
    textarea
      width 100%
    > p > .button
      margin-left 0
      text-align center
      width 100%
    .tags
      text-transform capitalize

  .week
    margin-bottom 0 !important

.module.course-details
  p
    margin 0 0 5px 0
  fieldset
    margin 0 0 5px 0
    > p
      margin 0

.module.course-description
  table
    margin-bottom 16px
    border 1px solid border_lt
    &:last-child
      margin-bottom 0
    td, th
      vertical-align top
      padding .5em .75em
      height auto
      border 1px solid border_lt
      white-space normal
    thead
      background smoke

.alert
  padding 20px
  text-align center
  p
    color burnt

.notification
  background-color sprout
  padding global-margin
  p
    col(1)
    color black
    float left
    margin 0
    +above(desktop)
      col(3/4)
  .button
    float left
    margin 10px 0 0
    +above(desktop)
      margin 0
      float right


@require 'cozy-ui/build'
@require './variables.styl'
@require './sidebar.css'
@require './todos.css'

.app-content
    margin 1rem 0 2rem 2rem

.password
    display flex
    line-height 35px
    border-bottom 1px solid cozy-grey
    > div
        flex 1

.password-description
    color cozy-grey

.unstyled-link
    text-decoration none
    color inherit

.select-option
    display flex
    line-height 28px
    > .select-icon
        flex 1
        text-align center
    > .select-label
        flex 9

.cozy-blue
    color cozy-blue

div.password-modal-content
    overflow visible

.home-icon
    font-size 70px
nav
    .c-nav-action
        cursor pointer

    .c-nav-action > li
    .c-nav-action > li:hover
        background cozy-blue
        border-radius 0 .188rem .188rem 0
        .c-nav-link > span, svg
            color white

    .c-nav-action > li:before
        width 0

Add ability to view fontawesome icons on production

@require 'cozy-ui/build'
@require './variables.styl'
@require './sidebar.css'
@require './todos.css'

.app-content
    margin 1rem 0 2rem 2rem

.password
    display flex
    line-height 35px
    border-bottom 1px solid cozy-grey
    > div
        flex 1

.password-description
    color cozy-grey

.unstyled-link
    text-decoration none
    color inherit

.select-option
    display flex
    line-height 28px
    > .select-icon
        flex 1
        text-align center
    > .select-label
        flex 9

.cozy-blue
    color cozy-blue

div.password-modal-content
    overflow visible

.home-icon
    font-size 70px
nav
    .c-nav-action
        cursor pointer

    .c-nav-action > li
    .c-nav-action > li:hover
        background cozy-blue
        border-radius 0 .188rem .188rem 0
        .c-nav-link > span, svg
            color white

    .c-nav-action > li:before
        width 0

svg.svg-inline--fa[aria-hidden=true]
    visibility visible
    display block


.logo-container
	position: relative
	z-index: 1
	transform: translate(0px,240px)
	background: #ccc
	-webkit-text-fill-color: transparent
	-webkit-background-clip: text
	text-align: center
	.logo
		font-weight: 900
		font-size: 4rem
		text-shadow: -1px 4px 1px #383541
		text-align: center
	&.up
		transform: scale(1,0.6) translate(0,0)
		transition: transform .5s
		.logo
			font-weight: 600

	@media (max-width: 760px)
		.logo
			font-weight: 600
		&.up
			.logo
				font-weight: 400

Add media screen for logo size in mobile

.logo-container
	position: relative
	z-index: 1
	transform: translate(0px,240px)
	background: #ccc
	-webkit-text-fill-color: transparent
	-webkit-background-clip: text
	text-align: center
	.logo
		font-weight: 900
		font-size: 4rem
		text-shadow: -1px 4px 1px #383541
		text-align: center
	&.up
		transform: scale(1,0.6) translate(0,0)
		transition: transform .5s
		.logo
			font-weight: 600

	@media (max-width: 400px)
		.logo
			font-size: 3rem

	@media (max-width: 760px)
		.logo
			font-weight: 600
		&.up
			.logo
				font-weight: 400


.uls-trigger
  position relative
  top -2px
  margin-left 0px
  /*@noflip*/ padding-left: 30px

.uls-menu
  margin-top 10px
  input[type=text]
    height auto

.uls-menu .uls-lcd-region-section .uls-lcd-region-title
  font-weight normal

.uls-search-label
  height 27px

.uls-filterinput
  padding-top 3px

@media only screen and (max-width: 500px)
  .uls-trigger
    position absolute
    top 20px
    right 15%
    font-size 12px
    border 1px solid aliceblue
    padding-right 0px

  .uls-menu
    left 2% !important

  .uls-grid
    .uls-columns
      padding 0 1px
    .uls-row
      min-width 350px
      .uls-eleven
        margin-left unset
  .uls-wide
    min-width 350px

  .uls-language-list a
    font-size 10px

Update Styling for the Language Switcher Division

.uls-trigger
  position relative
  top -2px
  margin-left 0px
  /*@noflip*/ padding-left: 30px

.uls-menu
  margin-top 10px
  input[type=text]
    height auto

.uls-menu .uls-lcd-region-section .uls-lcd-region-title
  font-weight normal

.uls-search-label
  height 27px

.uls-filterinput
  padding-top 3px

@media only screen and (max-width: 500px)
  .uls-trigger
    position absolute
    top 20px
    right 15%
    font-size 12px
    border 1px solid aliceblue
    padding-right 0px

  .uls-menu
    left 0% !important

  .uls-grid
    .uls-columns
      padding 0 1px
    .uls-row
      min-width 350px
      .uls-eleven
        margin-left unset
  .uls-wide
    min-width 350px

  .uls-language-list a
    font-size 10px


@require 'cozy-ui'

.fil-actionmenu-backdrop
    position   fixed
    z-index    $overlay
    top        0
    right      0
    bottom     0
    left       0
    display    block
    background rgba(50, 54, 63, 0.5)

.fil-actionmenu
    @extend        $popover
    z-index        $file-action-menu
    position       fixed
    bottom         em(9px)
    width          "calc(100% - %s)" % em(16px)
    margin         0 em(8px)
    padding-bottom em(5px)

    &.with-transition
        transition transform .1s ease-out

    hr
        margin-top 0

.fil-actionmenu-header
    padding     em(20px) em(24px) em(20px) em(20px)
    font-size   16px
    font-weight bold

.fil-actionmenu-file
    margin-left   em(19px)
    padding-left  em(45px)
    background-position 0 center
    background-repeat no-repeat

Revert "fix: remove unused css class"

@require 'cozy-ui'

.fil-actionmenu-backdrop
    position   fixed
    z-index    $overlay
    top        0
    right      0
    bottom     0
    left       0
    display    block
    background rgba(50, 54, 63, 0.5)

.fil-actionmenu
    @extend        $popover
    z-index        $file-action-menu
    position       fixed
    bottom         em(9px)
    width          "calc(100% - %s)" % em(16px)
    margin         0 em(8px)
    padding-bottom em(5px)

    &.with-transition
        transition transform .1s ease-out

    hr
        margin-top 0

.fil-actionmenu-header
    padding     em(20px) em(24px) em(20px) em(20px)
    font-size   16px
    font-weight bold

.fil-actionmenu-file
    margin-left   em(19px)
    padding-left  em(45px)
    background-position 0 center
    background-repeat no-repeat

.fil-action-openWith
    background embedurl("../assets/icons/icon-link-out-16.svg") em(16px) center no-repeat
.fil-action-download
    background embedurl("../assets/icons/icon-download-16.svg") em(16px) center no-repeat
.fil-action-destroy
.fil-action-trash
    background embedurl("../assets/icons/icon-delete-16.svg") em(16px) center no-repeat
.fil-action-restore
    background embedurl("../assets/icons/icon-restore.svg") em(16px) center no-repeat
.fil-action-rename
    background embedurl("../assets/icons/icon-rename.svg") em(16px) center no-repeat


@import "nodeca.core/client/common/_variables"

.btn + .btn
  margin-left .4rem

.btn-square
  padding-left 0 !important
  padding-right 0 !important
  min-width 2.375em // 38px

.btn-sm.btn-square
  min-width 2.0em // 28px

.btn-xs.btn-square
  min-width 1.917em // 23px

.dropdown-toggle.btn-square:after
  margin-left 0

.dropdown-toggle.icon:after
  border none
  width 0
  margin 0

// Fix bottom margin when h1..h6 used
.card-header
  margin-bottom 0 !important

.form-group small
  display inline-block
  line-height 1.3em
  margin-top .5em

Change tabs style to underlined

@import "nodeca.core/client/common/_variables"

.btn + .btn
  margin-left .4rem

.btn-square
  padding-left 0 !important
  padding-right 0 !important
  min-width 2.375em // 38px

.btn-sm.btn-square
  min-width 2.0em // 28px

.btn-xs.btn-square
  min-width 1.917em // 23px

.dropdown-toggle.btn-square:after
  margin-left 0

.dropdown-toggle.icon:after
  border none
  width 0
  margin 0

// Fix bottom margin when h1..h6 used
.card-header
  margin-bottom 0 !important

.form-group small
  display inline-block
  line-height 1.3em
  margin-top .5em

.nav-tabs
  border-bottom unset !important

  .nav-link
    border none !important
    border-radius 0 !important
    padding .5em .5em !important
    border-bottom 3px solid transparent !important

    &.active
      border-bottom 3px solid $brand-primary !important

  .nav-item + .nav-item
    margin-left .7em !important


.infinite-tree {
}
.infinite-tree-scroll {
    overflow: auto;
}
.infinite-tree-content {
    // Outline removes default browser's borders for focused element.
    outline: 0;

    .tree-selected.tree-item,
    .tree-selected.tree-item:hover {
        background: #deecfd;
        border: 1px solid #0066cc;
    }
    .tree-item {
        border: 1px solid transparent;
        cursor: default;
    }
    .tree-item:hover {
        background: #f2fdff;
    }
    .tree-toggler {
        color: #333;
    }
    .tree-toggler:hover {
        color: #000;
        text-decoration: none;
    }
    .tree-title {
        cursor: pointer;
    }
}
// centering message that appears when no data provided
.infinite-tree-no-data {
    text-align: center;
}

Disable user-select for tree-toggler and tree-title

.infinite-tree {
}
.infinite-tree-scroll {
    overflow: auto;
}
.infinite-tree-content {
    // Outline removes default browser's borders for focused element.
    outline: 0;

    .tree-selected.tree-item,
    .tree-selected.tree-item:hover {
        background: #deecfd;
        border: 1px solid #0066cc;
    }
    .tree-item {
        border: 1px solid transparent;
        cursor: default;
    }
    .tree-item:hover {
        background: #f2fdff;
    }
    .tree-toggler {
        color: #333;
        user-select: none;
    }
    .tree-toggler:hover {
        color: #000;
        text-decoration: none;
    }
    .tree-title {
        cursor: pointer;
        user-select: none;
    }
}
// centering message that appears when no data provided
.infinite-tree-no-data {
    text-align: center;
}


@import 'nib'

body
  color: #222
  font-family: 'Droid Sans', sans-serif
  padding-bottom: 40px

ul#url
  line-height: 36px
  font-size: 20px
  color: #222

  span.divider
    padding: 2px;

  .getpost
    padding: 5px
    font-size: 12px
    margin-right: 10px

.hero-unit
  background-color: #3A87AD
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  color: white

  h1
    color: inherit

#credits .span11 { line-height: 60px; font-size: 20px; }

Remove NIB import - unused


/* *************
RESETS
**************** */

body
  border 0
  outline 0
  padding 0
  margin 0
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-shadow 0 0 1px rgba(0,0,0,0.3)

/* *************
BANNER TEMPLATE
**************** */
banner_height = 300px
banner_width = 250px
banner_bg = #2c3e50

@import 'templates/doubleclick'
// @import 'templates/sizmek'

/* *************
CUSTOM STYLES
**************** */

Change width and height to the correct sizes

/* *************
RESETS
**************** */

body
  border 0
  outline 0
  padding 0
  margin 0
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-shadow 0 0 1px rgba(0,0,0,0.3)

/* *************
BANNER TEMPLATE
**************** */
banner_height = 250px
banner_width = 300px
banner_bg = #2c3e50

@import 'templates/doubleclick'
// @import 'templates/sizmek'

/* *************
CUSTOM STYLES
**************** */


<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.emphatic
  background: #222
  color: white
<% } %>

Add progress bar styles to starter styles

<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease
<% } %>


<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none
<% } %>

Add emphatic styles to starter styles

<% if (syntax) { %>// Import CSS from "bower_components"
// thanks to Stylus' "import css" and "paths" options
@import 'prism/themes/prism-okaidia.css'
// Check out "bower_components/prism/themes/" for available themes

<% } %>// New to Stylus? Check out http://learnboost.github.io/stylus
// Use modern CSS thanks to Autoprefixer: https://github.com/ai/autoprefixer
<% if (!useTheme) { %>
// Style using Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0
  pointer-events: none

.emphatic
  background: #222
  color: white
<% } %>


/*!
 * Copyright (C) 2013 Kaj Magnus Lindberg (born 1979)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

#debiki-dashbar
  background: black

  .debiki-dashbar-logo img
    width: 26px
    padding: 0
    margin: 0
    position: relative
    display: inline

  .debiki-dashbar-logo,
  a
    padding: 5px 7px 6px 7px
    vertical-align: middle
    display: inline-block

  a
    height: 100%
    color: hsl(0, 0%, 87%)
    font-family: Verdana, sans-serif
    text-decoration: none
    font-weight: bold

    &:hover
      background: #888
      color: #fff

// vim: fdm=marker et ts=2 sw=2 tw=100 fo=tcqwn list

Fix admin pages link not clickable bug.

/*!
 * Copyright (C) 2013 Kaj Magnus Lindberg (born 1979)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

#debiki-dashbar
  background: black
  z-index: 1;
  position: relative;

  .debiki-dashbar-logo img
    width: 26px
    padding: 0
    margin: 0
    position: relative
    display: inline

  .debiki-dashbar-logo,
  a
    padding: 5px 7px 6px 7px
    vertical-align: middle
    display: inline-block

  a
    height: 100%
    color: hsl(0, 0%, 87%)
    font-family: Verdana, sans-serif
    text-decoration: none
    font-weight: bold

    &:hover
      background: #888
      color: #fff

// vim: fdm=marker et ts=2 sw=2 tw=100 fo=tcqwn list


@import '../../variables'

.branch-build-header
  margin-top 30px
  margin-bottom 20px
  display flex
  align-items center

.branch-build-header__build-number
  font-weight 600
  font-size 14px
  margin-right 10px
  position relative

.branch-build-header__active-build-icon
  position absolute
  left -20px
  font-size 16px
  color $color-calypso

.branch-build-header__build-summary
  flex-grow 1
  font-size 12px

.branch-build-header__build-summary-info
  display flex

.branch-build-header__build-trigger-label-wrapper
  min-width 90px
  width 12%

.branch-build-header__users-for-build-wrapper
  min-width 180px
  width 20%

.branch-build-header__commits-wrapper
  min-width 150px
  width 10%

.branch-build-header__module-builds-completed
  font-style italic
  color $color-eerie

.branch-build-header__action-items
  flex-grow 1
  text-align right

.branch-build-header__cancel-build-button
  color $color-candy-apple
  font-weight 500
  padding 0 !important
  font-size 12px

  &:hover, &:focus, &[disabled]:hover
    color $color-candy-apple-dark

Fix cancel button styling again

@import '../../variables'

.branch-build-header
  margin-top 30px
  margin-bottom 20px
  display flex
  align-items center

.branch-build-header__build-number
  font-weight 600
  font-size 14px
  margin-right 10px
  position relative

.branch-build-header__active-build-icon
  position absolute
  left -20px
  font-size 16px
  color $color-calypso

.branch-build-header__build-summary
  flex-grow 1
  font-size 12px

.branch-build-header__build-summary-info
  display flex

.branch-build-header__build-trigger-label-wrapper
  min-width 90px
  width 12%

.branch-build-header__users-for-build-wrapper
  min-width 180px
  width 20%

.branch-build-header__commits-wrapper
  min-width 150px
  width 10%

.branch-build-header__module-builds-completed
  font-style italic
  color $color-eerie

.branch-build-header__action-items
  flex-grow 1
  text-align right

.btn.branch-build-header__cancel-build-button
  color $color-candy-apple
  font-weight 500
  padding 0
  font-size 12px

  &:hover, &:focus, &[disabled]:hover
    color $color-candy-apple-dark


.cf-sidebar__colors
  padding-bottom 17px

.cf-sidebar__colors
  .clickable
    cursor pointer
    &[data-empty=true]
      fill #f1f1f1
      pointer-events none

  svg
    height 175px
    width 175px

.cf-sidebar__colors_clear-right
  position relative
  float right
  font-size 13px
  bottom 18px
  cursor pointer
  color purple-color
  text-decoration underline
  display none

.cf-sidebar__colors_check
  color white
  position relative
  display none
  pointer-events none
  font-size 13px
  &.red
    bottom 45px
    right 38px
  &.pink
    bottom 82px
    right 31px
  &.darkviolet
    right 38px
    bottom 117px
  &.violet
    bottom 140px
    right 64px
  &.darkblue
    bottom 149px
    right 97px
  &.lightblue
    bottom 141px
    right 133px
  &.darkgreen
    bottom 117px
    right 160px
  &.lightgreen
    bottom 82px
    right 169px
  &.yellow
    bottom 47px
    right 160px
  &.gold
    bottom 23px
    right 133px
  &.orange
    bottom 13px
    right 97px
  &.darkorange
    bottom 23px
    right 64px
  &.black-and-white
    bottom 82px
    right 98px

Clear button doesn't make the color wheel jump

.cf-sidebar__colors
  padding-bottom 17px

.cf-sidebar__colors
  .clickable
    cursor pointer
    &[data-empty=true]
      fill #f1f1f1
      pointer-events none

  svg
    height 175px
    width 175px

.cf-sidebar__colors_clear-right
  position relative
  float right
  font-size 13px
  bottom 18px
  cursor pointer
  color purple-color
  text-decoration underline

.cf-sidebar__colors_check
  color white
  position relative
  display none
  pointer-events none
  font-size 13px
  &.red
    bottom 45px
    right 38px
  &.pink
    bottom 82px
    right 31px
  &.darkviolet
    right 38px
    bottom 117px
  &.violet
    bottom 140px
    right 64px
  &.darkblue
    bottom 149px
    right 97px
  &.lightblue
    bottom 141px
    right 133px
  &.darkgreen
    bottom 117px
    right 160px
  &.lightgreen
    bottom 82px
    right 169px
  &.yellow
    bottom 47px
    right 160px
  &.gold
    bottom 23px
    right 133px
  &.orange
    bottom 13px
    right 97px
  &.darkorange
    bottom 23px
    right 64px
  &.black-and-white
    bottom 82px
    right 98px


.logs
  table.list
    thead
      th.time
        width 12%
      th.trigger
        max-width 10%
        width 10%
      th.job
        width 10%
    td.text
      word-wrap break-word

      &.console, &.code
        pre
          background-color pal1
          color #fff

      .error
        flash(type: error)

      .warning
        flash(type: warning)

  .jobs
    table.list
      td.status
        span
          display inline-block

Fix error styles for log PRE tags

.logs
  table.list
    thead
      th.time
        width 12%
      th.trigger
        max-width 10%
        width 10%
      th.job
        width 10%
    td.text
      word-wrap break-word

      &.console, &.code
        pre
          background-color pal1
          color #fff

      .error, pre.error
        flash(type: error)

      .warning, pre.warning
        flash(type: warning)

  .jobs
    table.list
      td.status
        span
          display inline-block


$default-padding = 1em
$primary-red = #EF3E45
$secondary-red = #D4373E
$black = #000
$white = #FFF

header
  position: sticky
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a:not(.default)
    color: inherit
    display: inline-block
    outline: none
    padding: $default-padding
    text-decoration: none
    &.active
      background-color: $primary-red

    &:active
    &:hover
    &:focus
      background-color: $secondary-red

  ol
    background-color: $black
    margin-block-end: 0
    margin-block-start: 0
    padding-inline-start: 0
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      display: inline-block
      ol
        padding-left: 0
        position: absolute

  button
    background-color: inherit
    border: none
    color: inherit
    cursor: pointer
    display: inline-block
    font-size: 2em
    line-height: 1.575em
    padding: 0 0.5em
    outline: none
    &:hover
      background-color: $white
      color: $black
.hide-children
  ol
    display: none
  &:hover ol
      display: block

Extend the width of the countries' containers to avoid positioning problems in small viewports.

$default-padding = 1em
$primary-red = #EF3E45
$secondary-red = #D4373E
$black = #000
$white = #FFF

header
  position: sticky
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a:not(.default)
    color: inherit
    display: inline-block
    outline: none
    padding: $default-padding
    text-decoration: none
    &.active
      background-color: $primary-red

    &:active
    &:hover
    &:focus
      background-color: $secondary-red

  ol
    background-color: $black
    margin-block-end: 0
    margin-block-start: 0
    padding-inline-start: 0
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      display: inline-block
      ol
        left: 3em
        position: absolute
        right: 3em
        text-align: center

  button
    background-color: inherit
    border: none
    color: inherit
    cursor: pointer
    display: inline-block
    font-size: 2em
    line-height: 1.575em
    padding: 0 0.5em
    outline: none
    &:hover
      background-color: $white
      color: $black

.hide-children
  ol
    display: none
  &:hover ol
      display: block


*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		.app
			height: 100vh
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative
			.top
				display: flex
				align-items: center
				padding: 25px 0
			.middle
				width: 100%
				position: relative
				.img-container
					img
						width: 100%
						height: 60vh
						opacity: 0.7
						box-shadow: 0 10px 55px 5px rgba(0,0,0,0.27)
						mix-blend-mode: soft-light
				.show-box
					position: absolute
					top: 0
					z-index: 1
					width: 100%
					height: 100%
					display: flex
					align-items: center
					justify-content: center
			.bottom
				width: 100%
				flex: 1

Add fix height to top line

*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		.app
			height: 100vh
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative
			.top
				display: flex
				align-items: center
				padding: 25px 0
				max-height: 100px
			.middle
				width: 100%
				position: relative
				.img-container
					img
						width: 100%
						height: 60vh
						opacity: 0.7
						box-shadow: 0 10px 55px 5px rgba(0,0,0,0.27)
						mix-blend-mode: soft-light
				.show-box
					position: absolute
					top: 0
					z-index: 1
					width: 100%
					height: 100%
					display: flex
					align-items: center
					justify-content: center
			.bottom
				width: 100%
				flex: 1


.app
    position: absolute
    width: 99%
    height: 99%

.actionButton
    position: fixed
    right: 1em
    bottom: 1em

Make app fill whole window

body
    margin: 0
    padding: 0

.app
    position: absolute
    height: 100%

.actionButton
    position: fixed
    right: 1em
    bottom: 1em


.button-container
	margin: 30px 0
	.btn
		background: rgba(0,0,0,0.03)
		padding: 10px 20px
		font-size: 20px
		border-radius: 4px
		border: 1px solid rgba(185, 185, 185, 0.44)
		cursor: pointer
		color: #d2d2d2
		user-select: none
		opacity: 1
		transition: all 0.3s
		&:hover
			background: rgba(0,0,0,0.04)
			box-shadow: 3px 3px 12px rgba(0,0,0,0.19)
			border: 1px solid rgba(0, 0, 0, 0)
		&.disabled
			opacity: 0.4
			cursor: default
			background: rgba(0,0,0,0.03)
			border: 1px solid rgba(185,185,185,0.44)
			box-shadow: none

Convert font size from "px" to "rem"

.button-container
	margin: 30px 0
	.btn
		background: rgba(0,0,0,0.03)
		padding: 10px 20px
		font-size: 1.25rem
		border-radius: 4px
		border: 1px solid rgba(185, 185, 185, 0.44)
		cursor: pointer
		color: #d2d2d2
		user-select: none
		opacity: 1
		transition: all 0.3s
		&:hover
			background: rgba(0,0,0,0.04)
			box-shadow: 3px 3px 12px rgba(0,0,0,0.19)
			border: 1px solid rgba(0, 0, 0, 0)
		&.disabled
			opacity: 0.4
			cursor: default
			background: rgba(0,0,0,0.03)
			border: 1px solid rgba(185,185,185,0.44)
			box-shadow: none


/*
Open Chord Charts -- Database of free chord charts
By: Christophe Benz <christophe.benz@gmail.com>

Copyright (C) 2012 Christophe Benz
https://gitorious.org/open-chord-charts/

This file is part of Open Chord Charts.

Open Chord Charts is free software; you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

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

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

@media (max-width: 767px)
  .chords
    margin-left: -20px
    margin-right: -20px
  table td.bar
    padding-left: 2px
    padding-right: 2px
  .properties .key select
    margin-bottom: 0

.chords table
  table-layout: fixed
  td.bar
    font-family: 'lilyjazzchord', sans-serif
    text-align: center
  td.part-name
    text-align: right
    width: 1em

Reduce padding for small screens.

/*
Open Chord Charts -- Database of free chord charts
By: Christophe Benz <christophe.benz@gmail.com>

Copyright (C) 2012 Christophe Benz
https://gitorious.org/open-chord-charts/

This file is part of Open Chord Charts.

Open Chord Charts is free software; you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

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

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

@media (max-width: 767px)
  .chords
    margin-left: -20px
    margin-right: -20px
  table
    td.bar
      padding-left: 2px
      padding-right: 2px
    td.part-name
      padding: 1px
  .properties .key select
    margin-bottom: 0

.chords table
  table-layout: fixed
  td.bar
    font-family: 'lilyjazzchord', sans-serif
    text-align: center
  td.part-name
    text-align: right
    width: 1em


group-menu
  a.md-button
    text-transform: none
    margin: 0
    line-height: 42px

.group-menu-join-button
  font-size: 0.8em

#group-menu-container
    width:100%
    max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    max-width: -moz-max-content;    /* Firefox/Gecko */
    max-width: -webkit-max-content; /* Chrome */

#group-menu-active-group
    text-align: right
    margin-left: 1em
    max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    max-width: -moz-max-content;    /* Firefox/Gecko */
    max-width: -webkit-max-content; /* Chrome */
    text-overflow: ellipsis
    padding: 0em

#group-menu-group-picker
    text-align: left
    min-width: 50px

Set max-width property to max-content

group-menu
  a.md-button
    text-transform: none
    margin: 0
    line-height: 42px

.group-menu-join-button
  font-size: 0.8em

#group-menu-container
    width:100%
    max-width: max-content;

#group-menu-active-group
    text-align: right
    margin-left: 1em
    max-width: max-content;
    text-overflow: ellipsis
    padding: 0em

#group-menu-group-picker
    text-align: left
    min-width: 50px


body
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

.navbar
  background: linear-gradient(to right, #44bd78, #b1c75b)

  .site-name
    color: #FFFFFF !important
    font-weight: 400 !important

  .links
    background-color: transparent !important

    .nav-links > .nav-item > .nav-link
      color: #FFFFFF
      svg
        color: #FFFFFF
    .nav-links > .nav-item > .dropdown-wrapper .title
      color: #FFFFFF

    .nav-links > .nav-item > .dropdown-wrapper .arrow
      border-top-color: #FFFFFF

    .repo-link
      color: #FFFFFF
      svg
        color: #FFFFFF

.page
  a
    color: #428bca

.table-of-contents
  li
    list-style none
  & > ul
    padding: 0px
    & > li
      & > a
        display none
      & > ul
        padding: 0px
        column-count: 3
        column-width: 200px
        & > li a .badge
          font-size: x-small
          height: auto;
          line-height: 1.5 em;
          padding: 0 3px;
          vertical-align: middle !important

Add css style to fix missing language label in code field

body
  font: 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

.navbar
  background: linear-gradient(to right, #44bd78, #b1c75b)

  .site-name
    color: #FFFFFF !important
    font-weight: 400 !important

  .links
    background-color: transparent !important

    .nav-links > .nav-item > .nav-link
      color: #FFFFFF
      svg
        color: #FFFFFF
    .nav-links > .nav-item > .dropdown-wrapper .title
      color: #FFFFFF

    .nav-links > .nav-item > .dropdown-wrapper .arrow
      border-top-color: #FFFFFF

    .repo-link
      color: #FFFFFF
      svg
        color: #FFFFFF

.page
  a
    color: #428bca

.table-of-contents
  li
    list-style none
  & > ul
    padding: 0px
    & > li
      & > a
        display none
      & > ul
        padding: 0px
        column-count: 3
        column-width: 200px
        & > li a .badge
          font-size: x-small
          height: auto;
          line-height: 1.5 em;
          padding: 0 3px;
          vertical-align: middle !important

div[class~=language-r]:before {
  content: 'r';
}


/*
 * Copyright (C) 2012-2020  Online-Go.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

.Announcements {
    position: fixed;
    top: navbar-height;
    right: 0;
    z-index: z.announcements;

    .announcement {
        width: 13rem;
        themed background-color bg
        box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.16);
        overflow: hidden;
        .fa-times-circle {
            padding: 0.3rem;
            cursor: pointer;
        }
    }
}

&.zen .Announcements {
    display: none;
}

Tweak announcement display to make more mobile friendly

/*
 * Copyright (C) 2012-2020  Online-Go.com
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

.Announcements {
    position: absolute;
    top: navbar-height;
    right: 0;
    z-index: z.announcements;

    .announcement {
        width: 16rem;
        display: flex;
        padding-top: .2rem;
        padding-bottom: .2rem;
        padding-left: .2rem;
        themed background-color bg
        align-items: center;
        box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.16);
        overflow: hidden;
        .fa-times-circle {
            padding: 0.5rem;
            cursor: pointer;
            font-size: 1.2rem;
        }
    }
}

&.zen .Announcements {
    display: none;
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700')

html, body, .page
    width 100%
    height 100%
    margin 0

.test-list
    margin 15px

.vis-table
    height 300px

.vis-full
    width 100%
    height 100%

.containing-matrix
    width 100%

canvas
    display block

.overlay
    position fixed
    bottom 200px
    right 100px
    width 200px
    padding 20px
    background-color #ffeeaabb

.hidden
    display none
    visibility hidden

text:not(.fontawe)
    font-family Open Sans !important

#vis-element
    overflow hidden

Include LineUp header labels in font declaration

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700')

html, body, .page
    width 100%
    height 100%
    margin 0

.test-list
    margin 15px

.vis-table
    height 300px

.vis-full
    width 100%
    height 100%

.containing-matrix
    width 100%

canvas
    display block

.overlay
    position fixed
    bottom 200px
    right 100px
    width 200px
    padding 20px
    background-color #ffeeaabb

.hidden
    display none
    visibility hidden

text:not(.fontawe)
span.lu-label
    font-family Open Sans !important

#vis-element
    overflow hidden


// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease

Add bespoke-scale styles for Firefox

// Bespoke Classes: https://github.com/markdalgleish/bespoke-classes
// Stylus: http://learnboost.github.io/stylus

@import 'normalizecss/normalize.css'

.bespoke-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-scale-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0

.bespoke-slide
  width: 640px
  height: 480px
  position: absolute
  top: 50%
  left: 50%
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

.bespoke-inactive
  opacity: 0
  pointer-events: none

.bespoke-bullet-inactive
  opacity: 0

.emphatic
  background: #222
  color: white

.bespoke-progress-parent
  position: absolute
  top: 0
  left: 0
  right: 0
  height: .3vw

.bespoke-progress-bar
  position: absolute
  height: 100%
  background: #ccc
  transition: width .6s ease


#galleryContent {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: calc(100vh - 135px);
  margin: -10px;
}

#galleryContent #pageContent {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
}

Fix scroll bar style issues

/* patch backbone's awkward padding enforcement */
#g-app-body-container {
  padding: 0px !important;
}

#galleryContent {
  position: relative;
  width: 100%;
  min-height: 12em;
  height: calc(100vh - 12em);
}

#galleryContent #pageContent {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
}