input.error,
.textarea.error {
  border-color: #B5313A;
}

[data-error] {
  color: #B5313A;
}

.ui-no-events {
  pointer-events: none;
}

.ui-no-scroll {
  overflow: hidden;
}

.ui-avatar {
  border-radius: 50%;
  display: inline-block;
  height: 32px;
  margin-right: 5px;
  width: 32px;

  &.sm {
    height: 22px;
    width: 22px;
  }
}

.ui-modal-alert {
  background: #F5F5F5;
  border-radius: 0 0 3px 3px;
  display: none;
  left: 50%;
  margin-left: -142px;
  text-align: center;
  top: 0;
  padding: 10px;
  position: absolute;
  width: 285px;
  z-index: 1;
}

Add loading image to avatars while image loads.

input.error,
.textarea.error {
  border-color: #B5313A;
}

[data-error] {
  color: #B5313A;
}

.ui-no-events {
  pointer-events: none;
}

.ui-no-scroll {
  overflow: hidden;
}

.ui-avatar {
  background: url('../images/loading-item.gif') no-repeat center center #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  height: 32px;
  margin-right: 5px;
  width: 32px;

  &.sm {
    height: 22px;
    width: 22px;
  }
}

.ui-modal-alert {
  background: #F5F5F5;
  border-radius: 0 0 3px 3px;
  display: none;
  left: 50%;
  margin-left: -142px;
  text-align: center;
  top: 0;
  padding: 10px;
  position: absolute;
  width: 285px;
  z-index: 1;
}


.fui-badge
	display: inline-block
	box-sizing: border-box
	background: $badgeBackground

	border-radius: $widgetBorderRadius * 2

	padding: 2px 8px
	min-width: 26px

	color: $baseFontColor
	white-space: nowrap // Numbers shouldn't wrap
	font-weight: bold
	font-size: $baseSize - 4
	text-align: center

Fix badge width on IE

.fui-badge
	display: inline-block
	box-sizing: border-box
	background: $badgeBackground

	border-radius: $widgetBorderRadius * 2

	padding: 2px 8px

	color: $baseFontColor
	white-space: nowrap // Numbers shouldn't wrap
	font-weight: bold
	font-size: $baseSize - 4
	text-align: center


.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%
        margin 4em auto
        vertical-align bottom
        border 1px solid colors-gray-border

Add hr and iframe shadow

.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%
        margin 4em auto
        vertical-align bottom
        border 1px solid colors-gray-border

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

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


.show-header
.show-footer
  display table
  position relative
  width 100%
  margin 0 0 80px
  table-layout fixed
.show-header-cell
.show-footer-cell
  display table-cell
  width 50%
  vertical-align top
  &:first-child
    padding-right 40px
  &:last-child
    padding-left 40px

.show-header
  &.has-carousel
    margin-top 30px

.show-title
.show-partner
  margin 15px 0
  vertical-align bottom
  line-height 1.2
.show-title
  garamond-size('l-headline')
.show-description
.show-metadata
  garamond-size('s-body')
  > p
    block-margins(10px)

.show-partner
  display table
  width 100%
  position relative
  // Roughly line up baseline
  padding-top 10px
  > .entity-with-follow
  > .show-share
    display table-cell
    vertical-align top
  > .show-share
    padding-left 30px
    text-align right
    > a
      vertical-align middle

.show-fair-link
  text-decoration none
  svg
    height 18px
    margin-left 2px
    vertical-align -4px
  &:hover
    text-decoration underline

Fix SVG styling on fair booth

.show-header
.show-footer
  display table
  position relative
  width 100%
  margin 0 0 80px
  table-layout fixed
.show-header-cell
.show-footer-cell
  display table-cell
  width 50%
  vertical-align top
  &:first-child
    padding-right 40px
  &:last-child
    padding-left 40px

.show-header
  &.has-carousel
    margin-top 30px

.show-title
.show-partner
  margin 15px 0
  vertical-align bottom
  line-height 1.2
.show-title
  garamond-size('l-headline')
.show-description
.show-metadata
  garamond-size('s-body')
  > p
    block-margins(10px)

.show-partner
  display table
  width 100%
  position relative
  // Roughly line up baseline
  padding-top 10px
  > .entity-with-follow
  > .show-share
    display table-cell
    vertical-align top
  > .show-share
    padding-left 30px
    text-align right
    > a
      vertical-align middle

.show-fair-link
  text-decoration none
  svg
    height 23px
    width 23px
    vertical-align -7px
  &:hover
    text-decoration underline


.main-page
  h1
    font-weight 300
    margin-bottom 0

.stat-display
  display inline-block
  width 100%
  margin 40px 0 20px 0
  display flex
  justify-content space
  flex-flow wrap

  .stat-display__stat
    margin 0 20px 20px 20px
    text-align center
    width calc(50% - 40px)

    +above(desktop)
      margin 0 0 20px 0
      width (1/6*100)%

    .stat-display__value
      font-family inherit
      color $brand_primary
      font-size 38px
      margin 0
      font-weight 300

    small
      color #aaa
      font-size 1em
      line-height 1

Update muted color of stats

.main-page
  h1
    font-weight 300
    margin-bottom 0

.stat-display
  display inline-block
  width 100%
  margin 40px 0 20px 0
  display flex
  justify-content space
  flex-flow wrap

  .stat-display__stat
    margin 0 20px 20px 20px
    text-align center
    width calc(50% - 40px)

    +above(desktop)
      margin 0 0 20px 0
      width (1/6*100)%

    .stat-display__value
      font-family inherit
      color $brand_primary
      font-size 38px
      margin 0
      font-weight 300

    small
      color #666
      font-size 1em
      line-height 1


.widgets {
    min-height: 240px; // Keep a minimum space for dropping widgets

    :global {
        // Class name for the chosen item
        .sortable-chosen {
            opacity: .8;
        }

        // Class name for the drop placeholder
        .sortable-ghost {
            opacity: .4;
        }
    }
}

Set "overflow-x: hidden" to disable horizontal scrollbar for widget panes

.widgets {
    min-height: 240px; // Keep a minimum space for dropping widgets
    overflow-x: hidden;

    :global {
        // Class name for the chosen item
        .sortable-chosen {
            opacity: .8;
        }

        // Class name for the drop placeholder
        .sortable-ghost {
            opacity: .4;
        }
    }
}


@import './common/variables.styl'
@import './common/icons.styl'

.header
  position: fixed
  right: 0
  left: 0
  background-color: header-main-bg
  display: flex
  flex-flow: row nowrap
  justify-content: flex-start
  align-items: center
  height: offset
  z-index: 2
  box-shadow: 0 2px 2px 0 border-dark
  &-inner
    display: flex
    flex-flow: row nowrap
    justify-content: space-between
    align-items: center
    width: "calc(100% - %s)" % offset
    max-width: 1024px
  &-logo
    width: offset
    height: offset
    background-color: header-logo-bg
    & a
      display: flex
      height: 100%
      justify-content: center
      align-items: center
    & img
      width: 78%
  &-slogan
    color:text-dark
    font-family: font-raleway
    font-size: 23px
    font-weight: 600
    margin-left: 19px
    letter-spacing: .6px
    &-x
      color: text-green
  &-sign-in
    margin-right: 20px
    & a
      display: flex
      align-items: center
      text-decoration: none
    & span
      margin-right: 15px
      font-family: font-quicksand
      color: text-green
    & i
      font-size: 23px
      margin-top: 6px
      color: text-green

Remove max-width for header content

@import './common/variables.styl'
@import './common/icons.styl'

.header
  position: fixed
  right: 0
  left: 0
  background-color: header-main-bg
  display: flex
  flex-flow: row nowrap
  justify-content: flex-start
  align-items: center
  height: offset
  z-index: 2
  box-shadow: 0 2px 2px 0 border-dark
  &-inner
    display: flex
    flex-flow: row nowrap
    justify-content: space-between
    align-items: center
    width: "calc(100% - %s)" % offset
  &-logo
    width: offset
    height: offset
    background-color: header-logo-bg
    & a
      display: flex
      height: 100%
      justify-content: center
      align-items: center
    & img
      width: 78%
  &-slogan
    color:text-dark
    font-family: font-raleway
    font-size: 23px
    font-weight: 600
    margin-left: 19px
    letter-spacing: .6px
    &-x
      color: text-green
  &-sign-in
    margin-right: 20px
    & a
      display: flex
      align-items: center
      text-decoration: none
    & span
      margin-right: 15px
      font-family: font-quicksand
      color: text-green
    & i
      font-size: 23px
      margin-top: 6px
      color: text-green


@require '_frontend/styles/colors'
@require '_frontend/styles/grid'
@require '_frontend/styles/spacing'

.form {
  col(1/2, offset: 1/4)
  background-color $white
  border-radius 5px
  margin-top $spacing2x
  margin-bottom $spacing2x
  padding $spacing2x
}

.section {
  margin-bottom $spacing1x
}

.input {
  border 1px solid $kindaLightGray
  box-sizing border-box
  color $darkGray
  padding $spacingHalf
  width 100%
}

Fix styling on mobile page

@require '_frontend/styles/colors'
@require '_frontend/styles/grid'
@require '_frontend/styles/spacing'

.form {
  +desktop() {
    col(1/2, offset: 1/4)
  }

  +tablet() {
    margin-right $spacing2x
    margin-left $spacing2x
  }

  +mobile() {
    border-radius 0
  }

  background-color $white
  border-radius 5px
  margin-top $spacing2x
  margin-bottom $spacing2x
  padding $spacing2x
}

.section {
  margin-bottom $spacing1x
}

.input {
  border 1px solid $kindaLightGray
  box-sizing border-box
  color $darkGray
  padding $spacingHalf
  width 100%
}


.btn.item-action {
  color: #9B9B9B !important;
  font-size: 13px;
  font-weight: bold;

  &:hover,
  &:focus,
  &:active,
  &:visited {
    color: #555 !important;
    text-decoration: none;
  }
}

Remove visited state for item-action buttons

.btn.item-action {
  color: #9B9B9B !important;
  font-size: 13px;
  font-weight: bold;

  &:hover,
  &:focus,
  &:active {
    color: #555 !important;
    text-decoration: none;
  }
}


@require '../../../../components/inquiry_questionnaire/stylesheets'

