@media $media-width-tablet {
  article.story .content { // TODO get rid of .content in hero to eliminate child selector
    padding-top: 40px;
    padding-bottom: 30px;
  }

  article.story .main {
    > section {
      padding: 15px;

      h2 {
        font-size: 25px;
        line-height: 42px;
        padding-top: 0;
      }
    }

    .licensing {
      ul {
        display: flex;
        flex-flow: row wrap;
      }

      li {
        flex: 1 200px;
        margin: 20px 45px 10px 55px;
      }
    }
  }

  article.story .asides {
    aside {
      > section {
        padding: 15px;

        &:first-child { border: none; }
      }

      .account {
        h2 { // TODO this maybe should move back to account stylesheet
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 45px;
          line-height: 45px;
          font-size: 18px;
          padding-left: 100px;
          overflow: hidden;
          white-space: nowrap;
          -o-text-overflow: ellipsis; // TODO mixin if this is necessary
          text-overflow: ellipsis;
          background-color: $page-fill-color;
          color: $heading-color;

          a {
            color: inherit;
          }
        }
      }
    }
  }
}

Add bottom spacing to story content

@media $media-width-tablet {
  article.story .content { // TODO get rid of .content in hero to eliminate child selector
    padding-top: 40px;
    padding-bottom: 30px;
  }

  article.story .main {
    padding-bottom: 25px;

    > section {
      padding: 15px;

      h2 {
        font-size: 25px;
        line-height: 42px;
        padding-top: 0;
      }
    }

    .licensing {
      ul {
        display: flex;
        flex-flow: row wrap;
      }

      li {
        flex: 1 200px;
        margin: 20px 45px 10px 55px;
      }
    }
  }

  article.story .asides {
    aside {
      > section {
        padding: 15px;

        &:first-child { border: none; }
      }

      .account {
        h2 { // TODO this maybe should move back to account stylesheet
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 45px;
          line-height: 45px;
          font-size: 18px;
          padding-left: 100px;
          overflow: hidden;
          white-space: nowrap;
          -o-text-overflow: ellipsis; // TODO mixin if this is necessary
          text-overflow: ellipsis;
          background-color: $page-fill-color;
          color: $heading-color;

          a {
            color: inherit;
          }
        }
      }
    }
  }
}


@require 'settings/breakpoints.styl'

div:focus
    outline: none

.fil-content
    padding-top 1.875rem

    +small-screen()
        padding 0

    &.--working
        // we forbid clicks when loading something to avoid concurrent data fetches and consequent flash effects
        pointer-events none
//!TODO Remove this code after upgrading to cozy-bar@6
[aria-hidden=true]
   display: initial
   visibility: initial

[role=application][aria-hidden=true]
    display: initial
    visibility: initial

Add dirty fix also for action bar

@require 'settings/breakpoints.styl'

div:focus
    outline: none

.fil-content
    padding-top 1.875rem

    +small-screen()
        padding 0

    &.--working
        // we forbid clicks when loading something to avoid concurrent data fetches and consequent flash effects
        pointer-events none
//!TODO Remove this code after upgrading to cozy-bar@6
[aria-hidden=true]
   display: initial
   visibility: initial

[role=application][aria-hidden=true]
    display: initial
    visibility: initial

[role=toolbar]
    button
        svg
            display: initial
            visibility: initial


.h-elements-container
    width 100%
    max-height 300px
    overflow-y auto
    margin-top 5px
    padding 3px 5px

    .h-element
        span
            cursor pointer

        .h-element-label
            margin-left 5px

        .h-delete-element
            float right

    .h-element:hover
        background-color #eee

.h-save-annotation
    float right

.h-draw-widget
  .h-draw-tools
    .btn-group-sm>.btn
      padding-left 3px
      padding-right 7px

  .h-style-group-row
    margin 10px 0

Change the color of the selected drawing style.

.h-elements-container
    width 100%
    max-height 300px
    overflow-y auto
    margin-top 5px
    padding 3px 5px

    .h-element
        span
            cursor pointer

        .h-element-label
            margin-left 5px

        .h-delete-element
            float right

    .h-element:hover
        background-color #eee

.h-save-annotation
    float right

.h-draw-widget
  .h-draw-tools
    .btn-group-sm>.btn
      padding-left 3px
      padding-right 7px

  .h-style-group-row
    margin 10px 0

  .btn-default.active
    background-color #5790ff
    &:focus, &:hover
      background-color #4672cc


/**
 * @Component   Grid
 * @Package     components
 */

@require '_variables'
@import 'mixins/grids'

// ROWS
// ----------------------------------------------------------------------------

.row
  width $grid-fluid-width
  padding 0 $grid-gutter-left 0 $grid-gutter-right
  overflow hidden

  &.padding-{$sm}
    padding-top 1rem
    padding-bottom 1rem

  &.padding-{$lg}
    padding-top 1.2rem
    padding-bottom 1.2rem

  &:not(.flex)
    display block

  &:not(.flex) > [class*="col-"]
    make-column-behaviour()

// COLUMNS
// ----------------------------------------------------------------------------

for n in (1..$grid-column-number)
  .col-{n}
    make-column(n)

// OFFSETS
// ----------------------------------------------------------------------------

for n in (1..$grid-column-number-offset)
  .offset-{n}
    margin-left $grid-fluid-width * (((($grid-gutter-width + $grid-column-width) * n) + $grid-gutter-left) / $grid-fixed-width) !important

// GRID MEDIA
// ----------------------------------------------------------------------------

@media only screen and (max-width: $media-max-width-tablet)
  .row
    for n in (1..$grid-column-number)
      .col-{n}
        make-column($grid-column-number)

  for n in (1..$grid-column-number)
    .offset-{n}
      margin-left 0px !important

Remove stuff that are in containers better and more reusable

/**
 * @Component   Grid
 * @Package     components
 */

@require '_variables'
@import 'mixins/grids'

// ROWS
// ----------------------------------------------------------------------------

.row
  width $grid-fluid-width
  padding 0 $grid-gutter-left 0 $grid-gutter-right
  overflow hidden

  &:not(.flex)
    display block

  &:not(.flex) > [class*="col-"]
    make-column-behaviour()

// COLUMNS
// ----------------------------------------------------------------------------

for n in (1..$grid-column-number)
  .col-{n}
    make-column(n)

// OFFSETS
// ----------------------------------------------------------------------------

for n in (1..$grid-column-number-offset)
  .offset-{n}
    margin-left $grid-fluid-width * (((($grid-gutter-width + $grid-column-width) * n) + $grid-gutter-left) / $grid-fixed-width) !important

// GRID MEDIA
// ----------------------------------------------------------------------------

@media only screen and (max-width: $media-max-width-tablet)
  .row
    for n in (1..$grid-column-number)
      .col-{n}
        make-column($grid-column-number)

  for n in (1..$grid-column-number)
    .offset-{n}
      margin-left 0px !important


.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.6rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px;
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh

Change font size to current weather

.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh


normalize();

[hidden]
  display: none !important;

Normalize [hidden] override is a block.

normalize();

normalize-hidden-block        := {
  display                     : none !important
}

[hidden]
  {normalize-hidden-block}


.form-markdown-editor-media-items
	@extend .well
	border: 1px solid $input-border
	border-top: 0
	background-color: $input-bg

	.form-group
		margin-bottom: 0

	.media-item-list
		white-space: nowrap

		.col
			float: none
			display: inline-block

	.media-item-list-item
		margin-bottom: 0

Fix styling for media items in the markdown editor.

.form-markdown-editor-media-items
	@extend .well
	border: 1px solid $input-border
	border-top: 0
	background-color: $input-bg

	.form-group
		margin-bottom: 0

	.media-item-list
		white-space: nowrap

		.col
			float: none
			display: inline-block

		&-item
			display: block
			position: relative
			height: 0
			padding-top: 80%
			background-color: $gray-darkest

			@media $media-xs
				margin-bottom: $grid-gutter-width-xs

		&-item-inner
			position: absolute
			top: 5px
			right: 5px
			bottom: 5px
			left: 5px

		&-item-controls
			position: absolute
			top: -5px
			right: 5px
			z-index: 1

		&-item-img
			position: absolute
			top: 0
			right: 0
			bottom: 0
			left: 0
			background-repeat: no-repeat
			background-position: center center
			background-size: cover


.posts
  li
    display flex

    // Unset general `li` styling.
    left 0
    padding-right 0

    justify-content space-between

    @media all and (max-width bp-small)
      margin-bottom .5em
      flex-direction column-reverse

  li:not(:last-child)
    border-bottom 1px solid invisiblegrey

  small
    color midgrey

    @media not all and (max-width bp-small)
      text-align right

Fix date alignment in posts lists

.posts
  li
    display flex

    // Unset general `li` styling.
    left 0
    padding-right 0

    align-items baseline
    justify-content space-between

    @media all and (max-width bp-small)
      margin-bottom .5em
      flex-direction column-reverse

  li:not(:last-child)
    border-bottom 1px solid invisiblegrey

  small
    color midgrey

    @media not all and (max-width bp-small)
      text-align right


.training__slide__quiz
  width $slide_inner_content_width
  +below($desktop)
    width 100%
  margin 0 auto
  ul
    list-style none
    padding-left 0
    margin-left 0
  li
    margin-left 0
    padding-left 0
    margin-bottom 10px

    &.revealed
      padding 10px
      position relative
      right 11px
      &.correct
        background $success_bg
      &.incorrect
        background $warning_bg

  label
    cursor pointer
    display flex

  input[type=radio]
    margin-right 8px
    -webkit-appearance radio
    position relative
    top -3px

  button
    margin-top 20px

.assessment__answer-explanation
  margin-left 23px
  font-size 14px
  &.correct
    color $success_text
    font-weight bold
  &.incorrect
    color $warning_text
    font-weight bold

Improve training radio btn alignment in safari

.training__slide__quiz
  width $slide_inner_content_width
  +below($desktop)
    width 100%
  margin 0 auto
  ul
    list-style none
    padding-left 0
    margin-left 0
  li
    margin-left 0
    padding-left 0
    margin-bottom 10px

    &.revealed
      padding 10px
      position relative
      right 11px
      &.correct
        background $success_bg
      &.incorrect
        background $warning_bg

  label
    cursor pointer
    display flex
    > div
      margin-right 8px
    > span
      flex 1

  input[type=radio]
    -webkit-appearance radio
    position relative
    top -3px

  button
    margin-top 20px

.assessment__answer-explanation
  margin-left 23px
  font-size 14px
  &.correct
    color $success_text
    font-weight bold
  &.incorrect
    color $warning_text
    font-weight bold


@require '~styles/variables'
@require '~styles-lib/mixins'

$-height = 40px

.post-add-button
	display: flex
	align-items: center

.-avatar
	change-bg('bg-subtle')
	img-circle()
	flex: none
	width: $-height
	height: $-height
	margin-right: $grid-gutter-width-xs * 0.5

	@media $media-sm-up
		margin-right: $grid-gutter-width * 0.5