.artwork-partner
  display flex
  block-margins(gutter / 2)
  padding gutter 0
  align-items center

  &__icon
  &__metadata
    padding 0 (gutter / 2)

  &__icon
    &--icon
      background-color white

    > a
      display block
      width 90px
      height @width
      margin 0 auto
      background-size contain
      background-repeat no-repeat
      background-position center center
      initials()

  &__metadata
    border-left 1px solid gray-lighter-color

    &__name
      garamond-size('s-headline')
      text-decoration none
    &__locations
      garamond-size('s-body')
      color gray-dark-color
    &__bio
      margin (gutter / 4) 0 (gutter / 2) 0
      garamond-size('s-body')
    &__actions
      margin-top (gutter / 2)
      > a
      > span
        inline-block-margins(gutter / 4)
      &__followers
        garamond-size('l-caption')
        color gray-dark-color

Remove left gallery icon padding

@require '../../../../components/inquiry_questionnaire/stylesheets'

.artwork-partner
  display flex
  block-margins(gutter / 2)
  padding gutter 0
  align-items center

  &__metadata
    padding 0 (gutter / 2)

  &__icon
    padding-right (gutter / 2)

    &--icon
      background-color white

    > a
      display block
      width 90px
      height @width
      background-size contain
      background-repeat no-repeat
      background-position center center
      initials()

  &__metadata
    border-left 1px solid gray-lighter-color

    &__name
      garamond-size('s-headline')
      text-decoration none
    &__locations
      garamond-size('s-body')
      color gray-dark-color
    &__bio
      margin (gutter / 4) 0 (gutter / 2) 0
      garamond-size('s-body')
    &__actions
      margin-top (gutter / 2)
      > a
      > span
        inline-block-margins(gutter / 4)
      &__followers
        garamond-size('l-caption')
        color gray-dark-color


//
// Typography baseline
//

typography()

//
// Headings
//

h1, h2, h3, h4, h5, h6
  margin: 1em 0 .5em 0

  small,
  .small
    bold()
    color: $storm-dust
    font-size: .6em

//
// Emphasis
//

small,
.small
  small()

//
// Lists
//

.list-unstyled
  reset-list()

.list-inline
  inline-list()

Set base line-height to body element

//
// Typography baseline
//

base()
typography()

body
  -line-height()

//
// Headings
//

h1, h2, h3, h4, h5, h6
  margin: 1em 0 .5em 0

  small,
  .small
    bold()
    color: $storm-dust
    font-size: .6em

//
// Emphasis
//

small,
.small
  small()

//
// Lists
//

.list-unstyled
  reset-list()

.list-inline
  inline-list()


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

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

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

Hide meiosis animation elements outside of the box

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

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

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


modular-scale( base, step, ratio )
    base * ( ratio ** step )

Add global ratio variables for modular scale

ks-golden = 1.618
ks-minor-second = 1.067
ks-major-second = 1.125
ks-minor-third = 1.2
ks-major-third = 1.25
ks-perfect-fourth = 1.333
ks-augmented-fourth = 1.414
ks-perfect-fifth = 1.5
ks-minor-sixth = 1.6
ks-major-sixth = 1.667
ks-minor-seventh = 1.778
ks-major-seventh = 1.875
ks-octave = 2
ks-major-tenth = 2.5
ks-major-eleventh = 2.667
ks-major-twelfth = 3
ks-double-octave = 4

modular-scale( base, step, ratio = ks-perfect-fifth )
    base * ( ratio ** step )


accentColor = deeppink

font-styling()
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif
  -webkit-font-smoothing: antialiased
  font-weight: 400
  font-size: 18px
  line-height: 100%
  color: white

Change loading spinner color to white

accentColor = white

font-styling()
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif
  -webkit-font-smoothing: antialiased
  font-weight: 400
  font-size: 18px
  line-height: 100%
  color: white


// Menu
// --------------------------------------------------
.menu {
  +mobile() {
    padding-left: 10px;
  }
  margin-top: 20px;
  padding-left: 0;
  text-align: center;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 10px;
  @media screen and (max-width: 767px) {
    margin-top: 10px;
  }

  a {
    display: block;
    font-size: 13px;
    text-transform: capitalize;
    line-height: 1.5;
    border-bottom: 1px solid $menu-link-border;
    transition-property: border-color;
    the-transition();

    &:hover { border-bottom-color: $menu-link-hover-border; }
  }
}

.use-motion .menu-item { opacity: 0; }

Fix nav link center on mobile

// Menu
// --------------------------------------------------
.menu {
  margin-top: 20px;
  padding-left: 0;
  text-align: center;
}

.menu .menu-item {
  display: inline-block;
  margin: 0 10px;
  @media screen and (max-width: 767px) {
    margin-top: 10px;
  }

  a {
    display: block;
    font-size: 13px;
    text-transform: capitalize;
    line-height: 1.5;
    border-bottom: 1px solid $menu-link-border;
    transition-property: border-color;
    the-transition();

    &:hover { border-bottom-color: $menu-link-hover-border; }
  }
}

.use-motion .menu-item { opacity: 0; }


.error-page-container
	&.hidden
		display: none

Add style to error icon and message

.error-page-container
	display: none
	.error-page
		color: #7b5101
		.icon
			&:after
				font-family: FontAwesome, sans-serif
				content: "\f071"
				font-size: 1.1rem
		.error-message
			padding-left: 10px
	&.show
		display: block


@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'),
       url('../fonts/lato-latin-regular.woff2') format('woff2'),
       url('../fonts/lato-latin-regular.woff') format('woff');
}

Load local Lato font on Windows

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato'),
       local('Lato Regular'),
       local('Lato-Regular'),
       url('../fonts/lato-latin-regular.woff2') format('woff2'),
       url('../fonts/lato-latin-regular.woff') format('woff');
}


.vega-bind
  padding-bottom 5px

.vega-bind-name
  width 200px

Make the controls align nicely

.vega-bind
  padding-bottom 5px

.vega-bind-name
  width 200px
  display inline-block


/* social bar */
.socialbar
    @extends .list-type-none, .clearfix

    li
        float left
        width 27px
        padding-bottom 18px /* allows <span> positionning at bottom -18px */
        text-align center

        &:not(:first-child)
            margin-left 1.8rem

    a
        position relative

        &:not([data-icon='comments'])
            @extends .btn-icon

    /* counters */
    span
        @extends .font-secondary
        absolute bottom -18px left 0
        display inline-block
        width 100%
        margin-top 3px
        border-radius 2px
        background-color alpha(black, 10%)
        color $color-base
        line-height 1.3

Remove padding-bottom for socialbar li

/* social bar */
.socialbar
    @extends .list-type-none, .clearfix

    li
        float left
        width 27px
        text-align center

        &:not(:first-child)
            margin-left 1.8rem

    a
        position relative

        &:not([data-icon='comments'])
            @extends .btn-icon

    /* counters */
    span
        @extends .font-secondary
        absolute bottom -18px left 0
        display inline-block
        width 100%
        margin-top 3px
        border-radius 2px
        background-color alpha(black, 10%)
        color $color-base
        line-height 1.3


@import 'nib'

.infinite-tree {
}
.infinite-tree-scroll {
    overflow: auto;
    max-height: 400px; /* Change the height to suit your needs. */
}
.infinite-tree-table {
    width: 100%;
}
.infinite-tree-content {
    // Outline removes default browser's borders for focused element.
    outline: 0;

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

Add `position: relative` to .infinte-tree-content

@import 'nib'

.infinite-tree {
}
.infinite-tree-scroll {
    overflow: auto;
    max-height: 400px; /* Change the height to suit your needs. */
}
.infinite-tree-table {
    width: 100%;
}
.infinite-tree-content {
    // Outline removes default browser's borders for focused element.
    outline: 0;
    position: relative;

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


.g-item-image-viewer-select
  select
    display inline
    width auto
    margin-left 25px

  .image-viewer
    border 1px solid #f0f0f0
    width 100%
    height 600px

.g-li-full-screen
  width 100%
  height 100%
  position abolute
  top 0
  left 0

Fix spelling error in css

.g-item-image-viewer-select
  select
    display inline
    width auto
    margin-left 25px

  .image-viewer
    border 1px solid #f0f0f0
    width 100%
    height 600px

.g-li-full-screen
  width 100%
  height 100%
  position absolute
  top 0
  left 0


@font-face
  font-family 'Lato'
  font-style normal
  font-weight 400
  src local('Lato Normal'),
      local('Lato-Normal'),
      url(https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff)
      format('woff')

Fix url string on font-face

@font-face
  font-family 'Lato'
  font-style normal
  font-weight 400
  src local('Lato Normal'),
      local('Lato-Normal'),
      url('https://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff')
      format('woff')


body
  background-color $gallery

.site__navigation
  background white
  position relative
  z-index 100
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.15)
  padding .5rem
  +above(lg)
    padding 1rem 0

  img
    display inline-block
    vertical-align middle

  .btn-primary
    border-radius 0
    +above(md)
      border-radius 3px

.site__content
  padding 0

.site__mobile-navigation
  max-height 0px
  overflow hidden
  transition all 300ms linear
  padding 0 2rem

  &.open
    max-height 9999px

Remove border from nav svg on IE10

body
  background-color $gallery

.site__navigation
  background white
  position relative
  z-index 100
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.15)
  padding .5rem
  +above(lg)
    padding 1rem 0

  img
    display inline-block
    vertical-align middle
    border none

  .btn-primary
    border-radius 0
    +above(md)
      border-radius 3px

.site__content
  padding 0

.site__mobile-navigation
  max-height 0px
  overflow hidden
  transition all 300ms linear
  padding 0 2rem

  &.open
    max-height 9999px


.playersTable.offline
  margin-top 0
  .antagonistInfos
    width 100%
  .select_input
    background #353535
    color textLightGray
    margin-top 0
    select
      padding-left 110px
    + .select_input
      margin-top 15px

.engineSpinner
  color darken(textDarkBg, 5%)
  margin-left 10px

.offline_actions
  .claimDraw
    button.draw-yes:before
      display inline-block
      transform rotate(-90deg)
  .opponentSelector
    .select_input
      margin-top 0

.new_offline_game
  .popupActionWrapper
    margin 10px 0
  .from_position_wrapper
    margin-top 10px
    p
      font-size 0.9em
    > .from_position
      margin-top 5px
      display flex
      justify-content center