.-input
	input-placeholder-button()
	flex: auto
	position: relative
	height: $-height
	line-height: $-height
	user-select: none
	-moz-user-select: none
	transition: border-color 200ms $strong-ease-out

	&::before
		transition: border-color 200ms $strong-ease-out
		caret(var(--theme-bg-subtle), size: 9px)
		content: ''

	&:hover
		border-color: var(--theme-link)

		&::before
			caret(var(--theme-link), size: 9px)

Fix long placeholders on mobile for community post add

@require '~styles/variables'
@require '~styles-lib/mixins'

$-height = 40px

.post-add-button
	display: flex
	align-items: center

.-avatar
	change-bg('bg-subtle')
	img-circle()
	flex: none
	width: $-height
	height: $-height
	margin-right: $grid-gutter-width-xs * 0.5

	@media $media-sm-up
		margin-right: $grid-gutter-width * 0.5

.-input
	input-placeholder-button()
	flex: auto
	position: relative
	height: $-height
	line-height: $-height
	user-select: none
	-moz-user-select: none
	transition: border-color 200ms $strong-ease-out
	overflow: hidden
	text-overflow: ellipsis
	white-space: nowrap

	&::before
		transition: border-color 200ms $strong-ease-out
		caret(var(--theme-bg-subtle), size: 9px)
		content: ''

	&:hover
		border-color: var(--theme-link)

		&::before
			caret(var(--theme-link), size: 9px)


@import "../../../Framework/src/themes/default/kdfn"
@import "../../../Main/styl/appfn"

@css {
/*
Activity mediaqueries stylesheet
resurrection.activity.styl
*/
}

@media only screen and (min-width: 0px) and (max-width: 1024px)

  .content-page.activity > main
    margin        0 auto
    float         none

  .content-page.activity > aside

    hidden()

Hide the Profile name from account menu for resolutions lower then 1024px

@import "../../../Framework/src/themes/default/kdfn"
@import "../../../Main/styl/appfn"

@css {
/*
Activity mediaqueries stylesheet
resurrection.activity.styl
*/
}

@media only screen and (min-width: 0px) and (max-width: 1024px)

  .content-page.activity > main
    margin        0 auto
    float         none

  .content-page.activity > aside

    hidden()

  .account-area > .avatar-area
    width       116px
    h2, h3
      hidden()

  #dock
    width       calc( 100% \- 312px )


.Home
  img
    max-width 100%
    vertical-align bottom

@require './example'
@require './explore'
@require './hero'
@require './more'
@require './quotes'
@require './next'
@require './section'
@require './split'
@require './to_fold'
@require './responsive'

Remove references to old styles

.Home
  img
    max-width 100%
    vertical-align bottom

@require './explore'
@require './hero'
@require './more'
@require './quotes'
@require './section'
@require './split'
@require './to_fold'
@require './responsive'


@import 'lib';

.chart-menu {
  display: none;
  font-weight: 100;
  height: 100%;
  // Offset total padding-left so the links are flush against the left window edge.
  margin-left: - ($min-padding + $med-padding);
  padding: $lrg-padding $med-padding $med-padding 0;
  width: $menu-width;

  ul {
    list-style: none;
    margin: $min-padding 0 0;
    padding: 0;
  }

  a {
    color: $normal-text;
    font-size: 12px;
    text-decoration: none;
    line-height: 2.5;
    display: block;
    border-radius: 0 4px 4px 0;
    padding: 0 $min-padding 0 0;
    text-align: right;

    &:hover {
      background-image: linear-gradient(90deg, #001021 0%, #00224A 100%);
    }
  }
}

@media $base-tablet {
  .chart-menu {
    display: block;
  }
}

Improve spacing of multi-line titles in sidebar

@import 'lib';

.chart-menu {
  display: none;
  font-weight: 100;
  height: 100%;
  // Offset total padding-left so the links are flush against the left window edge.
  margin-left: - ($min-padding + $med-padding);
  padding: $lrg-padding $med-padding $med-padding 0;
  width: $menu-width;

  ul {
    list-style: none;
    margin: $min-padding 0 0;
    padding: 0;
  }

  a {
    color: $normal-text;
    font-size: 12px;
    text-decoration: none;
    line-height: 1.5;
    display: block;
    border-radius: 0 4px 4px 0;
    padding: 0 $min-padding 0 0;
    text-align: right;
    margin-bottom: 15px;

    &:hover {
      background-image: linear-gradient(90deg, #001021 0%, #00224A 100%);
    }
  }
}

@media $base-tablet {
  .chart-menu {
    display: block;
  }
}


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

//
// Indicator shown on the avatar in navbar
//
.navbar__m-unread-dialogs
  .navbar-auth__avatar-container
  .navbar-toggler // menu on mobile
    position relative

    &:after // .navbar-toggler:before is already busy
      position absolute
      width 9px
      height 9px
      border-radius 5px
      top -4px
      left -4px
      background-color $brand-success
      content ' '
      box-shadow 0px 0px 1px 0 #808080

//
// Indicator shown near "dialogs" link in dropdown dialog
//
.navbar__m-unread-dialogs
  .navbar-auth__dropdown-dialogs:before
    width 6px
    height 6px
    border-radius 3px
    background-color $brand-success
    content ' '
    position relative
    left -6px
    margin-left -6px
    bottom 2px
    display inline-block

Move unread dialogs marker to the right side

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

//
// Indicator shown on the avatar in navbar
//
.navbar__m-unread-dialogs
  .navbar-auth__avatar-container
  .navbar-toggler // menu on mobile
    position relative

    &:after // .navbar-toggler:before is already busy
      position absolute
      width 9px
      height 9px
      border-radius 5px
      top -4px
      left -4px
      background-color $brand-success
      content ' '
      box-shadow 0px 0px 1px 0 #808080

//
// Indicator shown near "dialogs" link in dropdown dialog
//
.navbar__m-unread-dialogs
  .navbar-auth__dropdown-dialogs:after
    width 6px
    height 6px
    border-radius 3px
    background-color $brand-success
    content ' '
    position relative
    right -12px
    margin-left -6px
    bottom 2px
    display inline-block


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

Add Eric Meyer's CSS Reset

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

reset-meyer()
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video
        margin 0
        padding 0
        border 0
        font-size 100%
        font inherit
        vertical-align baseline

    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section
        display block

    body
        line-height 1

    ol, ul
        list-style none

    blockquote, q
        quotes none

    blockquote:before, blockquote:after,
    q:before, q:after
        content ''
        content none

    table
        border-collapse collapse
        border-spacing 0


@import './infoTableMixin.styl'

.m-feature-info-popup
  max-height 85vh
  overflow-y auto

  .m-layer:not(:first-child)
    margin-top 20px

  .m-feature-info-table
    info-table()

Apply aesthetic improvement by putting padding on the inside of potential scrollbar instead of outside

@import './infoTableMixin.styl'

#m-feature-info-dialog
  padding-right 5px

.m-feature-info-popup
  max-height 85vh
  padding-right 10px
  overflow-y auto

  .m-layer:not(:first-child)
    margin-top 20px

  .m-feature-info-table
    info-table()


.LandingAbout__section {
  padding: grid(4);
}

@media screen and (min-width: 700px) {
  .LandingAbout__section {
    display: flex;
  }

  .LandingAbout__section:nth-child(even) .LandingAbout__imageContainer {
    order: 10;
  }

  .LandingAbout__imageContainer,
  .LandingAbout__text  {
    padding: grid(5);
    flex:1;
  }
}

.LandingAbout__image {
  width: 100%;
}

.LandingAbout__text {
  flex: 1;
}

.LandingAbout__headline {
  Text__headerScale(2);
  font-family: $Text__monospacedFont;
  text-transform: uppercase;
  font-weight: 900;
}

Fix weird margin misalignment of images and text


@require 'includes/variables'

.js-yes .js-hidden {
    display: none;
}

Fix display bug in sites without site js

@require 'includes/variables'

.js-yes:not(.js-siteno) .js-hidden {
    display: none;
}


@import '_settings'

normalize()
base()

// http://jsbin.com/acide4/8
// http://snook.ca/archives/html_and_css/font-size-with-rem
html
  font-size: 62.5%

#rainbow
  transition(background-color 0.5s ease-in-out)
  background-color: back-color
  &,
  a
    color: fore-color

#answer,
#timer,
#credits
  text-align: center

#answer
  font-size: 15rem

#timer
  font-size: 7.5rem
  // .answer-no &
  // .answer-yes &

#credits
  font-size: 2rem
  padding: 0.5rem 0
  width: 100%
  @media (min-height: 40ex)
    bottom: 0
    position: fixed
  a
    display: inline-block
    border-bottom: 1px dotted #FFFFFF
    text-decoration: none

Use variables for common stylesheet values

@import '_settings'

normalize()
base()

// http://jsbin.com/acide4/8
// http://snook.ca/archives/html_and_css/font-size-with-rem
html
  font-size: 62.5%

#rainbow
  transition(background-color 0.5s ease-in-out)
  background-color: back-color
  &,
  a
    color: fore-color

#answer,
#timer,
#credits
  text-align: center

#answer
  font-size: 15rem

#timer
  font-size: 7.5rem
  // .answer-no &
  // .answer-yes &

#credits
  font-size: 2rem
  padding: 0.5rem 0
  width: 100%
  @media (min-height: 40ex)
    bottom: 0
    position: fixed
  a
    display: inline-block
    border-bottom: 1px dotted fore-color
    text-decoration: none


body
  margin-top: 40px
  margin-bottom: 40px

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

a
  color: inherit

.map-container
  border-radius: 6px
  position: relative

.map
  height: 300px
  width: 100%

.map-overlay
  background: rgba(255, 255, 255, 0.9)
  border-radius: 6px
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2)
  position: absolute
  top: -10px
  right: -10px
  padding-top: 10px
  padding-bottom: 10px
  padding-left: 16px
  padding-right: 16px
  text-align: right
  h1, p
    margin-top: 0
    margin-bottom: 0

.narcissa-intro
  font-family: 'omnes-pro'

.narcissa-ui
  font-family: 'courier-prime'
  h1, h2, h3, h4, h5, h6
    font-family: 'tangerine'

.left-col
  text-align: right

Move map legend to lower right and add margin

body
  margin-top: 40px
  margin-bottom: 40px

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

a
  color: inherit

.narcissa-intro
  font-family: 'omnes-pro'

.narcissa-ui
  font-family: 'courier-prime'
  h1, h2, h3, h4, h5, h6
    font-family: 'tangerine'

.narcissa-item
  margin-bottom: 20px

.map-container
  border-radius: 6px
  position: relative

.map
  height: 300px
  width: 100%

.map-overlay
  background: rgba(255, 255, 255, 0.9)
  border-radius: 6px
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2)
  position: absolute
  bottom: -10px
  right: -10px
  padding-top: 10px
  padding-bottom: 10px
  padding-left: 16px
  padding-right: 16px
  text-align: right
  h1, p
    margin-top: 0
    margin-bottom: 0