.OtbImportGamePopup
  .popup_content
    padding 10px
    form
      margin 1em 0
      display flex
      flex-flow column nowrap
      position relative
      > .importMeta
        margin-bottom 10px
        width 90%
        &:last-child
          margin-bottom 0
      > .exchange
        position absolute
        right 0
        height 100%
        width 10%
        display flex
        align-items center
        justify-content center
        > .fa
          margin 0

.offlineClock
  font-size 1.2em
  text-align center
  max-width 70px

.clockMoves
  font-size 0.9em

Make clock red when palyer flags

.playersTable.offline
  margin-top 0
  .antagonistInfos
    width 100%
  .select_input
    background #353535
    color textLightGray
    margin-top 0
    select
      padding-left 110px
    + .select_input
      margin-top 15px

.engineSpinner
  color darken(textDarkBg, 5%)
  margin-left 10px

.offline_actions
  .claimDraw
    button.draw-yes:before
      display inline-block
      transform rotate(-90deg)
  .opponentSelector
    .select_input
      margin-top 0

.new_offline_game
  .popupActionWrapper
    margin 10px 0
  .from_position_wrapper
    margin-top 10px
    p
      font-size 0.9em
    > .from_position
      margin-top 5px
      display flex
      justify-content center

.OtbImportGamePopup
  .popup_content
    padding 10px
    form
      margin 1em 0
      display flex
      flex-flow column nowrap
      position relative
      > .importMeta
        margin-bottom 10px
        width 90%
        &:last-child
          margin-bottom 0
      > .exchange
        position absolute
        right 0
        height 100%
        width 10%
        display flex
        align-items center
        justify-content center
        > .fa
          margin 0

.offlineClock
  font-size 1.2em
  text-align center
  max-width 70px

.offlineClock.outoftime
    background-color #a00000

.clockMoves
  font-size 0.9em


+mobile()
  .HomeHero
    min-height 100vh !important
    justify-content center

    &__focus
      padding 0
      width 100%

    &__demo-block
      width 100%
      > .Block
        width 100%
        max-width 100%
        margin 0
        .Block
          &__inner
            border none
            height 100vw
          &__caption
            display none

    &__connect
      margin-top 0

    > .HomeSection
      &__content
        justify-content center
      &__footer
        display none

  .HomeSection
    min-height auto

    &__content
      padding 0
      justify-content flex-start

    &__cta
      > .Button
        flex-basis 50%
        &:first-child
          margin-right 0.5em
        &:last-child
          margin-left 0.5em

    &__footer
      margin-top 4em

      > a
        padding 0.5em

  .HomeSplit
    display block
    collapsed-margins(4em)

    &__pane
      display block
      width 100%
      collapsed-margins(2em)
      padding 0 1em

    &__description
      max-width 100%

  .HomeExample
    width 100%

  .HomeNext
    display none

Deal with small (MBA) screens

@media (max-height: 45em)
  .HomeHero
    &__focus
      padding 0

  .HomeSection
    &__cta
      > .Button
        font-size font-size-base

+mobile()
  .HomeHero
    min-height 100vh !important
    justify-content center

    &__focus
      padding 0
      width 100%

    &__demo-block
      width 100%
      > .Block
        width 100%
        max-width 100%
        margin 0
        .Block
          &__inner
            border none
            height 100vw
          &__caption
            display none

    &__connect
      margin-top 0

    > .HomeSection
      &__content
        justify-content center
      &__footer
        display none

  .HomeSection
    min-height auto

    &__content
      padding 0
      justify-content flex-start

    &__cta
      > .Button
        flex-basis 50%
        &:first-child
          margin-right 0.5em
        &:last-child
          margin-left 0.5em

    &__footer
      margin-top 4em

      > a
        padding 0.5em

  .HomeSplit
    display block
    collapsed-margins(4em)

    &__pane
      display block
      width 100%
      collapsed-margins(2em)
      padding 0 1em

    &__description
      max-width 100%

  .HomeExample
    width 100%

  .HomeNext
    display none


@require "./_vars.styl"

span.flatpickr-weekday
    display: inline-block;
    width: 14.2857143%

span.flatpickr-current-month
    top: 0px !important

span.flatpickr-day
    width: 14.2857143%;
    margin: 0 (($daysWidth - $daySize*7)/14)

Fix month name in IE

@require "./_vars.styl"

span.flatpickr-weekday
  display: inline-block;
  width: 14.2857143%

span.flatpickr-day
  width: 14.2857143%;
  margin: 0 (($daysWidth - $daySize*7)/14)

@media screen and (min-width:unquote("0\0"))
  span.flatpickr-current-month
      padding-top: 0px !important


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

#shell-top-nav
	position: fixed
	top: 0
	left: 0
	// If we used `right: 0` instead, the top nav would flex off the screen if
	// a horizontal scrollbar became visible. Doing it this way ensures it's
	// always the correct width.
	width: 100vw
	z-index: $zindex-shell-top-nav

	#shell.has-banner &
		top: $shell-top-nav-height

	.disconnected-icon
		theme-prop('color', 'notice')

		&, .jolticon
			cursor: help

Fix width for top nav

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

#shell-top-nav
	position: fixed
	top: 0
	left: 0
	// If we used `right: 0` instead, the top nav would flex off the screen if
	// a horizontal scrollbar became visible. Doing it this way ensures it's
	// always the correct width.
	width: 100vw
	max-width: 100%
	z-index: $zindex-shell-top-nav

	#shell.has-banner &
		top: $shell-top-nav-height

	.disconnected-icon
		theme-prop('color', 'notice')

		&, .jolticon
			cursor: help


@import '../../../../clients/web/src/stylesheets/body/itemPage.styl'

.g-item-thumbnail-header
  @extend .g-item-metadata-header
  margin-top 18px

Fix an issue with upgrading to Girder 1.0

@import '../../../../clients/web/src/stylesheets/widgets/metadataWidget.styl'

.g-item-thumbnail-header
  @extend .g-widget-metadata-header
  margin-top 18px


.notification-section
  @extends .content-container
  background-color: #EDEDED
  border-radius: 4px
  margin: 1.5em 10%
  overflow: hidden
  padding: 1em 5%

  &__container
    align-items: center
    display: flex
    justify-content: center

  &__item
    width: 33%

  &__error
    background: rgba(red, 0.3)
    font-size: 0.8em
    font-weight: bold
    padding: 0.5em 2em
    text-align: center

  &__title
    color: #646464
    text-align: center
    text-decoration: none
    text-transform: capitalize

  &__img
    border-radius: 50%
    max-width: 40px
    max-height: 40px

  &__item-count
    display: inline-block
    font-size: 0.8em
    padding: 0em 2em

  &__expand
    float: right

  button
    background: none !important
    border: none !important
    outline: none
    position: absolute

    &:hover
      color: inherit !important

  .fa-star
    color: #F0B200
    float: right

.notifications-title
  margin: 0 10%
  padding: 1em 0 0.75em 0
  text-align: center

  &__project
    background: #f7f7f7
    border: 2px solid #f2f1f1
    border-radius: 4px
    margin: 0 10%
    padding: 5px

Add Margin to Separate Announcement

.notification-section
  @extends .content-container
  background-color: #EDEDED
  border-radius: 4px
  margin: 1.5em 10%
  overflow: hidden
  padding: 1em 5%

  &__container
    align-items: center
    display: flex
    justify-content: center

  &__item
    width: 33%

  &__error
    background: rgba(red, 0.3)
    font-size: 0.8em
    font-weight: bold
    padding: 0.5em 2em
    text-align: center

  &__title
    color: #646464
    text-align: center
    text-decoration: none
    text-transform: capitalize

  &__img
    border-radius: 50%
    max-width: 40px
    max-height: 40px

  &__item-count
    display: inline-block
    font-size: 0.8em
    padding: 0em 2em

  &__expand
    float: right

  button
    background: none !important
    border: none !important
    outline: none
    position: absolute

    &:hover
      color: inherit !important

  .fa-star
    color: #F0B200
    float: right

.notifications-title
  margin: 0 10% 1em 10%
  padding: 1em 0 0.75em 0
  text-align: center

  &__project
    background: #f7f7f7
    border: 2px solid #f2f1f1
    border-radius: 4px
    margin: 0 10%
    padding: 5px


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

#shell-top-nav
	position: fixed
	top: 0
	left: 0
	right: 0
	z-index: $zindex-shell-top-nav

	#shell.has-banner &
		top: $shell-top-nav-height

	.disconnected-icon
		theme-prop('color', 'notice')

		&, .jolticon
			cursor: help

Fix top nav to not stretch the full body, but only stretch the viewport width.

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

#shell-top-nav
	position: fixed
	top: 0
	left: 0
	// If we used `right: 0` instead, the top nav would flex off the screen if
	// a horizontal scrollbar became visible. Doing it this way ensures it's
	// always the correct width.
	width: 100vw
	z-index: $zindex-shell-top-nav

	#shell.has-banner &
		top: $shell-top-nav-height

	.disconnected-icon
		theme-prop('color', 'notice')

		&, .jolticon
			cursor: help


@require 'vars.styl'
.grid
    button.btn-link
        padding: 10px 15px
    .nav-tabs
        margin-bottom: 5px
        padding-left: 5px
        padding-top: 5px
    .dgrid
        .dgrid-header-row
            background-color: $background-grey
        .dgrid-row-odd
            background-color: #f5f5f5
        .dgrid-cell.field-Id
            width: 0
        .dgrid-cell
            text-overflow: ellipsis
            white-space: nowrap
    [data-dojo-attach-point='clearSelectionBtnContainer'] button
        margin-right: 7px
        margin-top: 3px

Fix sizing of dgrid to not overflow off the bottom of the page

@require 'vars.styl'
.grid
    height 100%
    [role='tabpanel']
        height 100%
        .tab-content
            top 47px
            bottom 0
            left 0
            right 0
            position absolute
            .tab-pane, .dgrid
                height 100%
                width 100%
    button.btn-link
        padding: 10px 15px
    .nav-tabs
        margin-bottom: 5px
        padding-left: 5px
        padding-top: 5px
    .dgrid
        .dgrid-header-row
            background-color: $background-grey
        .dgrid-row-odd
            background-color: #f5f5f5
        .dgrid-cell.field-Id
            width: 0
        .dgrid-cell
            text-overflow: ellipsis
            white-space: nowrap
    [data-dojo-attach-point='clearSelectionBtnContainer'] button
        margin-right: 7px
        margin-top: 3px


// placeholders
$clearfix
  clearfix();

// blocks
u-pl-block            := {
  float               : left
}

u-pr-block            := {
  float               : right !important
}

// rules
.u-cf
  @extend $clearfix;

.u-pl
  {u-pl-block}

.u-pr
  {u-pr-block}

Fix clearfix :before and :after visibility bug.

// placeholders
$clearfix
  clearfix();

// blocks
u-pl-block            := {
  float               : left
}

u-pr-block            := {
  float               : right !important
}

// rules
.u-cf
  @extend $clearfix;
  &:before
  &:after
    display: none;

.u-pl
  {u-pl-block}

.u-pr
  {u-pr-block}


.worker-list
  list-style-type none

  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 margin on worker list

.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


$calendar_background = #ffffff
$calendar_border_color = #e6e6e6

$months_color = alpha(black, 0.9)

$months_background = transparent

$weekdays_background = transparent

$day_text_color = #393939
$day_hover_background_color = #e6e6e6

$today_color = #f99595
$selected_day_background = #446CB3

@import "flatpickr_base"

Update default selected day color to a nicer blue

$calendar_background = #ffffff
$calendar_border_color = #e6e6e6

$months_color = alpha(black, 0.9)

$months_background = transparent

$weekdays_background = transparent

$day_text_color = #393939
$day_hover_background_color = #e6e6e6

$today_color = #f99595
$selected_day_background = #3da3f3

@import "flatpickr_base"


.InvestCTA
  position fixed
  bottom 0
  left 0
  right 0
  width 100%
  padding 1em

  display flex
  flex-direction row
  justify-content center
  align-items center
  text-align center
  z-index header_z
  background-color colors-state-invest
  color white
  font-size font-size-base
  line-height line-height-base
  transform translateZ(0)

  &__close
    position absolute
    top 0
    right 0
    padding 0.5em 0.75em
    line-height 1
    color white
    font-size font-size-lg
    text-align center

  .Type
    color white

  > span
  > .Button
    margin 0 0.5em
  > .Button
    color white
    border-color darken(colors-state-invest, 30)

+mobile()
  .InvestCTA
    flex-direction column

Make invest CTA show up above invite message

.InvestCTA
  position fixed
  bottom 0
  left 0
  right 0
  width 100%
  padding 1.25em

  display flex
  flex-direction row
  justify-content center
  align-items center
  text-align center
  z-index header_z + 10
  background-color colors-state-invest
  color white
  font-size font-size-base
  line-height line-height-base
  transform translateZ(1)

  &__close
    position absolute
    top 0
    right 0
    padding 0.5em 0.75em
    line-height 1
    color white
    font-size font-size-lg
    text-align center

  .Type
    color white

  > span
  > .Button
    margin 0 0.5em
  > .Button
    color white
    border-color darken(colors-state-invest, 30)

+mobile()
  .InvestCTA
    flex-direction column


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

// Hide default caret from .dropdown-toggle
.navbar-auth__dropdown-toggle
  padding-top 0 !important
  padding-bottom 0 !important
  &:after
    display none

.navbar-auth__avatar
  height 2.375rem
  border-radius 3px
  border 1px solid ($brand-primary + 20%)

Tweak toolbar user icon padding on mobiles

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

// Hide default caret from .dropdown-toggle
.navbar-auth__dropdown-toggle:after
  display none

.navbar-auth__avatar
  height 2.375rem
  border-radius 3px
  border 1px solid ($brand-primary + 20%)

//
// Tweak top/bottom padding for mobile and desktop toolbars
//
.navbar-auth__dropdown-toggle
  padding-bottom 0 !important

@media (min-width: $grid-breakpoints.sm)
  .navbar-auth__dropdown-toggle
    padding-top 0 !important


#full-modal
    // Maps
    #map
        background #f2f0e9
        height 125px
        margin 0
        position relative
        width 100%
        z-index 12000
        transition height linear 100ms

        &.hide-on-mobile
            @media screen and (max-height: 480px)
                height 0

    #loading-text
        margin 20px 0 0
        text-align center

.checkin
    background #efefef
    border-bottom 1px solid #cdcdcd
    clear both
    margin 0 auto
    max-width 90%
    padding 5px
    position relative

    &:nth-child(2)
        background #fefefe

        .arrow
            background #efefef

    &:after
        clear both
        content ""
        display block

    .profile-photo
        height 50px
        margin 0 5px 0 0
        width 50px

    .user
        font-size .9em

    .venue
        margin .25em 30px .25em 0
        overflow hidden
        text-overflow ellipsis
        white-space nowrap

    h4
        font-size .8em

    .arrow
        background #efefef
        position absolute
        right 10px
        top: 50%
        transform translate(0%, -50%)
        -moz-transform translate(0%, -50%)
        -webkit-transform translate(0%, -50%)

#confirm-checkin
    #checkin-comment
        display block
        margin 0 auto 1em
        min-height 60px
        width 90%

Use 2n instead of just 2

#full-modal
    // Maps
    #map
        background #f2f0e9
        height 125px
        margin 0
        position relative
        width 100%
        z-index 12000
        transition height linear 100ms

        &.hide-on-mobile
            @media screen and (max-height: 480px)
                height 0

    #loading-text
        margin 20px 0 0
        text-align center

.checkin
    background #efefef
    border-bottom 1px solid #cdcdcd
    clear both
    margin 0 auto
    max-width 90%
    padding 5px
    position relative

    &:nth-child(2n)
        background #fefefe

        .arrow
            background #efefef

    &:after
        clear both
        content ""
        display block

    .profile-photo
        height 50px
        margin 0 5px 0 0
        width 50px

    .user
        font-size .9em

    .venue
        margin .25em 30px .25em 0
        overflow hidden
        text-overflow ellipsis
        white-space nowrap

    h4
        font-size .8em

    .arrow
        background #efefef
        position absolute
        right 10px
        top: 50%
        transform translate(0%, -50%)
        -moz-transform translate(0%, -50%)
        -webkit-transform translate(0%, -50%)

#confirm-checkin
    #checkin-comment
        display block
        margin 0 auto 1em
        min-height 60px
        width 90%


.g-collection-list-entry

  .g-collection-title
    font-size 17px

  .g-collection-description
    color #666
    font-size 14px
    font-weight bold

  .g-collection-right-column
    border-left 1px solid #ddd
    padding-left 8px
    display inline
    width 290px
    font-size 14px
    float right
    color #909090

  .g-collection-description
    background-color white
    padding 8px 12px
    border-radius 3px
    border 1px solid #dedede

.g-collection-list-header
  padding-bottom 10px

  .g-collection-pagination
    display inline-block
    >ul
      margin 0 15px 0 0

    .pagination>li>a
      float none
      line-height 1.5
      padding 7px 12px

  .g-collection-search-form
    display inline
    margin-right 15px

    .form-group
      display inline-block

Remove outdated style rules for collection description

.g-collection-list-entry

  .g-collection-title
    font-size 17px

  .g-collection-right-column
    border-left 1px solid #ddd
    padding-left 8px
    display inline
    width 290px
    font-size 14px
    float right
    color #909090

  .g-collection-description
    background-color white
    padding 8px 12px
    border-radius 3px
    border 1px solid #dedede

.g-collection-list-header
  padding-bottom 10px

  .g-collection-pagination
    display inline-block
    >ul
      margin 0 15px 0 0

    .pagination>li>a
      float none
      line-height 1.5
      padding 7px 12px

  .g-collection-search-form
    display inline
    margin-right 15px

    .form-group
      display inline-block


.resource-list-item
  font-size 17px
  padding 0
  border-bottom 1px solid #eee
  height 40px
  transition height 0.25s
  overflow hidden
  display flex
  align-items center

  &.resource-list-item-enter,
  &.resource-list-item-leave.resource-list-item-leave-active
    height 0

  &.resource-list-item-enter.resource-list-item-enter-active,
  &.resource-list-item-leave
    height 40px

  &:first-child
    border-top 1px solid #eee

.resource-list-item-delete
  font-size 15px
  color #b5b5b5
  cursor pointer
  margin 0 15px 0 auto

  &:hover
    color #888

  &:active,
  &:focus
    outline none
    color #555

  +respond-above($md-screen)
    margin-right 0

  &[disabled]
    color #dfdfdf

Add hover effect to list items

.resource-list-item
  font-size 17px
  padding 0
  border-bottom 1px solid #eee
  height 40px
  transition height 0.25s
  overflow hidden
  display flex
  align-items center

  &:hover
    background #fbfbfb

  &.resource-list-item-enter,
  &.resource-list-item-leave.resource-list-item-leave-active
    height 0

  &.resource-list-item-enter.resource-list-item-enter-active,
  &.resource-list-item-leave
    height 40px

  &:first-child
    border-top 1px solid #eee

.resource-list-item-delete
  font-size 15px
  color #b5b5b5
  cursor pointer
  margin 0 15px 0 auto

  &:hover
    color #888

  &:active,
  &:focus
    outline none
    color #555

  +respond-above($md-screen)
    margin-right 0

  &[disabled]
    color #dfdfdf


@import '~normalize.css'

@import './ui';

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

*
  box-sizing: border-box

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

  &:active
    cursor: none

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

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

    .divider
      margin: 5px 0

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

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

Fix text color of the screen selector <select>

@import '~normalize.css'

@import './ui';

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

*
  box-sizing: border-box

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

  &:active
    cursor: none

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

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

    .divider
      margin: 5px 0

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

  select.screen-selector
    position: absolute
    top: 100px
    right: 10px
    z-index: 4
    color: #000000


.home-slogan
  text-align center

.home-description
  text-align center
  margin-bottom 40px

.home-download
  background #eee
  display flex
  justify-content space-between
  align-items center

  a
    text-decoration none

.home-logo
  padding 20px 40px 20px 20px
  img
    height 120px

.home-download-details
  flex 1
  p
    margin 0
    padding 0

  .home-download-version
    display block
    font-size 1.4rem
    font-weight 700
    color black
    border-radius 0 4px 0 0
    margin-bottom 20px

  .home-download-list
    color rgba(0, 0, 0, 0.5)
    font-size 0.9rem
    padding-top 0
    padding-bottom 0
    height 28px
    max-height 28px

    a:after
      content ', '

    a:nth-last-child(2):after
      content ' & '
      color rgba(0, 0, 0, 0.5)

    a:last-child:after
      content ''