.leaflet-control-attribution
  display: none

.left-col
  text-align: right


.mdl-textfield
  >textarea
    overflow                                hidden
    resize                                  none

  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label
    color                                   mdl-error

  .mdl-textfield__error
    display                                 block

  &__helper
    position                                absolute
    display                                 block
    color                                   rgba(97,97,97,0.9)
    font-size                               12px
    margin-top                              3px

  :invalid
    box-shadow                              none

  textarea
    vertical-align                          top

  &.disabled
    .mdl-textfield__label:after
      display                               none

    .mdl-textfield__input
      color                                 mdl-light-full

Refactor styles that arent mdl overwrites + made it possible to resize textarea

.dmd-textfield
  &---textarea
    vertical-align                          top
    overflow                                hidden
    resize                                  none

    &--resizable
      resize                                vertical

  &.is-invalid .mdl-textfield__label
    color                                   rgb(222, 50, 38)

  &---error
    display                                 block

  &---helper
    position                                absolute
    display                                 block
    color                                   rgba(97,97,97,0.9)
    font-size                               12px
    margin-top                              3px

  :invalid
    box-shadow                              none

  &--disabled
    .mdl-textfield__label:after
      display                               none

    .mdl-textfield__input
      color                                 rgba(0,0,0,0.26)


/* Search sidebar
================= */

.sidebar-search
  position relative
  margin-top 75px
  padding 10px
  border-left 1px solid #dee7e9
  padding-bottom 30px
  min-height 600px
  top 0
  bottom 0

  h3
    font-weight 300
    margin-top 0

  span.filter
    margin-bottom 20px
    display block

  label
    display block
    margin-bottom 10px
    font-size 0.9em
    font-weight 300

  select
    width 241px

  input
    display block
    width 227px
    padding 5px
    font-size 13px
    border 1px solid #aaa

  input:focus
    border 1px solid #a1b3c2

  .label-slider
    display inline-block
    float left
    width 120px

  input#score, input#publication-date
    border 0
    float right
    width 100px
    display block
    padding-top 1px
    text-align right

  #score-range, #date-range
    display block
    margin 20px 10px
    width 230px

@media screen and (max-width: 1140px)
  .sidebar-search
    position relative

Fix search sidebar min-height to avoid scrollbar

/* Search sidebar
================= */

.sidebar-search
  position relative
  margin-top 75px
  padding 10px
  border-left 1px solid #dee7e9
  padding-bottom 30px
  min-height 640px
  top 0
  bottom 0

  h3
    font-weight 300
    margin-top 0

  span.filter
    margin-bottom 20px
    display block

  label
    display block
    margin-bottom 10px
    font-size 0.9em
    font-weight 300

  select
    width 241px

  input
    display block
    width 227px
    padding 5px
    font-size 13px
    border 1px solid #aaa

  input:focus
    border 1px solid #a1b3c2

  .label-slider
    display inline-block
    float left
    width 120px

  input#score, input#publication-date
    border 0
    float right
    width 100px
    display block
    padding-top 1px
    text-align right

  #score-range, #date-range
    display block
    margin 20px 10px
    width 230px

@media screen and (max-width: 1140px)
  .sidebar-search
    position relative


@import "{design}/app.styl"

.imageViewerLoadingIndicator
  display: none
  color: $textPrimaryColor

.faded
  opacity: 0.5

.imageViewerErrorLoadingIndicator
  display: none
  background-color: rgba(0,0,0,0.75)

  p, h4
    text-align: center
    color: $textColorActive
    padding: 4px 0

  p
    font-size: 11pt

.loadingIndicator
  pointer-events: none // Necessary for click-through to cornerstone element below
  width: 100%
  height: 100%
  font-size: 18px
  z-index: 100

  .indicatorContents
    position: absolute
    top: 40%
    width: 100%
    color: $textSecondaryColor
    font-size: 30px
    font-weight: 200
    text-align: center

Fix loading / error indicator styling

@import "{design}/app.styl"

.imageViewerLoadingIndicator
  color: $textSecondaryColor

.faded
  opacity: 0.5

.imageViewerErrorLoadingIndicator
  color: $uiYellow

  p, h4
    text-align: center
    padding: 4px 0

  p
    font-size: 11pt

.loadingIndicator
  display: none
  pointer-events: none // Necessary for click-through to cornerstone element below
  position: absolute
  top: 0
  width: 100%
  height: 100%
  font-size: 18px
  z-index: 100
  background-color: rgba(0,0,0,0.75)

  .indicatorContents
    position: absolute
    top: 40%
    width: 100%
    font-size: 30px
    font-weight: 200
    text-align: center


.overview
  .primary
    +above(desktop)
      col(0.674, gutter: 1.8)
  .sidebar
    input
      margin-top 5px
      width 100%
    +above(desktop)
      col(1/3)
  .section-header
    display flex
    margin-bottom 8px

    .controls
      position relative
      flex 1 0 auto

.milestones
  .module__data
    & > p
      color bayoux
      margin-bottom 8px
    hr
      margin 16px 0 8px 0
    &.completed
      opacity 0.5
  .markdown
    color body-color
  .section-header:last-child
    margin-bottom 0
    hr
      display none

Remove extra margin from label

.overview
  .primary
    +above(desktop)
      col(0.674, gutter: 1.8)
  .sidebar
    input
      width 100%
    +above(desktop)
      col(1/3)
  .section-header
    display flex
    margin-bottom 8px

    .controls
      position relative
      flex 1 0 auto

.milestones
  .module__data
    & > p
      color bayoux
      margin-bottom 8px
    hr
      margin 16px 0 8px 0
    &.completed
      opacity 0.5
  .markdown
    color body-color
  .section-header:last-child
    margin-bottom 0
    hr
      display none


.classify-content
  display: flex

.project-classify-page
  display: flex
  flex: 1

  > .subject
    flex: 4

  > .classifier-task
    display: flex
    flex: 1
    flex-direction: column
    padding-left: 1vw

  .task-viewer
    flex: 1 0 auto

  .task-nav
    border-top: 1px solid
    display: flex
    flex: 0 0 auto
    margin-top: 1em

    button
      @extends $reset-button
      flex: 1 0 auto
      letter-spacing: 0.05em
      padding: 0.5em 1em
      text-transform: uppercase

      &:not(:first-child)
        border-left: 1px solid

      &:disabled
        opacity: 0.4

      &.backward
        flex-grow: 0

.subject-viewer
  text-align center

.subject-container
  color: gray

.subject-image
  max-height: 95vh

.subject-viewer-svg
  outline: 1px dashed rgba(yellow, 0.5)

  &[data-tool]
    cursor: crosshair

@require "./task-viewer"
@require "./drawing-tool"

Make sure subject image shrinks

.classify-content
  display: flex

.project-classify-page
  display: flex
  flex: 1

  > .subject
    flex: 4

  > .classifier-task
    display: flex
    flex: 1
    flex-direction: column
    padding-left: 1vw

  .task-viewer
    flex: 1 0 auto

  .task-nav
    border-top: 1px solid
    display: flex
    flex: 0 0 auto
    margin-top: 1em

    button
      @extends $reset-button
      flex: 1 0 auto
      letter-spacing: 0.05em
      padding: 0.5em 1em
      text-transform: uppercase

      &:not(:first-child)
        border-left: 1px solid

      &:disabled
        opacity: 0.4

      &.backward
        flex-grow: 0

.subject-viewer
  text-align center

.subject-container
  color: gray

.subject-image
  max-height: 95vh
  max-width: 100%

.subject-viewer-svg
  outline: 1px dashed rgba(yellow, 0.5)

  &[data-tool]
    cursor: crosshair

@require "./task-viewer"
@require "./drawing-tool"


.form-group
    // global rules
    button, input, optgroup, select, textarea
        font inherit
        letter-spacing .01rem
        &:focus
            outline: 0

    // all inputs that are within a standard box
    input[type=date], input[type=datetime], input[type=datetime-local], input[type=email],
    input[type=month], input[type=number], input[type=password], input[type=tel],
    input[type=text], input[type=time], input[type=url], input[type=week]
        border 1px solid #aaaaaa
        border-radius 1px
        padding .75rem 1rem

    // button
    button, input[type=button], input[type=submit], input[type=reset]
        padding .75rem 1rem
        border-radius 1px
        border solid 1px transparent
        background-color $base-color
        color #eee
        transition background-color .25s ease-out

        &:hover
            background-color $base-color-dark
            cursor pointer

    // checkbox
    // color
    // date
    // datetime
    // datetime-local
    // email
    // file
    // hidden
    // image
    // month
    // number
    // password
    // radio
    // range
    // reset
    // search
    // submit
    // tel
    // text
    // time
    // url
    // week

Add shadows and transitions to inputs