.home-secondary-links
  margin-top 40px
  p
    text-align center

Index page: fix for mobile phones (narrow screen)

.home-slogan
  text-align center

.home-description
  text-align center
  margin-bottom 40px

.home-download
  background #eee
  display flex
  justify-content space-between
  align-items center

  a
    text-decoration none

.home-logo
  padding 20px 40px 20px 20px
  img
    height 120px

.home-download-details
  flex 1
  p
    margin 0
    padding 0

  .home-download-version
    display block
    font-size 1.4rem
    font-weight 700
    color black
    border-radius 0 4px 0 0
    margin-bottom 20px

  .home-download-list
    color rgba(0, 0, 0, 0.5)
    font-size 0.9rem
    padding-top 0
    padding-bottom 0
    margin-right 10px

    a:after
      content ', '

    a:nth-last-child(2):after
      content ' & '
      color rgba(0, 0, 0, 0.5)

    a:last-child:after
      content ''

.home-secondary-links
  margin-top 40px
  p
    text-align center


header
  position: sticky
  top: 0

nav
  ol, ul
    background-color: #FFF
    display: block
    li
      display: inline-block
      padding: 0 1em
      ol
        padding-left: 0
        position: absolute

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

Apply some styling to the navbar and their links.

header
  position: sticky
  top: 0

nav
  a
    color: #FFF
    display: inline-block
    padding: 1em
    text-decoration: none
    &.active
      background-color: #EF3E45

    &:active
    &:hover
    &:focus
      background-color: #D4373E

  ol
  ul
    background-color: #000
    display: block
    li
      display: inline-block
      ol
        padding-left: 0
        position: absolute

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


.LoggedOutMenu
  position absolute
  top 2em
  left 3.25em
  font-size font-size-base
  line-height line-height-tall
  user-select none
  -webkit-touch-callout none

  &__toggle
    display none
    position relative
    cursor pointer
    width 1.5em
    height @width

    // Patties
    > span
      width 1.5em
      height 2px
      top 50%
      left 50%
      transform translate(-50%, -50%)

      &
      &:before
      &:after
        display block
        position absolute
        background-color colors-gray-text

      &:before
      &:after
        content ''
        width 100%
        height 100%

      &:before
        top 300%

      &:after
        bottom 300%

  &__options
    margin-top 1em

    > a
      display block
      text-decoration none

      &[data-state='active']
        font-weight bold
        color colors-gray-hover

      &:first-child
        display none

  &--active
    .LoggedOutMenu
      &__options
        display block

      &__toggle
        > span
          &
          &:before
          &:after
            background-color colors-gray-lighter

+below(logged-out-nav-breakpoint)
  .LoggedOutMenu
    position relative
    top 0
    left 0
    background-color white

    &__toggle
      display block

    &__options
      display none

      > a:first-child
        display block

Hide menu on non-mobile sizes

.LoggedOutMenu
  position absolute
  top 2em
  left 3.25em
  font-size font-size-base
  line-height line-height-tall
  user-select none
  -webkit-touch-callout none
  display none

  &__toggle
    display none
    position relative
    cursor pointer
    width 1.5em
    height @width

    // Patties
    > span
      width 1.5em
      height 2px
      top 50%
      left 50%
      transform translate(-50%, -50%)

      &
      &:before
      &:after
        display block
        position absolute
        background-color colors-gray-text

      &:before
      &:after
        content ''
        width 100%
        height 100%

      &:before
        top 300%

      &:after
        bottom 300%

  &__options
    margin-top 1em

    > a
      display block
      text-decoration none

      &[data-state='active']
        font-weight bold
        color colors-gray-hover

      &:first-child
        display none

  &--active
    .LoggedOutMenu
      &__options
        display block

      &__toggle
        > span
          &
          &:before
          &:after
            background-color colors-gray-lighter

+below(logged-out-nav-breakpoint)
  .LoggedOutMenu
    position relative
    top 0
    left 0
    background-color white
    display block

    &__toggle
      display block

    &__options
      display none

      > a:first-child
        display block