.form-group
    // global rules
    button, input, optgroup, select, textarea
        font inherit
        letter-spacing .01rem
        &:focus
            outline: 0

    // all inputs that are within a standard box
    input[type=date], input[type=datetime], input[type=datetime-local], input[type=email],
    input[type=month], input[type=number], input[type=password], input[type=tel],
    input[type=text], input[type=time], input[type=url], input[type=week]
        border 1px solid #aaaaaa
        border-radius 1px
        padding .75rem 1rem
        box-shadow inset 0 1px darken(#fff, 20%)
        transition border-color .25s ease-out, box-shadow .5s ease-out
        &:focus
            border 1px solid #111
            box-shadow 0 0 5px darken(#fff, 30%)

    // button
    button, input[type=button], input[type=submit], input[type=reset]
        padding .75rem 1rem
        border-radius 1px
        border solid 1px transparent
        background-color $base-color
        color #eee
        transition background-color .25s ease-out

        &:hover
            background-color $base-color-dark
            cursor pointer

    // checkbox
    // color
    // date
    // datetime
    // datetime-local
    // email
    // file
    // hidden
    // image
    // month
    // number
    // password
    // radio
    // range
    // reset
    // search
    // submit
    // tel
    // text
    // time
    // url
    // week


#content,
.wrapper
  min-height 100%
  height 100%

.container
  width 100%
  max-width 1200px
  margin 0 auto

.header
  height 2em
  padding-top 3em
  padding-bottom 1em
  text-align center

  .brand
    font-size 1.4em
    text-decoration none
    display block

    .offline
      color gray
      font-size 0.6em
      margin-left 1em
      text-transform uppercase

  .navigation
    display block
    margin-top 0.4em

.content
  min-height 100%
  margin-bottom -8em

  &:after
    content ""
    display block
    height 8em

.footer
  padding-bottom 1.6em
  height 8em

  .icon-links
    font-size 2em
    text-align center
    padding-bottom 1em

  a
    margin 0.4em

@media screen and (min-width: 600px)
  .header
    text-align left

    .brand
      width 45%
      display inline-block
      margin-left 1em
      text-align left

    .navigation
      width 45%
      display inline-block
      margin-top -0.6em
      margin-right 1em
      text-align right
      float right

@media screen and (min-width: 1200px)
  .header
    .brand
      margin-left 0em

    .navigation
      margin-right 0em

Fix height of navigation on smaller screens

#content,
.wrapper
  min-height 100%
  height 100%

.container
  width 100%
  max-width 1200px
  margin 0 auto

.header
  min-height 2em
  padding-top 3em
  padding-bottom 1em
  text-align center

  .brand
    font-size 1.4em
    text-decoration none
    display block

    .offline
      color gray
      font-size 0.6em
      margin-left 1em
      text-transform uppercase

  .navigation
    display block
    margin-top 0.4em

.content
  min-height 100%
  margin-bottom -8em

  &:after
    content ""
    display block
    height 8em

.footer
  padding-bottom 1.6em
  height 8em

  .icon-links
    font-size 2em
    text-align center
    padding-bottom 1em

  a
    margin 0.4em

@media screen and (min-width: 600px)
  .header
    text-align left

    .brand
      width 45%
      display inline-block
      margin-left 1em
      text-align left

    .navigation
      width 45%
      display inline-block
      margin-top -0.6em
      margin-right 1em
      text-align right
      float right

@media screen and (min-width: 1200px)
  .header
    .brand
      margin-left 0em

    .navigation
      margin-right 0em


.BlogPost
  // Classes come through with Jekyll generated HTML
  // Not going to bother with correcting *that*
  // So for now, force things to look correct

  .post
    //

    > .post-header
      collapsed-margins(2em)

      > .post-category-title
        collapsed-margins(2em)

        > h1
          margin 0
          text-align center
          font-size font-size-h2
          font-weight normal

      > .post-author
      > .post-meta
        text-align center
        font-size font-size-base
        line-height line-height-base

      > .post-author
        font-weight bold

    > .post-content
      //

      p
        collapsed-margins(1em)
        font-size font-size-base
        line-height line-height-tall

        > a
          text-decoration underline

      img
      iframe
        display block
        max-width 100%
        vertical-align bottom
        border 1px solid colors-gray-border
        margin 2em auto

      iframe
        box-shadow 4px 4px 4px colors-gray-background

      h2
        margin-top 4em

      hr
        border 1px solid colors-gray-border
        margin 3em 2em

Fix safari border bug and get responsive sizes for iframe

.BlogPost
  // Classes come through with Jekyll generated HTML
  // Not going to bother with correcting *that*
  // So for now, force things to look correct

  .post
    //

    > .post-header
      collapsed-margins(2em)

      > .post-category-title
        collapsed-margins(2em)

        > h1
          margin 0
          text-align center
          font-size font-size-h2
          font-weight normal

      > .post-author
      > .post-meta
        text-align center
        font-size font-size-base
        line-height line-height-base

      > .post-author
        font-weight bold

    > .post-content
      //

      p
        collapsed-margins(1em)
        font-size font-size-base
        line-height line-height-tall

        > a
          text-decoration underline

      img
      iframe
        display block
        max-width 100%
        vertical-align bottom
        border 1px solid colors-gray-border
        margin 2em auto

      iframe
        box-shadow 4px 4px 4px colors-gray-background
        height 2150px !important
        padding 1px
        +below(400px)
          height 2000px !important
        +below(380px)
          height 1950px !important
        +below(340px)
          height 1700px !important

      h2
        margin-top 4em

      hr
        border 1px solid colors-gray-border
        margin 3em 2em


.BlogPost
  // Classes come through with Jekyll generated HTML
  // Not going to bother with correcting *that*
  // So for now, force things to look correct

  .post
    //

    > .post-header
      collapsed-margins(2em)

      > .post-category-title
        collapsed-margins(2em)

        > h1
          margin 0
          text-align center
          font-size font-size-h2
          font-weight normal

      > .post-author
      > .post-meta
        text-align center
        font-size font-size-base
        line-height line-height-base

      > .post-author
        font-weight bold

    > .post-content
      //

      p
        collapsed-margins(1em)
        font-size font-size-base
        line-height line-height-tall

        > a
          text-decoration underline

      img
      iframe
        display block
        max-width 100%
        vertical-align bottom
        border 1px solid colors-gray-border
        margin 2em auto

      iframe
        box-shadow 4px 4px 4px colors-gray-background
        height 2150px !important
        padding 1px
        +below(400px)
          height 2000px !important
        +below(380px)
          height 1950px !important
        +below(340px)
          height 1700px !important

      h2
        collapsed-margins(4em)

      hr
        height 2px
        background-color colors-gray-border
        border none

Make sure links get underlined in bolded text on the blog

.BlogPost
  // Classes come through with Jekyll generated HTML
  // Not going to bother with correcting *that*
  // So for now, force things to look correct

  .post
    //

    > .post-header
      collapsed-margins(2em)

      > .post-category-title
        collapsed-margins(2em)

        > h1
          margin 0
          text-align center
          font-size font-size-h2
          font-weight normal

      > .post-author
      > .post-meta
        text-align center
        font-size font-size-base
        line-height line-height-base

      > .post-author
        font-weight bold

    > .post-content
      //

      p
        collapsed-margins(1em)
        font-size font-size-base
        line-height line-height-tall

        > a, > strong a
          text-decoration underline

      img
      iframe
        display block
        max-width 100%
        vertical-align bottom
        border 1px solid colors-gray-border
        margin 2em auto

      iframe
        box-shadow 4px 4px 4px colors-gray-background
        height 2150px !important
        padding 1px
        +below(400px)
          height 2000px !important
        +below(380px)
          height 1950px !important
        +below(340px)
          height 1700px !important

      h2
        collapsed-margins(4em)

      hr
        height 2px
        background-color colors-gray-border
        border none


/*
 * kernel.css utility classes.
*/

.ion-anchor {
	color: util.anchor-color;
	text-decoration: none;
}

.ion-circle {
	border-radius: 50%;
}

.ion-hr {
	background-color: util.hr-bg;
	border: 0;
	border-radius: 50px;
	height: 1px;
	margin-bottom: 25px;
	margin-top: 25px;
}

.ion-section {
	margin: $main-padding 0;
}

.ion-noshadow {
	box-shadow: none;
	text-shadow: none;
}

.ion-center {
	margin: auto;
}

.ion-vertical-center {
	position: relative;
	text-align: center;
	transform: translateY(-50%);
	top: 50%;
}

.ion-fixed-top {
	position: fixed;
	top: 0;
}

.ion-fixed-bottom {
	position: fixed;
	bottom: 0;
}

.ion-ul, .ion-ol {
	line-height: 1.8;
}

.ion-autowrap {
	overflow-wrap: break-word;
}

Fix ion-anchors not wrapping on overflow

/*
 * kernel.css utility classes.
*/

.ion-anchor {
	color: util.anchor-color;
	text-decoration: none;
	overflow-wrap: break-word;
}

.ion-circle {
	border-radius: 50%;
}

.ion-hr {
	background-color: util.hr-bg;
	border: 0;
	border-radius: 50px;
	height: 1px;
	margin-bottom: 25px;
	margin-top: 25px;
}

.ion-section {
	margin: $main-padding 0;
}

.ion-noshadow {
	box-shadow: none;
	text-shadow: none;
}

.ion-center {
	margin: auto;
}

.ion-vertical-center {
	position: relative;
	text-align: center;
	transform: translateY(-50%);
	top: 50%;
}

.ion-fixed-top {
	position: fixed;
	top: 0;
}

.ion-fixed-bottom {
	position: fixed;
	bottom: 0;
}

.ion-ul, .ion-ol {
	line-height: 1.8;
}

.ion-autowrap {
	overflow-wrap: break-word;
}


@import '../global'
@import '../reset'

@import '../page'

iframe
  width 100%
  height 100%

Add overflow hidden to make dinner page better

@import '../global'
@import '../reset'

@import '../page'

iframe
  width 100%
  height 100%

.pageContent
  overflow hidden


@import './common/variables.styl'

.react-codemirror2,
.CodeMirror
  height: 100% !important
  line-height: 1.2

.new-snippet .react-codemirror2,
.new-snippet .CodeMirror
  color: text-dark !important

.CodeMirror-gutter
  &.CodeMirror-linenumbers
    width: 39px

.CodeMirror-sizer
  margin-left: 39px
  padding-top: 5px

.CodeMirror-gutters
  border-right: none

.snippet .CodeMirror-line
  padding-left: 20px !important

.snippet .CodeMirror-cursor {
  display: none !important
}

Change line-height for all codemirror areas

@import './common/variables.styl'

.react-codemirror2,
.CodeMirror
  height: 100% !important
  line-height: 1.4

.new-snippet .react-codemirror2,
.new-snippet .CodeMirror
  color: text-dark !important

.CodeMirror-gutter
  &.CodeMirror-linenumbers
    width: 39px

.CodeMirror-sizer
  margin-left: 39px
  padding-top: 5px

.CodeMirror-gutters
  border-right: none

.snippet .CodeMirror-line
  padding-left: 20px !important

.snippet .CodeMirror-cursor {
  display: none !important
}


// libs

@require 'nib'
@require 'normalize.styl'

// global

@import 'stylus/vars'
@import 'stylus/mixins'
@import 'stylus/styles'
// templates

@import 'stylus/common/*'
@import 'directive/*'

@import 'site/*'
@import 'party/*'
@import 'volume/*'
@import 'slot/*'
@import 'asset/*'

// shame

@import 'stylus/shame'

Remove now-expired slot styl import

// libs

@require 'nib'
@require 'normalize.styl'

// global

@import 'stylus/vars'
@import 'stylus/mixins'
@import 'stylus/styles'
// templates

@import 'stylus/common/*'
@import 'directive/*'

@import 'site/*'
@import 'party/*'
@import 'volume/*'
@import 'asset/*'

// shame

@import 'stylus/shame'


if sidebar is bottom
  @import "sidebar-bottom"
else
  @import "sidebar-aside"

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 5px
  color: color-grey
  font-size: 0.85em
  &:before
    content: "("
  &:after
    content: ")"

.tagcloud
  a
    margin-right: 5px

Fix wrongly newlines after dashes.

if sidebar is bottom
  @import "sidebar-bottom"
else
  @import "sidebar-aside"

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 5px
  color: color-grey
  font-size: 0.85em
  &:before
    content: "("
  &:after
    content: ")"

.tagcloud
  a
    margin-right: 5px
    display: inline-block


/*  Syntax Quick Reference
    ----------------------
    center(max_width = 1410px, padding = 15px)
    column[col](ratios = 1, offset = false)
    span(ratio = 1, offset = false)
    shift(ratios = 0)
    unshift()
    bp(w = 705px, mobile_first = false[mf])
    endbp()
    stack(padding = 0, align = center[c, left, l, right, r])
    edit()
    cf()
*/

@import 'utilities'
@import 'reset'
@import 'grid'
@import 'typography'
@import 'palette'
@import 'shame'

/*  Content Priority Creation Scheme
    --------------------------------
    1. Grid Layout
    2. Dummy Content Dump
    3. JS Plugins
    4. Typography
    5. Colors
    6. UI
    7. Mobile - If mobile first, push to 1
    8. Real Content Dump
*/

Move palette to top of imports

/*  Syntax Quick Reference
    ----------------------
    center(max_width = 1410px, padding = 15px)
    column[col](ratios = 1, offset = false)
    span(ratio = 1, offset = false)
    shift(ratios = 0)
    unshift()
    bp(w = 705px, mobile_first = false[mf])
    endbp()
    stack(padding = 0, align = center[c, left, l, right, r])
    edit()
    cf()
*/

@import 'palette'
@import 'utilities'
@import 'reset'
@import 'grid'
@import 'typography'
@import 'shame'

/*  Content Priority Creation Scheme
    --------------------------------
    1. Grid Layout
    2. Dummy Content Dump
    3. JS Plugins
    4. Typography
    5. Colors
    6. UI
    7. Mobile - If mobile first, push to 1
    8. Real Content Dump
*/


form-width = 600px

#partner-application-page
  padding 20px 0

.partner-application-header
  text-align center
  max-width form-width
  margin 0 auto
  padding 0 5%
  > h1
    font-size 30px
    margin 10px 0 20px 0
    line-height 1.1

.pah-step
  color gray-darker-color

.partner-application-form
  max-width form-width
  margin 20px auto
  .stacked-form-cell
    margin 20px 0

.paf-checkbox-set
  margin 20px 10%

.pah-success
  max-width (form-width / 1.5)
  margin 20px auto
  text-align center
  > p
    text-align left
    block-margins(10px)

.pah-success-message
  color green-color
  > .icon-check
    font-size 0.75em
    margin-right 0.25em
    line-height 1

Change base font-size to 17px

form-width = 600px

#partner-application-page
  padding 20px 0
  font-size 17px

.partner-application-header
  text-align center
  max-width form-width
  margin 0 auto
  padding 0 5%
  > h1
    font-size 30px
    margin 10px 0 20px 0
    line-height 1.1

.pah-step
  color gray-darker-color

.partner-application-form
  max-width form-width
  margin 20px auto
  .stacked-form-cell
    margin 20px 0

.paf-checkbox-set
  margin 20px 10%

.pah-success
  max-width (form-width / 1.5)
  margin 20px auto
  text-align center
  > p
    text-align left
    block-margins(10px)

.pah-success-message
  color green-color
  > .icon-check
    font-size 0.75em
    margin-right 0.25em
    line-height 1


.Notifications
  max-height block_width
  overflow-y auto
  padding 1em 1.66em

.Notification
  collapsed-margins(1.25em)
  text-align left
  font-size font-size-xs
  line-height line-height-base

  a
    font-weight bold

  &__timestamp
    text-transform uppercase
    font-size font-size-xx
    letter-spacing 0.025em
    color colors-gray-light

  &--unread
    &
    .Notification__timestamp
      &
      & *
        color colors-state-alert !important

Bring in notifications side padding

.Notifications
  max-height block_width
  overflow-y auto
  padding 1em 1.33em

.Notification
  collapsed-margins(1.25em)
  text-align left
  font-size font-size-xs
  line-height line-height-base

  a
    font-weight bold

  &__timestamp
    text-transform uppercase
    font-size font-size-xx
    letter-spacing 0.025em
    color colors-gray-light

  &--unread
    &
    .Notification__timestamp
      &
      & *
        color colors-state-alert !important


/*
 * Copyright (C) 2012-2017  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/>.
 */

.audit-container {
    flex-grow: 1;
    flex-shrink:0;
    flex-basis:auto;
    display: flex;
    flex-direction: column;

    .audit-actions {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }

    .position-link {
        themed color link-color;
    }

    .position-link:hover {
        cursor:pointer;
        text-decoration:underline;
    }
}

Support theme on admin table

/*
 * Copyright (C) 2012-2017  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/>.
 */

.audit-container {
    flex-grow: 1;
    flex-shrink:0;
    flex-basis:auto;
    display: flex;
    flex-direction: column;

    .audit-actions {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }

    .position-link {
        themed color link-color;
    }

    .position-link:hover {
        cursor:pointer;
        text-decoration:underline;
    }

    .ReactTable, .ReactTable * {
        themed border-color shade5 !important;
    }

    .pagination-bottom .-pagination {
        .-btn {
            themed color fg;
            themed background card-background-color;
        }

        input, select {
            themed background input-bg;
        }
    }
}


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

Use google web font for all Vega text rendering (in SVG mode)

@import url('https://fonts.googleapis.com/css?family=Arimo');

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

g.mark-text text
    font-family: Arimo !important

#vis-element
    overflow hidden


*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		min-height: 100%
		display: flex
		justify-content: center
		align-items: center
		.app
			min-width: 970px
			height: 860px
			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
				position: relative
				.img-container
					width: 100%
					img
						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

Set app to full screen

*
	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
				position: relative
				.img-container
					width: 100%
					img
						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


*
	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

Add width to bottom container

*
	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


.expandablePanelSlider
  text-align: center
  position: relative
  border-top: 1px solid #ccc

.expandablePanelSlider button
  position: absolute
  top: -1em
  margin-left: -1em
  border-radius: 1em
  height: 2em
  width: 2em
  padding: 0.4em
  background-color: white
  border: 1px solid #ddd

.expandablePanelSlider:before
  display: block
  content: ""
  position: relative
  top: -1em
  height: 1em
  background-image: linear-gradient(0deg, #eee 0%, rgba(0,0,0,0) 100%)
  opacity: 1

.content
  overflow: hidden
  transition: max-height 1s

.expandable.expanded .content
  max-height: 1000em

.expandable.collapsed .content
  max-height: 4em

.expanded .expandablePanelSlider:before
  opacity: 0

Increase size of collapsed panel

.expandablePanelSlider
  text-align: center
  position: relative
  border-top: 1px solid #ccc

.expandablePanelSlider button
  position: absolute
  top: -1em
  margin-left: -1em
  border-radius: 1em
  height: 2em
  width: 2em
  padding: 0.4em
  background-color: white
  border: 1px solid #ddd

.expandablePanelSlider:before
  display: block
  content: ""
  position: relative
  top: -1em
  height: 1em
  background-image: linear-gradient(0deg, #eee 0%, rgba(0,0,0,0) 100%)
  opacity: 1

.content
  overflow: hidden
  transition: max-height 1s

.expandable.expanded .content
  max-height: 1000em

.expandable.collapsed .content
  max-height: 20em

.expanded .expandablePanelSlider:before
  opacity: 0


.c-home-intro
  min-height 100%
  padding-top rem(50px)
  padding-bottom rem(50px)
  margin-top rem(-50px)
  margin-bottom rem(-50px)
  background-repeat no-repeat
  background-position 70% 100%
  background-size: cover
  +media-query($screen, $bp--tablet--portrait)
    background-position 50% 30%

.c-home-intro__content
  col(12)

.c-home-intro__buttons-wrap
  display block
  +media-query($screen, $bp--tablet--portrait)
    margin-top rem(25px)
  +media-query($screen, $bp--tablet--landscape)
    margin-top rem(20px)
  +media-query($screen, $bp--desktop--medium)
    margin-top rem(40px)

Add margin to homepage cta buttons wrapper on mobile screen

.c-home-intro
  min-height 100%
  padding-top rem(50px)
  padding-bottom rem(50px)
  margin-top rem(-50px)
  margin-bottom rem(-50px)
  background-repeat no-repeat
  background-position 70% 100%
  background-size: cover
  +media-query($screen, $bp--tablet--portrait)
    background-position 50% 30%

.c-home-intro__content
  col(12)

.c-home-intro__buttons-wrap
  display block
  margin-bottom rem(35px)
  +media-query($screen, $bp--tablet--portrait)
    margin-top rem(25px)
    margin-bottom 0
  +media-query($screen, $bp--tablet--landscape)
    margin-top rem(20px)
  +media-query($screen, $bp--desktop--medium)
    margin-top rem(40px)


@import '../../stylus_lib/index.styl'
@import './overlay_controls'

.artwork-item-image-container
  margin-bottom 11px
  img
    vertical-align bottom

.artwork-item-image-link
  display inline-block
  overflow hidden
  position relative
  max-width 100%

.artwork-item-caption
  color dark-gray-text-color
  font-size 15px
  line-height 1.3
  text-align left
  a
    color dark-gray-text-color
    &.avant-garde-button-black
      color white
  p.artwork-item-overflow
    overflow ellipsis

.artwork-item-artist
  font-weight bold

.artwork-item-image
  background-color #f2f2f2

.artwork-item-auction-bid-status
  margin 20px 0 10px
  color black
  font-size 13px
  avant-garde()

.artwork-item-blurb
  color black
  font-size 17px
  margin-bottom 1em
  margin-top 1em
  text-align left

.artwork-item-sold
  background-color dark-gray-text-color
  color light-gray-border-color
  cursor default
  &:hover
    color dark-gray-text-color
    background-color light-gray-border-color

.artwork-item
  .avant-garde-button-black
    margin-right 1em
    margin-top 1em

Make width of "Bid" button the same as "More Info" button

@import '../../stylus_lib/index.styl'
@import './overlay_controls'

.artwork-item-image-container
  margin-bottom 11px
  img
    vertical-align bottom

.artwork-item-image-link
  display inline-block
  overflow hidden
  position relative
  max-width 100%

.artwork-item-caption
  color dark-gray-text-color
  font-size 15px
  line-height 1.3
  text-align left
  a
    color dark-gray-text-color
    &.avant-garde-button-black
      color white
    // Match width of 'Bid' button to be the same
    // as the 'More Info' button
    &.artwork-item-bid
      min-width 90px

  p.artwork-item-overflow
    overflow ellipsis

.artwork-item-artist
  font-weight bold

.artwork-item-image
  background-color #f2f2f2

.artwork-item-auction-bid-status
  margin 20px 0 10px
  color black
  font-size 13px
  avant-garde()

.artwork-item-blurb
  color black
  font-size 17px
  margin-bottom 1em
  margin-top 1em
  text-align left

.artwork-item-sold
  background-color dark-gray-text-color
  color light-gray-border-color
  cursor default
  &:hover
    color dark-gray-text-color
    background-color light-gray-border-color

.artwork-item
  .avant-garde-button-black
    margin-right 1em
    margin-top 1em


// Basic style for embedded videos in markdown
.embed-responsive

  iframe
    max-height: 390px
    max-width: 600px
    width: 100%

Set a max-width for video Set a max width for embedded video tags in Markdown sections.

// Basic style for embedded videos in markdown
.embed-responsive

  iframe
    max-height: 390px
    max-width: 600px
    width: 100%

.markdown

  video
    max-width: 100%


#partner
  .partner-header
    padding-top 30px
    margin-bottom 40px
    .partner-brand-container
      margin-bottom 40px
    .partner-info
    .partner-icon
    .partner-actions
    .partner-nav
      display inline-block
      vertical-align middle

    .partner-info
      width calc(100% \- 170px)
      margin-right 30px
    .partner-name
      font-size 37px
      line-height 1.5
    .partner-locations
      font-size 15px
      color gray-darker-color
      line-height 1.5
      min-height 1.5em
    .partner-icon
      text-align center
    .profile-badge-icon
      display inline-block
      width 140px
      height 140px
      line-height @height
      vertical-align top
      img
        max-width 100%
        max-height 100%

    .partner-actions
      width 300px
      margin-right 30px
    .follow-button
      margin-right 15px
    .partner-followers
      display inline-block
      color gray-darker-color
    .partner-nav
      width calc(100% \- 330px)
      text-align right

Fix the vertical alignment of the partner logo if it is not square.

#partner
  .partner-header
    padding-top 30px
    margin-bottom 40px
    .partner-brand-container
      margin-bottom 40px
    .partner-info
    .partner-icon
    .partner-actions
    .partner-nav
      display inline-block
      vertical-align middle

    .partner-info
      width calc(100% \- 170px)
      margin-right 30px
    .partner-name
      font-size 37px
      line-height 1.5
    .partner-locations
      font-size 15px
      color gray-darker-color
      line-height 1.5
      min-height 1.5em
    .partner-icon
      text-align center
    .profile-badge-icon
      display inline-block
      width 140px
      height 140px
      line-height @height
      vertical-align middle
      img
        max-width 100%
        max-height 100%
        display inline-block
        vertical-align middle

    .partner-actions
      width 300px
      margin-right 30px
    .follow-button
      margin-right 15px
    .partner-followers
      display inline-block
      color gray-darker-color
    .partner-nav
      width calc(100% \- 330px)
      text-align right


page-text()
  font-family 'Roboto Slab', 'Georgia', 'Times New Roman', serif

  text-rendering optimizeLegibility
  font-kerning normal

  // NOTE: currently these only do anything in Chrome.
  font-feature-settings kern
  -webkit-font-feature-settings "kern" 1
  -moz-font-feature-settings "kern"

  font-size 18px
  line-height 1.825em

  overflow-x visible

  p
    text-indent 36px
    margin 0

Use Georgia in the outline.

page-text()
  font-family 'Georgia', 'Times New Roman', serif

  text-rendering optimizeLegibility
  font-kerning normal

  // NOTE: currently these only do anything in Chrome.
  font-feature-settings kern
  -webkit-font-feature-settings "kern" 1
  -moz-font-feature-settings "kern"

  font-size 18px
  line-height 1.5em

  overflow-x visible

  p
    text-indent 36px
    margin 0


.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
		.country
			margin-bottom: 10px

	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh

Add media screen about font size in current weather

.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		display: flex
		flex-direction: column
		align-items: center
		justify-content: center
		background: rgba(160, 158, 151, 0.5)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 400px
		height: 400px
		font-size: 1.8rem
		font-family: cursive
		color: #ccc
		margin-bottom: 20px
		.city-name
			margin-bottom: 8px
			font-size: 1.6rem
			text-align: center
		.country
			margin-bottom: 10px

	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

	@media (max-height: 500px)
		.current-weather
			font-size: 1.2rem
			margin-bottom: 15px
			.city-name
				font-size: 1.4rem

	@media (max-width: 540px)
		.current-weather
			width: 45vh
			height: 45vh

	@media (max-height: 850px)
		.current-weather
			width: 45vh
			height: 45vh


.worker-list
  list-style-type none
  margin 0

  li
    width 80%
    padding 1em
    margin 0.5em auto
    display inline-block
    border link-color 1px solid

  h3
    margin 0

  .versions
    margin 0

    dt
      font-weight 400
      display inline-block
      margin .4em

      &:first-child
        margin-left 0

    dd
      display inline-block
      margin 0
      margin-right .8em

@media screen and (min-width 900px)
  .worker-list
    li
      max-width 46%

      &:nth-child(2n)
        float right
        margin-right 0

      &:nth-child(n)
        margin-left 0

Fix padding in worker list

.worker-list
  list-style-type none
  margin 0
  padding 0

  li
    width 80%
    padding 1em
    margin 0.5em auto
    display inline-block
    border link-color 1px solid

  h3
    margin 0

  .versions
    margin 0
    padding 0

    dt
      font-weight 400
      display inline-block
      margin .4em

      &:first-child
        margin-left 0

    dd
      display inline-block
      margin 0
      margin-right .8em

@media screen and (min-width 900px)
  .worker-list
    li
      max-width 46%

      &:nth-child(2n)
        float right
        margin-right 0

      &:nth-child(n)
        margin-left 0


.ion-grid {
	display: flex;

	for num in (1...11) {
		.ion-col-{num} {
			flex: num;
			margin: $main-padding;
			padding: $main-padding 0 $main-padding 0;
		}
	}
}

.ion-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: container.width;
	padding-left: $main-padding;
	padding-right: $main-padding;
}

/* For small screen sizes */
@media (max-width: container.width) {
	.ion-grid {
		flex-direction: column;
	}

	.ion-container {
		width: 100%;
	}

	for num in (1...11) {
		.ion-grid .ion-col-{num} {
			margin: $main-padding 0;
		}
	}
}

Use width-sm variable for @media rule

.ion-grid {
	display: flex;

	for num in (1...11) {
		.ion-col-{num} {
			flex: num;
			margin: $main-padding;
			padding: $main-padding 0 $main-padding 0;
		}
	}
}

.ion-container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: container.width;
	padding-left: $main-padding;
	padding-right: $main-padding;
}

/* For small screen sizes */
@media (max-width: container.width-sm) {
	.ion-grid {
		flex-direction: column;
	}

	.ion-container {
		width: 100%;
	}

	for num in (1...11) {
		.ion-grid .ion-col-{num} {
			margin: $main-padding 0;
		}
	}
}


/*
  new email window
*/
#email-compose

    &.enable
        display block

    &.col-md-6
    &.col-md-12
        transition width 0.2s ease-out

    h3
        color #444
        margin-top 0

    a.close-email
        margin-right 1em

    a.expand
        float right
        font-size 2em

  .editor,
  .rt-editor
    border 1px solid #444
    min-height 16em
    height auto
    width 100%
    text-align left
    color black

  .attachements
      margin 1em 0

  .input-group.contact-group
      padding 0 15px // pixels because we override Bootstrap
  .compose-toggle
    float right
    a
        padding 0 1em

  .compose-from
    line-height 2em
    color darkcolor

  .compose-cc,
  .compose-bcc
    display none

  .compose-cc.shown,
  .compose-bcc.shown
    display inherit

Fix display of account selection in compose

/*
  new email window
*/
#email-compose

    &.enable
        display block

    &.col-md-6
    &.col-md-12
        transition width 0.2s ease-out

    h3
        color #444
        margin-top 0

    a.close-email
        margin-right 1em

    a.expand
        float right
        font-size 2em

  .editor,
  .rt-editor
    border 1px solid #444
    min-height 16em
    height auto
    width 100%
    text-align left
    color black

  .attachements
      margin 1em 0

  .input-group.contact-group
      padding 0 15px // pixels because we override Bootstrap
  .compose-toggle
    float right
    a
        padding 0 1em

  .compose-input
      position relative

  .compose-from
    line-height 2em
    color darkcolor

  .compose-cc,
  .compose-bcc
    display none

  .compose-cc.shown,
  .compose-bcc.shown
    display inherit


// sortable effect
.table-sortable {
    table {
        th {
            white-space: nowrap;
        }

        .column-sort {
            color: #222;

            &:hover,
            &:focus {
                color: #222;
                text-decoration: none;
            }

            > .overflow-ellipsis {
                vertical-align: middle;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: calc(100% - 16px); // 16px is icon width
            }

            > i {
                vertical-align: middle;
            }
        }

        .column-sort-asc,
        .column-sort-desc {
            vertical-align: top;
            margin-top: 1px;
            display: inline-block;
            width: 16px;
            height: 16px;
        }
        .column-sort-asc {
            background-image: url("./icon-thSortAscending.svg");
        }
        .column-sort-desc {
            background-image: url("./icon-thSortDescending.svg");
        }
    }
}

Adjust hover style of sorting header.

// sortable effect
.table-sortable {
    table {
        > thead > tr > th {
            white-space: nowrap;
            padding: 0;

            > *:first-child {
                padding: 8px 12px;
            }
        }

        .column-sort {
            color: #222;

            &:hover,
            &:focus {
                color: #222;
                text-decoration: none;
            }

            > .overflow-ellipsis {
                vertical-align: middle;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: calc(100% - 16px); // 16px is icon width
            }

            > i {
                vertical-align: middle;
            }
        }

        .column-sort-asc,
        .column-sort-desc {
            vertical-align: top;
            margin-top: 1px;
            display: inline-block;
            width: 16px;
            height: 16px;
        }
        .column-sort-asc {
            background-image: url("./icon-thSortAscending.svg");
        }
        .column-sort-desc {
            background-image: url("./icon-thSortDescending.svg");
        }
    }
}


// Browser vendor prefixes library
@import 'nib'

@import '_config'

h1, h2, h3, h4
	title-font()

.tooltip::after
	title-font()
	shadow-elevation-16dp()
	round-corners()
	z-index: 1
	content: attr(data-tooltip)
	position: absolute
	top: 100%
	left: -2em
	white-space: nowrap
	padding: .5em
	color: white
	background-color: rgb(92, 97, 108)
	font-size: .8em
	transform: translate3d(0, -20%, 0);
	opacity: 0
	pointer-events: none
	transition: opacity transition-timing transition-function,
	            transform transition-timing transition-function

.tooltip:hover::after
	transform: translate3d(0, 0, 0);
	opacity: 1

main > .search
	width: 20em
	position: relative
	margin: 1.5em auto 0 auto

main > .search label
	content: "🔎"
	position: absolute
	left: .3em
	top: .3em
	font-size: inherit

main > .search input
	width: 100%
	padding: .3em
	padding-left: 2em
	display: block

Fix toolips in user skill edit in Chrome

// Browser vendor prefixes library
@import 'nib'

@import '_config'

h1, h2, h3, h4
	title-font()

.tooltip
	position: relative

.tooltip::after
	title-font()
	shadow-elevation-16dp()
	round-corners()
	z-index: 1
	content: attr(data-tooltip)
	position: absolute
	top: 100%
	left: -2em
	white-space: nowrap
	padding: .5em
	color: white
	background-color: rgb(92, 97, 108)
	font-size: .8em
	transform: translate3d(0, -20%, 0);
	opacity: 0
	pointer-events: none
	transition: opacity transition-timing transition-function,
	            transform transition-timing transition-function

.tooltip:hover::after
	transform: translate3d(0, 0, 0);
	opacity: 1

main > .search
	width: 20em
	position: relative
	margin: 1.5em auto 0 auto

main > .search label
	content: "🔎"
	position: absolute
	left: .3em
	top: .3em
	font-size: inherit

main > .search input
	width: 100%
	padding: .3em
	padding-left: 2em
	display: block


.s-content
  padding-top 70px

  display flex
  justify-content center
  height 100vh
  align-items flex-start
  .login &
    align-items center

  .container
    width 100%

Align register form content to center of the viewport

.s-content
  padding-top 70px

  display flex
  justify-content center
  height 100vh
  align-items flex-start

  .login &
  .register &
    align-items center

  .container
    width 100%


@require 'common.import'

#create-project-pad
  pad-base()

  padding 20px
  margin 25px
  margin-bottom 0

  &>:first-child
    margin-top 0

#create-buttons
  margin-top 20px

Define widths of input fields

@require 'common.import'

#create-project-pad
  pad-base()

  padding 20px
  margin 25px
  margin-bottom 0

  &>:first-child
    margin-top 0

  input, select
    box-sizing border-box
    width 300px

#create-buttons
  margin-top 20px


.survey-page #main
  input[type=text],
  input[type='email'],
  input[type='password'],
  textarea,
  select,
  .expandingArea > pre
    background-color $bg_light_gray
    color $text_dk
    font-size 17px
    &:focus
      border-color $contextual

Remove expandingArea from survey css

.survey-page #main
  input[type=text],
  input[type='email'],
  input[type='password'],
  textarea,
  select
    background-color $bg_light_gray
    color $text_dk
    font-size 17px
    &:focus
      border-color $contextual


@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        background-color grey-10
        margin   0 1em 1em 0

        a
          vertical-align middle

    .pho-photo-item
        height       em(240px)
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index  2
        opacity  0
        height   2em
        width    2em
        padding  1em
        cursor   pointer

        &[data-input=checkbox] label::before
            box-shadow 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 1.5em rgba(255,255,255,.8)

        &[data-input=checkbox] input[type=checkbox]:checked + label::after
            background-size     1.5em
            background-position center center

        &[data-input=checkbox] input[type=checkbox]:checked + label::before
            box-shadow 0 0 0 3px dodger-blue, inset 0 0 0 1.5em dodger-blue

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width  100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1

Add background color on checked checbox to avoid white offset easily spotted with a microscope :microscope:

@require 'cozy-ui'

:local

    .pho-section
        left-spaced(32px)

    .pho-photo
        position relative
        display  inline-block
        background-color grey-10
        margin   0 1em 1em 0

        a
          vertical-align middle

    .pho-photo-item
        height       em(240px)
        transition   transform .2s ease

    .pho-photo-select
        position absolute
        z-index  2
        opacity  0
        height   2em
        width    2em
        padding  1em
        cursor   pointer

        &[data-input=checkbox] label::before
            box-shadow 0 0 0 3px rgba(0,0,0,.3), inset 0 0 0 1.5em rgba(255,255,255,.8)

        &[data-input=checkbox] input[type=checkbox]:checked + label::after
            background-size     1.5em
            background-position center center

        &[data-input=checkbox] input[type=checkbox]:checked + label::before
            background-color dodger-blue
            box-shadow       0 0 0 3px dodger-blue, inset 0 0 0 1.5em dodger-blue

    .pho-photo--selected
        .pho-photo-item
            transform:scale(0.9);

    .pho-section--has-selection
        .pho-photo-select
            width  100%
            height 100%

    .pho-photo:hover
        .pho-photo-select
            opacity 1

    .pho-list-selection
        .pho-photo-select
            opacity 1


body
  margin 0
  padding 0
  font-family font-base, sans-serif
  font-weight font-base-weight
  font-size font-size-medium

h1
  font-weight font-base-weight

a
  color color-secondary
  text-decoration none
  &:hover
    text-decoration underline

p
  margin-top -0.3rem

.spinner
  border 2px solid lightgrey
  border-top: 2px solid dimgrey
  border-radius 50%
  width 4rem
  height 4rem
  animation spin 1.1s cubic-bezier(0.7, 0.2, 0.3, 0.7) infinite

@keyframes spin
  0% {
    transform: rotate(40deg)
  }

  100% {
    transform: rotate(400deg)
  }

Make placeholder go dim when focusing search input.

body
  margin 0
  padding 0
  font-family font-base, sans-serif
  font-weight font-base-weight
  font-size font-size-medium

h1
  font-weight font-base-weight

a
  color color-secondary
  text-decoration none
  &:hover
    text-decoration underline

p
  margin-top -0.3rem

.spinner
  border 2px solid lightgrey
  border-top: 2px solid dimgrey
  border-radius 50%
  width 4rem
  height 4rem
  animation spin 1.1s cubic-bezier(0.7, 0.2, 0.3, 0.7) infinite

@keyframes spin
  0% {
    transform: rotate(40deg)
  }

  100% {
    transform: rotate(400deg)
  }

[placeholder]:focus::-webkit-input-placeholder
  color lightgrey


@require '~kolibri.styles.definitions'

  li
    display: inline-block
    text-align: center

  .tab
    display: inline-block
    margin: 0
    padding-top: 0
    padding-bottom: 0
    padding-right: 12px
    padding-left: 12px
    max-width: 264px
    min-width: 72px
    border: none
    border-radius: 0
    font-size: 14px
    text-decoration: none
    color: $core-text-annotation
    &:hover, &:focus
      background-color: $core-action-light
      color: $core-action-normal

  .router-link-active, .tab-selected
    border-bottom-style: solid
    border-bottom-width: 2px
    border-bottom-color: $core-action-normal
    color: $core-action-normal

  .icon
    font-size: 24px

  .tab-icon
    padding-top: 11px
    padding-bottom: 11px

  .tab-title
    font-weight: bold
    text-transform: uppercase
    padding-top: 15px
    padding-bottom: 15px
    overflow-x: hidden
    text-overflow: ellipsis

  .tab-has-icon-and-title

    .tab-icon
      padding-top: 10px
      padding-bottom: 10px

    .tab-title
      padding-top: 0
      padding-bottom: 10px

Remove extra outline for a.tab elements

@require '~kolibri.styles.definitions'

  li
    display: inline-block
    text-align: center

  .tab
    display: inline-block
    margin: 0
    padding-top: 0
    padding-bottom: 0
    padding-right: 12px
    padding-left: 12px
    max-width: 264px
    min-width: 72px
    border: none
    border-radius: 0
    font-size: 14px
    text-decoration: none
    color: $core-text-annotation
    &:hover, &:focus
      background-color: $core-action-light
      color: $core-action-normal
      outline: none

  .router-link-active, .tab-selected
    border-bottom-style: solid
    border-bottom-width: 2px
    border-bottom-color: $core-action-normal
    color: $core-action-normal

  .icon
    font-size: 24px

  .tab-icon
    padding-top: 11px
    padding-bottom: 11px

  .tab-title
    font-weight: bold
    text-transform: uppercase
    padding-top: 15px
    padding-bottom: 15px
    overflow-x: hidden
    text-overflow: ellipsis

  .tab-has-icon-and-title

    .tab-icon
      padding-top: 10px
      padding-bottom: 10px

    .tab-title
      padding-top: 0
      padding-bottom: 10px


#m-data-panel
  text-align center

  .source-title
    font-weight bold
    text-align left
    margin 1px
    padding 2px
    background-color #DFF6E8
    border-style none
    border-width 0px
    i
    .icon-folder
      float left
    .icon-folder-open
      float left

  .source-title:hover
    background-color #D3E9DC
    cursor: pointer

  .dataset
    padding-left 0px
    text-align left
    border 0
    margin 2px
    padding 2px

    i
      color #444
    .icon-disabled
      color #f0f0f0
    .icon-enabled:hover
      color #66a
      cursor pointer
    .icon-info-circled
      float right
    .icon-right-circled
      float left
    .icon-trash
      float right
    .icon-globe
      float left
    .icon-cog
      float right
    .icon-table
      float right

      &.m-geo-render-error
        color #ff751a

        &:hover
            color #d35400
            cursor pointer

Add styling for the category-title elements

#m-data-panel
  text-align center

  .source-title
    font-weight bold
    text-align left
    margin 1px
    padding 2px
    background-color #DFF6E8
    border-style none
    border-width 0px
    i
    .icon-folder
      float left
    .icon-folder-open
      float left

  .source-title:hover
    background-color #D3E9DC
    cursor: pointer

  .category-title
    font-weight bold
    text-align left
    margin 1px
    padding 2px
    background-color #FFBB92
    border-style none
    border-width 0px
    i
    .icon-folder
      float left
    .icon-folder-open
      float left

  .category-title:hover
    background-color #FC9E67
    cursor: pointer

  .dataset
    padding-left 0px
    text-align left
    border 0
    margin 2px
    padding 2px
    background-color #FFFFFF

    i
      color #444
    .icon-disabled
      color #f0f0f0
    .icon-enabled:hover
      color #66a
      cursor pointer
    .icon-info-circled
      float right
    .icon-right-circled
      float left
    .icon-trash
      float right
    .icon-globe
      float left
    .icon-cog
      float right
    .icon-table
      float right

      &.m-geo-render-error
        color #ff751a

        &:hover
            color #d35400
            cursor pointer


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

@import "./layout"
@import "./classifier"

Add top bar and dialog styles

@import "../node_modules/nib"
@import "../node_modules/zooniverse/src/css/top-bar"
@import "../node_modules/zooniverse/src/css/dialog"
@import "./common"

@import "./layout"
@import "./classifier"


// nib is a powerful lib for stylus that provides cross-browser css3 mixins.
// No more vendor prefixes. http://visionmedia.github.com/nib/
@import 'nib'

// Apply a natural box layout model to all elements.
// http://paulirish.com/2012/box-sizing-border-box-ftw/

*
  box-sizing: border-box

body
  //padding-top 40px
  padding-bottom 40px
  // background-color #eee

#content
  margin-top : 60px

.form-signin
  max-width 330px
  padding 15px
  margin 0 auto
  .checkbox
    font-weight normal
  label
    font-size 16px
    font-weight normal
  .form-control
    position relative
    font-size 16px
    height auto
    padding 10px
    -webkit-box-sizing border-box
    -moz-box-sizing border-box
    box-sizing border-box
    &:focus
      z-index 2
  input[type="text"]
    margin-bottom -1px
    border-bottom-left-radius 0
    border-bottom-right-radius 0
  input[type="password"]
    margin-bottom 10px
    border-top-left-radius 0
    border-top-right-radius 0

.form-signin .form-signin-heading,
.form-signin .checkbox
  margin-bottom 10px

Change the pixel offset for fixed navbar as said in bootstrap doc.

// nib is a powerful lib for stylus that provides cross-browser css3 mixins.
// No more vendor prefixes. http://visionmedia.github.com/nib/
@import 'nib'

// Apply a natural box layout model to all elements.
// http://paulirish.com/2012/box-sizing-border-box-ftw/

*
  box-sizing: border-box

body
  //In order to not be hidden by the fixed bootstrap
  padding-top 70px

#content
  margin-top : 60px

.form-signin
  max-width 330px
  padding 15px
  margin 0 auto
  .checkbox
    font-weight normal
  label
    font-size 16px
    font-weight normal
  .form-control
    position relative
    font-size 16px
    height auto
    padding 10px
    -webkit-box-sizing border-box
    -moz-box-sizing border-box
    box-sizing border-box
    &:focus
      z-index 2
  input[type="text"]
    margin-bottom -1px
    border-bottom-left-radius 0
    border-bottom-right-radius 0
  input[type="password"]
    margin-bottom 10px
    border-top-left-radius 0
    border-top-right-radius 0

.form-signin .form-signin-heading,
.form-signin .checkbox
  margin-bottom 10px


.payment-form

	.user-avatar
		width: $input-height-base
		float: left

	.user-display-name
		margin-left: $input-height-base + $grid-gutter-width
		line-height: $input-height-base

	&-amount-input
		position: relative
		display: inline-block

		input
			display: inline-block
			width: 120px
			margin-right: 10px
			padding-left: 25px

		&-currency
			position: absolute
			content: '$'
			top: 6px
			left: 10px
			color: $gray-light
			z-index: 2

	.control-label
		float: left
		width: $thumbnail-width
		text-align: right
		line-height: $input-height-base

	.form-group
		clear: left

	.form-group-control
		@media $media-sm-up
			margin-left: $thumbnail-width + $grid-gutter-width

	.form-errors
		@media $media-sm-up
			margin-left: $thumbnail-width + $grid-gutter-width

	.payment-methods
		text-align: center

		@media $media-sm-up
			text-align: left
			margin-left: $thumbnail-width + $grid-gutter-width

Fix payment form on small sizes.

.payment-form

	.user-avatar
		width: $input-height-base
		float: left

	.user-display-name
		margin-left: $input-height-base + $grid-gutter-width
		line-height: $input-height-base

	&-amount-input
		position: relative
		display: inline-block

		input
			display: inline-block
			width: 120px
			margin-right: 10px
			padding-left: 25px

		&-currency
			position: absolute
			content: '$'
			top: 6px
			left: 10px
			color: $gray-light
			z-index: 2

	.control-label
		float: left
		width: $thumbnail-width
		text-align: right
		line-height: $input-height-base

	.form-group
		clear: left

	.form-group-control
		margin-left: $thumbnail-width + $grid-gutter-width

	.form-errors
		margin-left: $thumbnail-width + $grid-gutter-width

	.payment-methods
		text-align: left
		margin-left: $thumbnail-width + $grid-gutter-width


section input[type="search"][required]
    font-size 1.75em
    height auto
    padding .5rem
    margin-bottom 1rem
    line-height 1.5em

input[type="search"]
    height 1.75rem
    border 0
    font-family inherit
    font-size 1.17em
    padding-left .52rem
    margin 0
    color inherit
    opacity .5
    width 50%
    background rgba(0, 0, 0, .1)
    margin-bottom 4px
    width 100%
    font-weight bold

    &::-webkit-search-cancel-button:after
        line-height 1.8rem
        font-weight normal

    &:focus
        background rgba(0, 0, 0, .05)
        opacity 1
        outline none

Make sure search input × button has enough padding when the search input is focused

section input[type="search"][required]
    font-size 1.75em
    height auto
    padding .5rem
    margin-bottom 1rem
    line-height 1.5em

    &:focus
        padding-right: 2.5rem

input[type="search"]
    height 1.75rem
    border 0
    font-family inherit
    font-size 1.17em
    padding-left .52rem
    margin 0
    color inherit
    opacity .5
    width 50%
    background rgba(0, 0, 0, .1)
    margin-bottom 4px
    width 100%
    font-weight bold

    &::-webkit-search-cancel-button:after
        line-height 1.8rem
        font-weight normal

    &:focus
        background rgba(0, 0, 0, .05)
        opacity 1
        outline none


.LandingAbout__section {
  padding: grid(4);
}

@media screen and (min-width: 700px) {
  .LandingAbout__section {
    display: flex;
  }

  .LandingAbout__section:nth-child(even) .LandingAbout__imageContainer {
    order: 10;
  }

  .LandingAbout__imageContainer,
  .LandingAbout__text {
    padding: grid(5);
    flex:1;
  }
}

.LandingAbout__image {
  width: 100%;
}

.LandingAbout__text {
  flex: 1;
}

.LandingAbout__headline {
  Text__headerScale(3);
  margin-top: grid(2);
  margin-bottom: grid(4);
  font-family: $Text__monospacedFont;
  font-weight: 800;
  color: #792359;
  line-height: 1.4em;
}

@media screen and (max-width: 900px) {
  .LandingAbout__headline {
    Text__headerScale(2);
  }
}

Add more margin above headers

.LandingAbout__section {
  padding: grid(4);
}

@media screen and (min-width: 700px) {
  .LandingAbout__section {
    display: flex;
  }

  .LandingAbout__section:nth-child(even) .LandingAbout__imageContainer {
    order: 10;
  }

  .LandingAbout__imageContainer,
  .LandingAbout__text {
    padding: grid(5);
    flex:1;
  }
}

.LandingAbout__image {
  width: 100%;
}

.LandingAbout__text {
  flex: 1;
}

.LandingAbout__headline {
  Text__headerScale(3);
  margin-top: grid(3);
  margin-bottom: grid(4);
  font-family: $Text__monospacedFont;
  font-weight: 800;
  color: #792359;
  line-height: 1.4em;
}

@media screen and (max-width: 900px) {
  .LandingAbout__headline {
    Text__headerScale(2);
  }
}


.overview
  .primary
    +above(desktop)
      col(0.674, gutter: 1.8)
  .sidebar
    input
      width 100%
    +above(desktop)
      col(1/3)
  .section-header
    display flex
    margin-bottom 8px
    h3
      margin-right 23%

    .controls
      position relative
      flex 1 0 auto

.milestones
  .module__data
    & > p
      color bayoux
      margin-bottom 8px
    hr
      margin 16px 0 8px 0
    &.completed
      opacity 0.5
  .markdown
    color body-color
  .section-header:last-child
    margin-bottom 0
    hr
      display none

Use px margin now that parent is flex

.overview
  .primary
    +above(desktop)
      col(0.674, gutter: 1.8)
  .sidebar
    input
      width 100%
    +above(desktop)
      col(1/3)
  .section-header
    display flex
    margin-bottom 8px
    h3
      margin-right 20px

    .controls
      position relative
      flex 1 0 auto

.milestones
  .module__data
    & > p
      color bayoux
      margin-bottom 8px
    hr
      margin 16px 0 8px 0
    &.completed
      opacity 0.5
  .markdown
    color body-color
  .section-header:last-child
    margin-bottom 0
    hr
      display none


.playground-item {
	margin-right: 1.05rem;
	float: left;
	width: 45%;
	margin-top: 2rem;
	transform(scale(0));

	&:nth-child(2n+2){
		margin-right:0;
	}

	h3 {
		color: #009b3a;
		margin-bottom: 0;
	}

	.credits {
		margin-bottom: 1rem;
	}

	.image-box {
		float: left;
		width: 35%;
		margin-right: 1rem;
		transition(all ease-out .5s);

		&:hover {
			transform(scale(0.95));
		}
	}

	figcaption {
		overflow: hidden;
		float: none;
	}

	a:hover {
		h3, h6 {
			box-shadow: 0 3px 0 $green;
		}
	}
}

for number in (1..12)
	.playground-item:nth-child({number})
		animation(scaleIn 1s cubic-bezier(0.42, 0, 0.46, 1.28) (0.2 * number)s)
		animation-fill-mode(forwards);

Remove float in box when's nth-child(2n+1)

.playground-item:nth-child(2n+1) {
    clear: both;
}

.playground-item {
	margin-right: 1.05rem;
	float: left;
	width: 45%;
	margin-top: 2rem;
	transform(scale(0));

	&:nth-child(2n+2){
		margin-right:0;
	}

	h3 {
		color: #009b3a;
		margin-bottom: 0;
	}

	.credits {
		margin-bottom: 1rem;
	}

	.image-box {
		float: left;
		width: 35%;
		margin-right: 1rem;
		transition(all ease-out .5s);

		&:hover {
			transform(scale(0.95));
		}
	}

	figcaption {
		overflow: hidden;
		float: none;
	}

	a:hover {
		h3, h6 {
			box-shadow: 0 3px 0 $green;
		}
	}
}

for number in (1..12)
	.playground-item:nth-child({number})
		animation(scaleIn 1s cubic-bezier(0.42, 0, 0.46, 1.28) (0.2 * number)s)
		animation-fill-mode(forwards);


// @stylint off

// Normalize CSS
@import url("~normalize.css/normalize.css");

// Bootstrap
@import url("~bootstrap/dist/css/bootstrap.css");

// rc-slider
@import url("~rc-slider/assets/index.css");

// react-select
@import url("~react-select/dist/react-select.css");

// @stylint on

// react-virtualized
@import "react-virtualized";

// font-awesome
@import "font-awesome";

// rc-switch
@import "rc-switch";

Set default font size to 14px for font awesome icons

// @stylint off

// Normalize CSS
@import url("~normalize.css/normalize.css");

// Bootstrap
@import url("~bootstrap/dist/css/bootstrap.css");

// rc-slider
@import url("~rc-slider/assets/index.css");

// react-select
@import url("~react-select/dist/react-select.css");

// @stylint on

// react-virtualized
@import "react-virtualized";

// font-awesome
@import "font-awesome";

// rc-switch
@import "rc-switch";

// font-awesome
.fa {
    font-size: 14px; // Defaults to 14px
}


@require '~styles/variables'
@require '~styles-lib/mixins'

$game-list-item-thumb-width = 145px

.game-list-item
	display: flex
	margin-bottom: $line-height-computed

.-thumb
	display: block
	flex: none
	width: 50%
	min-width: 145px
	max-width: 200px
	margin-right: 10px

.-meta
	flex: auto

.-spacing
	display: block
	margin-top: 3px
	margin-bottom: 3px

.-title
	font-weight: bold

.-dev
	text-overflow()
	font-size: $font-size-small

.-followers
	text-overflow()
	font-size: $font-size-small

Allow the thumbnail to get smaller in game-list component.

@require '~styles/variables'
@require '~styles-lib/mixins'

$game-list-item-thumb-width = 145px

.game-list-item
	display: flex
	margin-bottom: $line-height-computed

.-thumb
	display: block
	flex: none
	width: 45%
	max-width: 200px
	margin-right: 10px

.-meta
	flex: auto

.-spacing
	display: block
	margin-top: 3px
	margin-bottom: 3px

.-title
	font-weight: bold

.-dev
	text-overflow()
	font-size: $font-size-small

.-followers
	text-overflow()
	font-size: $font-size-small