// colors
$accentColor = #4F99A8
$textColor = #47585C
$borderColor = tint($textColor, 70%);
$codeBgColor = #282c34
$arrowBgColor = #68C8DB
$badgeTipColor = #68C8DB
$badgeWarningColor = darken(#EDAC5F, 35%)
$badgeErrorColor = #D74C44

Add class to hide side bar and remove padding on page

// colors
$accentColor = #4F99A8
$textColor = #47585C
$borderColor = tint($textColor, 70%);
$codeBgColor = #282c34
$arrowBgColor = #68C8DB
$badgeTipColor = #68C8DB
$badgeWarningColor = darken(#EDAC5F, 35%)
$badgeErrorColor = #D74C44

.credential-editor {
    aside {
        display: none !important;
        width: 0 !important;
    }
    .page {
        padding-left: 0 !important;
    }
}


.alert
  padding 20px
  text-align center
  p
    color warning
  td
    text-align left

.notification
  background-color sprout
  padding 10px
  color #fff
  text-align center
  font-weight bold
  > .container
    display flex
    align-items center
    p
      flex 1
      margin-bottom 0
      white-space pre-line

    .button
      margin-left 20px

    a:not(.button)
      color #fff

.notice
  @extends .notification
  position relative
  z-index 9999
  width 100%
  text-align left
  background-color warning
  color #fff
  > .container
   svg
      &:focus,
      &:hover
        cursor pointer
        color smoke
        outline none

Fix bug where 'dismiss' icon isn't usable in error notification

.alert
  padding 20px
  text-align center
  p
    color warning
  td
    text-align left

.notification
  background-color sprout
  padding 10px
  color #fff
  text-align center
  font-weight bold
  > .container
    display flex
    align-items center
    p
      flex 1
      margin-bottom 0
      white-space pre-line
      overflow overlay

    .button
      margin-left 20px

    a:not(.button)
      color #fff

.notice
  @extends .notification
  position relative
  z-index 9999
  width 100%
  text-align left
  background-color warning
  color #fff
  > .container
   svg
      &:focus,
      &:hover
        cursor pointer
        color smoke
        outline none


body
  background-color $gallery
  background-image url(/images/background-pattern.png)
  background-size 300px auto

.site
  height 100%

.logo__image
  position relative
  top -1px
  margin-right .5rem

.logo__text
  position relative
  top 1px
  height 15px
  +above(md)
    height 20px

.site__navigation
  background white
  position relative
  z-index 100
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.15)
  padding .5rem
  +above(lg)
    padding 1rem 0

  img
    display inline-block
    vertical-align middle
    border none

  .btn,
  .btn.btn-primary
    border-radius 0
    font-size 12px
    padding 9px

    +above(md)
      border-radius 3px
      padding 9px 15px
      font-size 14px

.site__content
  padding 0

.site__mobile-navigation
  max-height 0px
  overflow hidden
  transition all 300ms linear
  padding 0 2rem

  &.open
    max-height 9999px

.site__footer
  small
    display inline-block
    max-width 600px
    font-size 10px
    line-height 1.3

.site__footer__inappropriate-content
  font-size 12px

Fix z-index for new search location

body
  background-color $gallery
  background-image url(/images/background-pattern.png)
  background-size 300px auto

.site
  height 100%

.logo__image
  position relative
  top -1px
  margin-right .5rem

.logo__text
  position relative
  top 1px
  height 15px
  +above(md)
    height 20px

.site__navigation
  background white
  position relative
  z-index 100
  box-shadow 0px 2px 4px 0px rgba(0,0,0,0.15)
  padding .5rem
  +above(lg)
    padding 1rem 0

  img
    display inline-block
    vertical-align middle
    border none

  .btn,
  .btn.btn-primary
    border-radius 0
    font-size 12px
    padding 9px

    +above(md)
      border-radius 3px
      padding 9px 15px
      font-size 14px

.site__content
  position relative
  padding 0
  z-index 105

.site__mobile-navigation
  max-height 0px
  overflow hidden
  transition all 300ms linear
  padding 0 2rem

  &.open
    max-height 9999px

.site__footer
  small
    display inline-block
    max-width 600px
    font-size 10px
    line-height 1.3

.site__footer__inappropriate-content
  font-size 12px


.search
  .page-content
    .results-box
      .panel-heading
        i
          margin-right 5px

      .search-results-plugin
        .title-container
          margin-bottom 10px
        .meta-search
          display table
          overflow hidden
          text-overflow ellipsis
          width auto
          padding 0
          li
            display table-row
            list-style none
            label,span
              display table-cell
              font-weight 400
            span
              padding-left 20px
            label
              color #999
              text-transform uppercase
              font-size 12px

Fix extra margin on search results sections

.search
  .page-content
    .results-box
      .panel-heading
        i
          margin-right 5px

      .panel-body
        .list-group
          margin-bottom 0

        .search-results-plugin
          .title-container
            margin-bottom 10px
          .meta-search
            display table
            overflow hidden
            text-overflow ellipsis
            width auto
            padding 0
            li
              display table-row
              list-style none
              label,span
                display table-cell
                font-weight 400
              span
                padding-left 20px
              label
                color #999
                text-transform uppercase
                font-size 12px


.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: flex
		padding: 50px
		font-size: 1.2rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			flex: 1
			padding: 13px 5px 10px 5px
			margin-right: 20px
			background: rgba(160, 158, 151, 0.5)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
			span
				margin-bottom: 8px
			.date
				font-size: 1rem
			.city-name
				margin-bottom: 8px
				font-size: 1.4rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Add grid to forecast weather

.forecast-weather-container
	height: 100%
	width: 100%;
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		display: grid
		grid-template-columns: repeat(7, 13%)
		grid-column-gap: 15px
		font-size: 1.2rem
		font-family: cursive
		text-align: center
		color: #ccc
		.day
			display: flex
			flex-direction: column
			align-items: center
			padding: 13px 5px 10px 5px
			background: rgba(160, 158, 151, 0.5)
			box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
			border-radius: 5px
			&:last-child
				margin-right: 0
			span
				margin-bottom: 8px
			.date
				font-size: 1rem
			.city-name
				margin-bottom: 8px
				font-size: 1.4rem
			.condition-text
				margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex


.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: 300px
		height: 300px
		font-size: 1.6rem
		font-family: cursive
		color: #ccc
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
	.button-container
		margin: 20px 0
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Change button margin 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: 300px
		height: 300px
		font-size: 1.6rem
		font-family: cursive
		color: #ccc
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
	.button-container
		margin: 30px 0
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex


@import 'nib'

.CodeMirror.cm-s-MYTHEME

  //TODO

ADD THE THEME!!! (not complete, though)

@import 'nib'

// FONTS --change that if you want a different
//         source (default is Google Webfonts)

/// Inconsolata: 400 and 700
@import url('http://fonts.googleapis.com/css?family=Inconsolata:400,700');

.CodeMirror.cm-s-dabbit

  background-image url('gray_jean.png') //TODO: retina
  &.CodeMirror-focused
    box-shadow inset .1em .1em .4em rgba(0,0,0, .5)

  font 16px/1.5em Monaco, Consolas, Inconsolata, 'Deja Vu Sans Mono',
                  'Droid Sans Mono', 'Andale Mono', 'Lucida Console',
                  monospace //TODO
  color black
  text-shadow 0 1px 0 rgba(255,255,255, 1)

  //SPACING
  .CodeMirror-sizer
    padding-left .8em

  //GUTTER & ACTIVE LINE
  /// Let the gutter have a border
  .CodeMirror-gutters
    background-color transparent
    border-right 0
  .CodeMirror-lines
    border-left solid 0.13em rgba(85,33,0, .11) //FIXME: not pixel-perfect
  /// Only show active line number
  .CodeMirror-linenumber
    visibility hidden
  /**&.CodeMirror-focused**/ .CodeMirror-activeline .CodeMirror-linenumber
    visibility visible
  /// Style active line
  .CodeMirror-activeline
    .CodeMirror-linebackground
      //TODO: fake alpha-multiply effect
      background rgba(153,122,102, 0.08)
      background linear-gradient(left, rgba(153,122,102, 0.11) 70%, rgba(153, 122,102, 0.04))
      // a nasty trick to get it span through all the line
      position absolute
      left -50px
      padding-left 50px
  /// Style the line numbers
  .CodeMirror-linenumber
    display inline-block
    position relative
    width auto !important
    height 1.3em
    min-width .7em
    padding .1em .6em 0
    margin 0 .4em 0 -.75em
    text-align center

    color rgba(245,242,240, 1)
    font bold 65%/1.5 sans-serif
    background-color rgba(153,122,102, .4)
    box-shadow 0 1px white
    text-shadow none
    vertical-align .1em
    border-radius 999px

  //TOKEN STYLING
  //TODO

  //SELECTION
  .CodeMirror-selected, &.CodeMirror-focused .CodeMirror-selected
    background-color rgba(153,122,102, .5)
  .CodeMirror-selectedtext
    color white
    text-shadow 0 -1px 1px rgba(153,122,102, 1)

  //TODO: scrolling bar


body
  font-family sans-serif

pre,
code
  font-family Courier, Monaco, monospace

h1
  font-family sans
  font-size 2.285em
  margin 0.93rem 0
  padding 0

h2
  font-family sans
  font-size 2.019em
  margin 0.83rem 0
  padding 0

h3
  font-family sans
  font-size 1.894em
  margin 0.73rem 0
  padding 0

h4
  font-family sans
  font-size 1.611em
  margin 0.63rem 0
  padding 0

h5
  font-family sans
  font-size 1.361em
  margin 0.53rem 0
  padding 0

h6
  font-family sans
  font-size 1.059em
  margin 0.43rem 0
  padding 0

Reduce font size for h4, 5 and 6

body
  font-family sans-serif

pre,
code
  font-family Courier, Monaco, monospace

h1
  font-family sans
  font-size 2.285em
  margin 0.93rem 0
  padding 0

h2
  font-family sans
  font-size 2.019em
  margin 0.83rem 0
  padding 0

h3
  font-family sans
  font-size 1.894em
  margin 0.73rem 0
  padding 0

h4
  font-family sans
  font-size 1.511em
  margin 0.63rem 0
  padding 0

h5
  font-family sans
  font-size 1.321em
  margin 0.53rem 0
  padding 0

h6
  font-family sans
  font-size 0.959em
  margin 0.43rem 0
  padding 0


// Import plugins
@import 'jeet'
@import 'rupture'
@import 'typographic'

// Import partials
@import 'partials/reset.inc'
@import 'partials/typography.inc'
@import 'partials/color.inc'
@import 'partials/base.inc'
@import 'partials/header.inc'
@import 'partials/footer.inc'

Make docpad re-render changed stylus partials

---
referencesOthers: true
---

// Import plugins
@import 'jeet'
@import 'rupture'
@import 'typographic'

// Import partials
@import 'partials/reset.inc'
@import 'partials/typography.inc'
@import 'partials/color.inc'
@import 'partials/base.inc'
@import 'partials/header.inc'
@import 'partials/footer.inc'


.tooltip-inner
  max-width 350px
  color $tooltip-text-color
  font-weight 600
  font-size 1em

.popover
  z-index $cosmos-layer
  min-width 300px
  font-size 12px
  .quote-text
    font-style italic

.popover-content
  overflow hidden
  text-overflow ellipsis
  color $d-gray
  font-weight normal
  font-size 14px
  line-height 1.3

.close-popover
  display none
  +below(3)
    display block
    position absolute
    top -5px
    right -5px
    color $d-gray
    font-size 22px

.popover
.tooltip
.tooltip-inner
.popover-content
  +below(3)
    min-width 200px
    max-width 325px

.tooltip
  for direction in top bottom right left
    &.{direction}
      & > .tooltip-inner
        background-color $tooltip-BG-color
      & > .tooltip-arrow
        border-{direction}-color $tooltip-BG-color

.with-info-tooltip
  &::after
    content '\f05a' // fa-info-circle
    display inline-block
    icon()
    color darken($border-primary, 40%)
    margin-left .5em
  &:hover
    &::after
      color $primary

Fix z-index issue with incident form tooltips

.tooltip-inner
  max-width 350px
  color $tooltip-text-color
  font-weight 600
  font-size 1em

.popover
  min-width 300px
  font-size 12px
  .quote-text
    font-style italic

.popover-content
  overflow hidden
  text-overflow ellipsis
  color $d-gray
  font-weight normal
  font-size 14px
  line-height 1.3

.close-popover
  display none
  +below(3)
    display block
    position absolute
    top -5px
    right -5px
    color $d-gray
    font-size 22px

.popover
.tooltip
.tooltip-inner
.popover-content
  z-index $cosmos-layer + 1
  +below(3)
    min-width 200px
    max-width 325px

.tooltip
  for direction in top bottom right left
    &.{direction}
      & > .tooltip-inner
        background-color $tooltip-BG-color
      & > .tooltip-arrow
        border-{direction}-color $tooltip-BG-color

.with-info-tooltip
  &::after
    content '\f05a' // fa-info-circle
    display inline-block
    icon()
    color darken($border-primary, 40%)
    margin-left .5em
  &:hover
    &::after
      color $primary


.chart
  width 100%
  height 300px
  display flex
  justify-content center
  align-items center
  margin-bottom 50px

.chart-mini
  height 150px
  width 90%
  display flex
  justify-content center
  align-items center

.chart.-mini .amcharts-axis-zero-grid
  stroke-width: 0
  stroke-opacity: 0

.chart a
  opacity .3 !important

.chart .amcharts-graph-line
  animation fadeIn 0.3s ease-in-out

@keyframes fadeIn
  0%   opacity 0
  100% opacity 1

.amcharts-balloon-bg
  height 22p
  y: 8.5

.amcharts-balloon-div:last-child
  margin-top: 8px

Fix class name to remove grid

.chart
  width 100%
  height 300px
  display flex
  justify-content center
  align-items center
  margin-bottom 50px

.chart-mini
  height 150px
  width 90%
  display flex
  justify-content center
  align-items center

.chart-mini .amcharts-axis-zero-grid
  stroke-width: 0
  stroke-opacity: 0

.chart a
  opacity .3 !important

.chart .amcharts-graph-line
  animation fadeIn 0.3s ease-in-out

@keyframes fadeIn
  0%   opacity 0
  100% opacity 1

.amcharts-balloon-bg
  height 22p
  y: 8.5

.amcharts-balloon-div:last-child
  margin-top: 8px


#keyword-search-bar-container
  margin-bottom 20px

Correct color for keyword search placeholder and icon

#keyword-search-bar-container
  margin-bottom 20px

  .icon-search
    color #666

input#keyword-search-bar-input
  &::placeholder
    color #666


@import "core/variables" // System variables
@import "_variables" // Project variables
@import "core/mixins" // System mixins
@import "_mixins" // Project mixins
@import "../../../tmp/icons-template.styl" // Svg icons

// Png sprites
@import "../../../tmp/sprite.styl" if file-exists("../../../tmp/sprite.styl")

// Plugins
// @import 'plugin-name/plugin-style.css'
// @import 'plugin-name/plugin-style.styl'

// Modules
@import "../../modules/**/!(_)*.styl"
// Modules
@import "_common"

Add if file exist check for icons-template.styl

@import "core/variables" // System variables
@import "_variables" // Project variables
@import "core/mixins" // System mixins
@import "_mixins" // Project mixins

// Svg icons
@import "../../../tmp/icons-template.styl" if file-exists("../../../tmp/icons-template.styl")

// Png sprites
@import "../../../tmp/sprite.styl" if file-exists("../../../tmp/sprite.styl")

// Plugins
// @import 'plugin-name/plugin-style.css'
// @import 'plugin-name/plugin-style.styl'

// Modules
@import "../../modules/**/!(_)*.styl"
@import "_common"


.g-user-list-entry
  padding 11px 14px
  margin 2px 0
  border-radius 3px
  background-color #fafafc
  border 1px solid #eaeaea
  box-shadow inset 0 0 2px 2px #f4f4f4

  .g-user-title
    font-size 17px

  .g-user-login
    color #666
    font-size 16px
    font-weight bold

  .g-space-used
    margin-top 2px

  .g-user-status
    margin-top 2px
    color #d9534f

  .g-user-right-column
    border-left 1px solid #ddd
    padding-left 8px
    display inline
    width 235px
    font-size 14px
    float right
    color #909090

  .g-user-joined-date, .g-user-space-used
    color #444

.g-user-list-header
  padding-bottom 10px

  .g-user-pagination
    display inline-block
    >ul
      margin 0 13px 0 0

    .pagination>li>a
      float none
      line-height 1.5
      padding 7px 12px

  .g-user-sort
    display inline-block

  .g-user-search-form
    display inline
    .form-group
      display inline-block

    input[type="text"]
      width 170px
      margin-right 13px

Add a small right margin to the userSort widget

.g-user-list-entry
  padding 11px 14px
  margin 2px 0
  border-radius 3px
  background-color #fafafc
  border 1px solid #eaeaea
  box-shadow inset 0 0 2px 2px #f4f4f4

  .g-user-title
    font-size 17px

  .g-user-login
    color #666
    font-size 16px
    font-weight bold

  .g-space-used
    margin-top 2px

  .g-user-status
    margin-top 2px
    color #d9534f

  .g-user-right-column
    border-left 1px solid #ddd
    padding-left 8px
    display inline
    width 235px
    font-size 14px
    float right
    color #909090

  .g-user-joined-date, .g-user-space-used
    color #444

.g-user-list-header
  padding-bottom 10px

  .g-user-pagination
    display inline-block
    >ul
      margin 0 13px 0 0

    .pagination>li>a
      float none
      line-height 1.5
      padding 7px 12px

  .g-user-sort
    display inline-block
    margin-right: 12px

  .g-user-search-form
    display inline
    .form-group
      display inline-block

    input[type="text"]
      width 170px
      margin-right 13px


.pagebar
  margin 7px 0 -3px
  display flex
  justify-content center
  font-size 0.8rem
  z-index 100

  .page
    padding 0 5px
    transition-property color, opacity
    transition-duration @transition-duration

    &:not(.current)
      opacity 0.5

    &.dummy
      visibility hidden

    .fa-circle-o-notch
      font-size 0.9em

    &.page-enter
      opacity 0

    &.page-leave-active
      position absolute

    &.page-move
      transition-property transform
      transition-duration @transition-duration

Make page bar feel better

.pagebar
  margin 7px 0 -3px
  display flex
  justify-content center
  font-size 0.8rem
  z-index 100

  .page
    padding 0 5px
    transition-property color, opacity, transform
    transition-duration @transition-duration

    &:not(.current)
      opacity 0.5

    &.dummy
      visibility hidden

    .fa-circle-o-notch
      font-size 0.9em

    &.page-enter
      opacity 0

    &.page-leave-active
      position absolute


.channel-filter
  width 100%
  position relative
  padding-right 20px

  input.input--wide
    padding-left 50px
    margin 0 (unit / 2)

  input:focus
    background backgroundgray

  &__status
    position absolute
    height 100%
    width 50px
    left 10px
    top 0
    display flex
    align-items center
    justify-content center

    &__icon
      svg
        height 20px
        width 20px

        .iconic-magnifying-glass-lg
          display none

        .iconic-magnifying-glass-md
          display none

        .iconic-magnifying-glass-sm
          display inline

        & *
          stroke lightgray
          fill lightgray

    &__close
      font-size 31px
      display none
      color lightgray
      cursor pointer
      &:hover
        color textgray

  &--list
    font-size 13px
    border-bottom 1px dotted bordergray
    .form__field__channel-filter__icon
      padding 18px
      svg
        height 15px

  &--grid
    margin-bottom unit

  &.is-active
    .channel-filter__status__close
      display block
    .channel-filter__status__icon
      display none

Fix padding on channel filter

.channel-filter
  width 100%
  position relative

  input.input--wide
    padding-left 50px
    margin 0 (unit / 2)
    background white

  input:focus
    background backgroundgray

  &__status
    position absolute
    height 100%
    width 50px
    left 10px
    top 0
    display flex
    align-items center
    justify-content center

    &__icon
      svg
        height 20px
        width 20px

        .iconic-magnifying-glass-lg
          display none

        .iconic-magnifying-glass-md
          display none

        .iconic-magnifying-glass-sm
          display inline

        & *
          stroke lightgray
          fill lightgray

    &__close
      font-size 31px
      display none
      color lightgray
      cursor pointer
      &:hover
        color textgray

  &--list
    font-size 13px
    border-bottom 1px dotted bordergray
    input.input--wide
      margin 0
    .channel-filter__status
      left 0

  &--grid
    padding-right 20px
    margin-bottom unit

  &.is-active
    .channel-filter__status__close
      display block
    .channel-filter__status__icon
      display none


.current-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.current-weather
		background: rgba(160, 158, 151, 0.7)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 350pxs
		height: 350px
		font-size: 1.6rem
		font-family: cursive
		position: absolute
		top: 60%
		left: 50%
		transform: translate(-50%, -50%)
		text-align: center
		color: #ccc
		span
			display: block
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
		.condition-text
			margin-top: -9px
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Update style of current weather container

.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.7)
		box-shadow: 4px 0 25px 3px rgba(0, 0, 0, 0.1)
		border-radius: 50%
		width: 350px
		height: 350px
		font-size: 1.6rem
		font-family: cursive
		color: #ccc
		.city-name
			margin-bottom: 8px
			font-size: 1.8rem
	.button-container
		margin-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex


// vars

// blocks
browser-warning-block             := {
  display                         : none
}

browser-warning-visible-block     := {
  margin-top                      : 0
  color                           : $base3
  background                      : lightness($red, 20%)
  display                         : block
  padding                         : 1em
  width                           : 100%
  top                             : 0
  z-index                         : 10000
}

// rules
.browser-warning
  {browser-warning-block}

.lt-ie9 .browser-warning
  position                        : fixed
  {browser-warning-visible-block}

Hide main element on lt-ie9 class.

// vars

// blocks
browser-warning-block             := {
  display                         : none
}

browser-warning-visible-block     := {
  margin-top                      : 0
  color                           : $base3
  background                      : lightness($red, 20%)
  display                         : block
  padding                         : 1em
  width                           : 100%
  top                             : 0
  z-index                         : 10000
}

// rules
.browser-warning
  {browser-warning-block}

.lt-ie9
  .browser-warning
    position                        : fixed
    {browser-warning-visible-block}
  main
    display                         : none


.mac-tag-autocomplete
  position   relative
  display    inline-block
  border     1px solid #aaaaaa
  background #ffffff
  margin     0
  padding    0

  .tag-list
    margin 0px

    .tag
      padding       3px 20px 3px 5px
      margin        3px
      position      relative
      display       inline-block
      list-style    none
      font-size     13px
      line-height   13px
      border-radius 3px

      &.label
        background  linear-gradient(top,#eaf0ff,#dee8ff)
        border      1px solid #bfc9e1
        text-shadow none
        color       #000
        font-weight normal
        box-shadow  0px 0px 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05)

      .tag-close
        position absolute
        right    6px
        color    #9da6b7
        cursor   pointer

      &.input-tag
        white-space nowrap
        padding     0

        .text-input
          color      #666
          background transparent
          padding    5px
          margin     0px
          border     none !important
          box-shadow none

        &.fullwidth
          width 100%

          .text-input
            width 90%

Remove left padding in tag list

.mac-tag-autocomplete
  position   relative
  display    inline-block
  border     1px solid #aaaaaa
  background #ffffff
  margin     0
  padding    0

  .tag-list
    margin       0px
    padding-left 0px

    .tag
      padding       3px 20px 3px 5px
      margin        3px
      position      relative
      display       inline-block
      list-style    none
      font-size     13px
      line-height   13px
      border-radius 3px

      &.label
        background  linear-gradient(top,#eaf0ff,#dee8ff)
        border      1px solid #bfc9e1
        text-shadow none
        color       #000
        font-weight normal
        box-shadow  0px 0px 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05)

      .tag-close
        position absolute
        right    6px
        color    #9da6b7
        cursor   pointer

      &.input-tag
        white-space nowrap
        padding     0

        .text-input
          color      #666
          background transparent
          padding    5px
          margin     0px
          border     none !important
          box-shadow none

        &.fullwidth
          width 100%

          .text-input
            width 90%


// Replace "Nodeca" text in navbar with logo.svg
//

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

.navbar-brand
  background-image url('$$ JSON.stringify("data:image/svg+xml;base64," + new Buffer(asset_body("rcd-nodeca/client/common/rcd_logo/logo.svg")).toString("base64")) $$')
  background-repeat no-repeat
  background-size auto 25px
  background-position 0 6px

  width 136px
  margin-right 1rem !important

  // hide text, but still make it available for screen readers and such;
  // avoid text appearing when user highlights it
  text-indent -1000px

Fix logo link outline on click

// Replace "Nodeca" text in navbar with logo.svg
//

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

.navbar-brand
  background-image url('$$ JSON.stringify("data:image/svg+xml;base64," + new Buffer(asset_body("rcd-nodeca/client/common/rcd_logo/logo.svg")).toString("base64")) $$')
  background-repeat no-repeat
  background-size auto 25px
  background-position 0 6px

  width 136px
  margin-right 1rem !important

  // hide text, but still make it available for screen readers and such;
  // avoid text appearing when user highlights it
  text-indent -1000px
  overflow hidden   // needed for correct link outline


.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
	.button-container
		margin: 30px 0
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex

Fix current weather container for mobile version

.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
	.button-container
		margin: 30px 0
		.btn
			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


@import 'cozy-ui'

.pho-wrapper
    @extend    $app-2panes-sticky

.pho-content
    top-padded(30px)

    @media (max-width: (768/basefont)rem)
        top-padded(10px)

Fix responsive margin before topbar

@import 'cozy-ui'

.pho-wrapper
    @extend    $app-2panes-sticky

.pho-content
    top-padded(30px)

    @media (max-width: (480/basefont)rem)
        top-padded(10px)


@require '../_variables.styl';

.tabs
  position fixed
  top auto
  right 0
  left 0
  bottom 0
  z-index 10
  display block
  width 100%
  height tab-height
  background-color tab-background-color
  backface-visibility hidden
  padding 0

  .tab-items
    display flex
    align-items center
    justify-content center

    .tab-item
      position relative
      white-space nowrap
      text-overflow ellipsis

      overflow hidden

      flex-basis 100%
      width 100%

      height tab-height
      line-height tab-height
      color primary
      text-align center
      text-transform uppercase
      vertical-align middle
      padding 0
      margin 0

      .icon
        position relative
        top 3px
        width tab-icon-size
        height tab-icon-size
        vertical-align middle
        padding 0
        margin 0

  .tab-indicator
    width 50%
    position absolute
    z-index 11
    top auto
    left 0
    right 0
    margin-top auto
    margin-bottom -(tab-indicator-height)
    height tab-indicator-height
    background-color tab-indicator-color

    translate-3d(0, 0, 0)

    webkit-transform-one(300ms)

.header-tabs
  top auto
  bottom 0

  .tab-indicator
    margin-top -(tab-indicator-height)
    margin-bottom auto

Fix tab width in JellyBean

@require '../_variables.styl';

.tabs
  position fixed
  top auto
  right 0
  left 0
  bottom 0
  z-index 10
  display block
  width 100%
  height tab-height
  background-color tab-background-color
  backface-visibility hidden
  padding 0

  .tab-items
    display flex
    box-orient horizontal

    .tab-item
      display flex

      flex-basis 100%
      flex-grow 1

      align-items center
      justify-content center

      height tab-height
      line-height tab-height

      white-space nowrap
      text-overflow ellipsis

      overflow hidden

      color primary
      text-align center
      text-transform uppercase
      vertical-align middle
      padding 0
      margin 0

      .icon
        position relative
        top 3px
        width tab-icon-size
        height tab-icon-size
        vertical-align middle
        text-align center
        padding 0
        margin 0

  .tab-indicator
    width 50%
    position absolute
    z-index 11
    top auto
    left 0
    right 0
    margin-top auto
    margin-bottom -(tab-indicator-height)
    height tab-indicator-height
    background-color tab-indicator-color

    translate-3d(0, 0, 0)

    webkit-transform-one(300ms)

.header-tabs
  top auto
  bottom 0

  .tab-indicator
    margin-top -(tab-indicator-height)
    margin-bottom auto


// @stylint off
@import url("~clusterize.js/clusterize.css");
// @stylint on

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

    .tree-selected.tree-item,
    .tree-selected.tree-item:hover {
        background: #deecfd;
        border: 1px solid #0066cc;
    }
    .tree-item {
        border: 1px solid transparent;
        cursor: pointer;
        user-select: none;
    }
    .tree-item:hover {
        background: #f2fdff;
    }
    .tree-toggler {
    }
    .tree-title {
    }
}

Add infinite-tree-no-data class for empty data

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

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


.breadcrumb-arrow
  padding: 0

  li
    margin-left: -4px

    &:first-child
      margin-left: 0

    + li:before
      content: none

    a
      color: #fff
      background-color: $brand-primary
      transition: background-color .2s

    &.active a
      color: $breadcrumb-color
      background-color: transparent

    a, span
      display: inline-block
      padding $breadcrumb-padding-vertical $breadcrumb-padding-horizontal
      padding-left: 20px

    a
      position: relative
      z-index: auto

      &:after, &:before
        position: absolute
        top:    0
        width:  0
        height: 0
        content: ''
        border-top:    18px solid transparent
        border-bottom: 18px solid transparent
        transform: none
        left: auto !important
        background-color: transparent !important

      &:before
        right: -10px
        z-index: 3
        border-left-color: $brand-primary
        border-left-style: solid
        border-left-width: 11px
        transition: border-left-color .2s

      &:after
        right: -11px
        z-index: 2
        border-left: 11px solid darken($brand-primary, 20%)

      &:hover
        background-color: lighten($brand-primary, 20%)

        &:before
          border-left-color: lighten($brand-primary, 20%)

Add overflow:hidden so the item backgrounds don't overflow the container

.breadcrumb-arrow
  padding: 0
  overflow: hidden

  li
    margin-left: -4px

    &:first-child
      margin-left: 0

    + li:before
      content: none

    a
      color: #fff
      background-color: $brand-primary
      transition: background-color .2s

    &.active a
      color: $breadcrumb-color
      background-color: transparent

    a, span
      display: inline-block
      padding $breadcrumb-padding-vertical $breadcrumb-padding-horizontal
      padding-left: 20px

    a
      position: relative
      z-index: auto

      &:after, &:before
        position: absolute
        top:    0
        width:  0
        height: 0
        content: ''
        border-top:    18px solid transparent
        border-bottom: 18px solid transparent
        transform: none
        left: auto !important
        background-color: transparent !important

      &:before
        right: -10px
        z-index: 3
        border-left-color: $brand-primary
        border-left-style: solid
        border-left-width: 11px
        transition: border-left-color .2s

      &:after
        right: -11px
        z-index: 2
        border-left: 11px solid darken($brand-primary, 20%)

      &:hover
        background-color: lighten($brand-primary, 20%)

        &:before
          border-left-color: lighten($brand-primary, 20%)


col( size = false )
    unless size
        size = ks-grid-config[ "columns" ]
    display inline-block
    float left
    overflow hidden
    width: round( ks-grid-config[ "total-width" ] * ( ( ( ( ks-grid-config[ "gutter-width" ] + ks-grid-config[ "column-width" ] ) * size ) - ks-grid-config[ "gutter-width" ] ) / ks-grid-config[ "computed-total-width" ] ), 5 )
    margin: 0 round( ks-grid-config[ "total-width" ] * ( ( ks-grid-config[ "gutter-width" ] * .5 ) / ks-grid-config[ "computed-total-width" ] ), 5 )

Add fluid grid system support in col mixin

col( size = false )
    unless size
        size = ks-grid-config[ "columns" ]
    display inline-block
    float left
    overflow hidden
    if ks-grid-config[ "type" ] == "fixed"
        width: round( ks-grid-config[ "total-width" ] * ( ( ( ( ks-grid-config[ "gutter-width" ] + ks-grid-config[ "column-width" ] ) * size ) - ks-grid-config[ "gutter-width" ] ) / ks-grid-config[ "computed-total-width" ] ), 5 )
        margin: 0 round( ks-grid-config[ "total-width" ] * ( ( ks-grid-config[ "gutter-width" ] * .5 ) / ks-grid-config[ "computed-total-width" ] ), 5 )
    if ks-grid-config[ "type" ] == "fluid"
        _total = unit( ks-grid-config[ "total-width" ], "" )
        _col = unit( ks-grid-config[ "column-width" ], "" )
        _gut = unit( ks-grid-config[ "gutter-width" ], "" )
        _comp = unit( ks-grid-config[ "computed-total-width" ], "" )
        width: unit( _total * ( ( ( ( _gut + _col ) * size ) - _gut ) / _comp ), "%" )
        margin: 0 unit( _total * ( ( _gut * .5 ) / _comp ), "%" )


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

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

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

Hide announcements in zen mode

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

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

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

&.zen .Announcements {
    display: none;
}


.profile-view
  width 800px
  margin 0 auto
  display flex

  .profile-left-bar
    width 200px

    img
      width 200px
      border-radius 7px
      margin-bottom 10px

  .profile-names
    padding-bottom 20px
    margin-bottom 20px
    border-bottom 1px solid $borderColor

    span
      display block

      &.full-name
        font-weight bold
        font-size 23px
        margin-bottom 10px
      &.username
        font-size 20px
        font-weight 200
        color $mediumTextColor

  .gistbook-count
    padding-bottom 20px
    margin-bottom 20px
    border-bottom 1px solid $borderColor
    color $lightTextColor

    span
      font-weight bold
      font-size 28px
      color $textColor

  .profile-list
    flex 1
    margin-right 30px

  .gistbook-title
    flex 1

  .gists-container

    .notification
      margin-top 20px

  .gistbook-list
    height 40px
    line-height 40px
    display flex
    border-bottom 1px solid $borderColor
    padding 0 10px

    ul
      align-self flex-end

    a
      font-weight bold
      color $hoverLinkColor

    .octicon
      color $lightTextColor

    .octicon-trashcan
      cursor pointer

Fix margin on profile page notification.

.profile-view
  width 800px
  margin 0 auto
  display flex

  .profile-left-bar
    width 200px

    img
      width 200px
      border-radius 7px
      margin-bottom 10px

  .profile-names
    padding-bottom 20px
    margin-bottom 20px
    border-bottom 1px solid $borderColor

    span
      display block

      &.full-name
        font-weight bold
        font-size 23px
        margin-bottom 10px
      &.username
        font-size 20px
        font-weight 200
        color $mediumTextColor

  .gistbook-count
    padding-bottom 20px
    margin-bottom 20px
    border-bottom 1px solid $borderColor
    color $lightTextColor

    span
      font-weight bold
      font-size 28px
      color $textColor

  .profile-list
    flex 1
    margin-right 30px

  .gistbook-title
    flex 1

  .notification
    margin-top 20px

  .gistbook-list
    height 40px
    line-height 40px
    display flex
    border-bottom 1px solid $borderColor
    padding 0 10px

    ul
      align-self flex-end

    a
      font-weight bold
      color $hoverLinkColor

    .octicon
      color $lightTextColor

    .octicon-trashcan
      cursor pointer


.dashboard
  > header
    text-align left
    display flex
    align-items center
    padding 60px 0 0 0

    h1
      color #A0A0A0
      font-weight 300
      font-size 50px
      flex 1
      margin-bottom 0

    + .course,
    + h2
      margin-top 60px

  h2
    font-size 30px
    font-weight 300
    color #A0A0A0

  .button
    margin-left 0
    .icon
      vertical-align middle
      margin-left 12px
      font-size 15px
    &.stacked
      margin-top 10px

  .empty-state
    margin-top 18px
    max-width 600px
    font-size 19px

    p
      margin-bottom 8px

    p.small
      font-size 15px

    .button
      margin-top 18px
      margin-bottom 18px

  #user_courses
    margin-bottom 60px
    background #fff
    border 1px solid $border_lt
    box-shadow 0px 1px 2px rgba(0,0,0,.1)

    .table tr
      border-right none
      border-left none

    .empty
      text-align center

Remove custom css for icon button on dashboard

.dashboard
  > header
    text-align left
    display flex
    align-items center
    padding 60px 0 0 0

    h1
      color #A0A0A0
      font-weight 300
      font-size 50px
      flex 1
      margin-bottom 0

    + .course,
    + h2
      margin-top 60px

  h2
    font-size 30px
    font-weight 300
    color #A0A0A0

  .button
    margin-left 0
    &.stacked
      margin-top 10px

  .empty-state
    margin-top 18px
    max-width 600px
    font-size 19px

    p
      margin-bottom 8px

    p.small
      font-size 15px

    .button
      margin-top 18px
      margin-bottom 18px

  #user_courses
    margin-bottom 60px
    background #fff
    border 1px solid $border_lt
    box-shadow 0px 1px 2px rgba(0,0,0,.1)

    .table tr
      border-right none
      border-left none

    .empty
      text-align center