@import colors

.subhead h1

    @media (min-width: 767px)
        position relative
        padding-right 400px

    .header-actions
        font-size 0
        margin 15px 0 10px
        display block

        @media (min-width: 767px)
            position absolute
            top 0
            right 0
            width 400px
            text-align right
            margin 0

        a
            background $linkBlue
            display inline-block
            padding 9px 11px
            color inherit
            font-size 15px
            text-decoration none
            color #fff
            border-radius 5px
            white-space nowrap
            font-weight normal
            margin 0 14px 0 0

            @media (min-width: 767px)
                margin 0 0 0 14px

            &[data-action="viewObjectJSON"]
                background #eee
                color #888

            &[data-action="remove"]
                background $removeRed
                color #fff

Add bottom margin to header actions

@import colors

.subhead h1

    @media (min-width: 767px)
        position relative
        padding-right 400px

    .header-actions
        font-size 0
        margin 15px 0 10px
        display block

        @media (min-width: 767px)
            position absolute
            top 0
            right 0
            width 400px
            text-align right
            margin 0

        a
            background $linkBlue
            display inline-block
            padding 9px 11px
            color inherit
            font-size 15px
            text-decoration none
            color #fff
            border-radius 5px
            white-space nowrap
            font-weight normal
            margin 0 14px 7px 0

            @media (min-width: 767px)
                margin 0 0 0 14px

            &[data-action="viewObjectJSON"]
                background #eee
                color #888

            &[data-action="remove"]
                background $removeRed
                color #fff


.create-board {
  &.is-creating {
    .create-board-form {
      display: block;
    }

    .create-board-actions {
      display: none;
    }
  }

  .create-board-form {
    display: none;
  }
}

Fix “Create board” button icon positioning.

.create-board {
  &.is-creating {
    .create-board-form {
      display: block;
    }

    .create-board-actions {
      display: none;
    }
  }

  .create-board-form {
    display: none;
  }

  .icon-add {
    margin-right: 2px;
    top: 0px;
    vertical-align: bottom;
  }
}


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

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

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

.password-description
    color cozy-grey

.unstyled-link
    text-decoration none
    color inherit

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

.cozy-blue
    color cozy-blue

div.password-modal-content
    overflow visible

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

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

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

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

Add ability to view fontawesome icons on production

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

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

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

.password-description
    color cozy-grey

.unstyled-link
    text-decoration none
    color inherit

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

.cozy-blue
    color cozy-blue

div.password-modal-content
    overflow visible

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

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

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

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


body
	padding-top 70px

.mangas
	display inline-block
	padding 0 15px 0 15px

@media (max-width: 767px)
	.mangas
		a
			img
				width 220px
				height 338px
@media (min-width: 768px)
	.mangas
		a
			img
				width 226px
				height 328px
@media (min-width: 992px)
	.mangas
		a
			img
				width 215px
				height 316px
@media (min-width: 1200px)
	.mangas
		a
			img
				width 200px
				height 307px

Add layout for the grid-item

body
	padding-top 70px

.mangas, .mangas-cover
	display inline-block
	padding 0 10px 0 10px

@media (max-width: 767px)
	.mangas.grid-item
		width 33%
	.mangas-cover.grid-item
		width 50%
@media (min-width: 768px)
	.mangas.grid-item
		width 25%
	.mangas-cover.grid-item
		width 33%
@media (min-width: 992px)
	.mangas.grid-item
		width 20%
	.mangas-cover.grid-item
		width 25%
@media (min-width: 1200px)
	.mangas.grid-item
		width 16%
	.mangas-cover.grid-item
		width 20%


@import '../../variables'

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

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

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

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

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

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

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

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

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

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

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

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

Fix cancel build button css

@import '../../variables'

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

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

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

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

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

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

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

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

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

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

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

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


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

.blogs-index__head
  display flex

.blogs-index__title
  flex 1 1 0%
  color $body-color-secondary
  font-size $font-size-lg

.blogs-index__loading-prev
.blogs-index__loading-next
  padding 2rem
  font-size 4rem
  line-height 1.1em
  text-align center
  background-color $body-bg-secondary
  color $body-color-secondary + 50%
  border-radius 4px
  margin-bottom 2rem

.blogs-index
  .blog-entry__m-deleted
  .blog-entry__m-hb
  .blog-entry__m-deleted-hard
  .blog-entry__m-ignored
    background-color $deleted-bg

Increase back blog intex title size

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

.blogs-index__head
  display flex

.blogs-index__title
  flex 1 1 0%
  color $body-color-secondary
  //font-size $font-size-lg

.blogs-index__loading-prev
.blogs-index__loading-next
  padding 2rem
  font-size 4rem
  line-height 1.1em
  text-align center
  background-color $body-bg-secondary
  color $body-color-secondary + 50%
  border-radius 4px
  margin-bottom 2rem

.blogs-index
  .blog-entry__m-deleted
  .blog-entry__m-hb
  .blog-entry__m-deleted-hard
  .blog-entry__m-ignored
    background-color $deleted-bg


$block-caption
  text-decoration: none
  text-transform: uppercase
  letter-spacing: 2px
  color: color-grey
  margin-bottom: 1em
  margin-left: 5px
  line-height: 1em
  text-shadow: 0 1px #fff
  font-weight: bold

$block
  background: #fff
  box-shadow: 1px 2px 3px #ddd
  border: 1px solid color-border
  border-radius: 3px

$base-style
  h1
    font-size: 2em
  h2
    font-size: 1.5em
  h3
    font-size: 1.3em
  h4
    font-size: 1.2em
  h5
    font-size: 1em
  h6
    font-size: 1em
    color: color-grey
  hr
    border: 1px dashed color-border
  strong
    font-weight: bold
  em, cite
    font-style: italic
  sup, sub
    font-size: 0.75em
    line-height: 0
    position: relative
    vertical-align: baseline
  sup
    top: -0.5em
  sub
    bottom: -0.2em
  small
    font-size: 0.85em
  acronym, abbr
    border-bottom: 1px dotted
  ul, ol, dl
    margin: 0 20px
    line-height: line-height
  ul, ol
    ul, ol
      margin-top: 0
      margin-bottom: 0
  ul
    list-style: disc
  ol
    list-style: decimal
  dt
    font-weight: bold

Fix Heveltica bold +1px problem

$block-caption
  text-decoration: none
  text-transform: uppercase
  letter-spacing: 2px
  color: color-grey
  margin-bottom: 1em
  margin-left: 5px
  line-height: 1em
  text-shadow: 0 1px #fff

$block
  background: #fff
  box-shadow: 1px 2px 3px #ddd
  border: 1px solid color-border
  border-radius: 3px

$base-style
  h1
    font-size: 2em
  h2
    font-size: 1.5em
  h3
    font-size: 1.3em
  h4
    font-size: 1.2em
  h5
    font-size: 1em
  h6
    font-size: 1em
    color: color-grey
  hr
    border: 1px dashed color-border
  strong
    font-weight: bold
  em, cite
    font-style: italic
  sup, sub
    font-size: 0.75em
    line-height: 0
    position: relative
    vertical-align: baseline
  sup
    top: -0.5em
  sub
    bottom: -0.2em
  small
    font-size: 0.85em
  acronym, abbr
    border-bottom: 1px dotted
  ul, ol, dl
    margin: 0 20px
    line-height: line-height
  ul, ol
    ul, ol
      margin-top: 0
      margin-bottom: 0
  ul
    list-style: disc
  ol
    list-style: decimal
  dt
    font-weight: bold


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

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

  h3
    margin 0

  .versions
    margin 0
    padding 0

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

      &:first-child
        margin-left 0

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

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

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

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

Fix worker grid on smaller screens

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

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

  h3
    margin 0

  .versions
    margin 0
    padding 0

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

      &:first-child
        margin-left 0

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

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

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

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

    &:after
      content ""
      clear both
      display block


@require '../../../node_modules/artsy-ezel-components/pagination'
@require '../components/fillwidth_row'
@require '../components/tooltips'
@require '../components/profile_badge'
@require '../components/artwork_item/stylesheets'
@require '../components/artist_fillwidth_list'
@require '../components/artist_cell'
@require '../components/show_cell'
@require '../components/bordered_pulldown'
@require '../components/grid'
@require '../components/artwork_columns'
@require '../components/artwork_filter_2'
@require '../components/related_links'
@require '../components/filterable_list'
@require '../components/featured_shows'
@require '../components/zig_zag_banner'
@require '../components/cta_bar'
@require '../components/artist_page_cta'
@require '../components/jump'
@require '../components/artwork_rail/stylesheets'
@require '../components/article/stylesheets'
@require '../components/eoy_artist_list'
@require '../components/filter2'
@require '../components/a_to_z_list'
@require '../components/embedded_inquiry'
@require '../components/inquiry_questionnaire/stylesheets'
@require '../apps/inquiry/stylesheets'
@require '../apps/artists'
@require '../apps/artwork/stylesheets'

Remove reference to non existent old artwork CSS


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

.btn + .btn
  margin-left .4rem

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

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

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

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

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

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

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

.nav-tabs
  border-bottom unset !important

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

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

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

Move underlined tabs definition to separate style

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

.btn + .btn
  margin-left .4rem

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

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

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

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

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

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

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

// Additional tabs style
.nav-tabs-underlined
  .nav-link
    padding .5em .5em
    border-bottom 3px solid transparent

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

  .nav-link + .nav-link
    margin-left .7em


@import nib

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

  .image-viewer
    border 1px solid #f0f0f0
    width 100%
    height 600px
    -webkit-touch-callout none
    user-select none

    &:focus
      outline none

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

Use a webpack compatible import statement for nib

@import '~nib/index.styl'

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

  .image-viewer
    border 1px solid #f0f0f0
    width 100%
    height 600px
    -webkit-touch-callout none
    user-select none

    &:focus
      outline none

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


@require '../tabs'

.artwork-additional-info
  //
  &__content
    //
    &__articles
      //

  &__article
    display table
    width 75%
    block-margins(gutter / 2)
    text-decoration none

    &__image
    &__metadata
      display table-cell
      vertical-align middle

    &__metadata
      padding-left (gutter / 2)
      width 100%

      &__context
      &__author
        sans('s-headline')
        line-height 1

      &__title
        serif('s-body')
        line-height 1.25 // compact-line-height
        margin (gutter / 3) 0

      &__author
        color gray-darker-color

Tweak articles margin when with other information

@require '../tabs'

.artwork-additional-info
  //
  &__content
    //
    &__articles
      //

    p + &__articles
      margin-top gutter

  &__article
    display table
    width 75%
    block-margins(gutter / 2)
    text-decoration none

    &__image
    &__metadata
      display table-cell
      vertical-align middle

    &__metadata
      padding-left (gutter / 2)
      width 100%

      &__context
      &__author
        sans('s-headline')
        line-height 1

      &__title
        serif('s-body')
        line-height 1.25 // compact-line-height
        margin (gutter / 3) 0

      &__author
        color gray-darker-color


#columnContainer

	width: 400px
	height: 100%
	float: left
	background: white

	#columnTopContainer

		position: relative

		#columnTop

			width: 100%
			height: 40px
			position: absolute
			z-index: 10

			core-icon
				margin: 10px 5px 10px 10px
				float: left
				fill: white

			#columnLabel
				width: calc(100% - 80px)
				float: left
				font-family: "Montserrat"
				font-weight: normal
				font-size: 14pt
				color: white
				text-transform: uppercase
				line-height: 40px

		#columnShadow
			width: 100%
			height: 40px
			position: absolute
			z-index: 5

	#column
		width: 100%
		height: calc(100% - 40px - 5px)
		margin-top: 40px
		padding-top: 5px
		overflow-y: scroll
		overflow-x: hidden

Remove linebreaks, edit several minor styles

@import '../../styles/global'

#columnContainer
	width: 400px
	height: 100%
	float: left
	background: white

	#columnTopContainer
		position: relative
		top: -40px

		#columnTop
			width: 100%
			height: 40px
			position: absolute
			z-index: 10

			core-icon
				width: 20px
				height: 20px
				margin: 10px 5px 10px 10px
				float: left
				color: white
				fill: white

			#columnLabel
				width: calc(100% - 80px)
				float: left
				font-family: "Montserrat"
				font-weight: normal
				font-size: 14pt
				color: white
				text-transform: uppercase
				line-height: 40px

		.facebook
			background: fbAccent

		.twitter
			background: twitterAccent

		.instagram
			background: instaAccent

		#columnShadow
			width: 100%
			height: 40px
			position: absolute
			z-index: 5

	#column
		width: 100%
		height: 100%
		padding-top: 5px
		overflow-y: scroll
		overflow-x: hidden


@import 'defs/colors'

header
	header-height = 75px
	item-height = 52px

	background color_text_lighter
	display block
	position fixed
	z-index 1
	width 100%
	height header-height
	line-height header-height

	.logo
		margin 0 1em
		display block
		float left

		img
			margin-top ( ( header-height - item-height ) / 2 )

	nav
		float right
		margin 0 1em 0 0

		ul
			li
				display inline-block
				vertical-align middle

				a
					color color_text_medium !important
					padding 0 1em
					height 48px
					line-height 48px
					display block

					&.button
						button()

Add top padding at the body

@import 'defs/colors'

header-height = 75px

body
	padding-top header-height

header
	item-height = 52px

	background color_text_lighter
	display block
	position fixed
	z-index 1
	width 100%
	height header-height
	line-height header-height

	.logo
		margin 0 1em
		display block
		float left

		img
			margin-top ( ( header-height - item-height ) / 2 )

	nav
		float right
		margin 0 1em 0 0

		ul
			li
				display inline-block
				vertical-align middle

				a
					color color_text_medium !important
					padding 0 1em
					height 48px
					line-height 48px
					display block

					&.button
						button()


.song
  bottom 0
  left 0
  // NOTE(steida): Overflow hidden prevents hidden menu to change page height.
  overflow hidden
  position absolute
  right 0
  top 0

  article
    // Pos abs ensures whole song tappable. Not only text.
    position absolute
    top 0
    bottom 0
    padding 1em
    text-align left
    white-space pre

    sup
      color #428BCA
      font-size 110%
      font-style italic
      font-weight bold
      letter-spacing 1px

  menu
    inline-block-container()
    background-color rgba(0, 0, 0, 0.7)
    bottom 0
    font-size 2rem
    left 0
    margin 0
    padding 0
    position absolute
    right 0
    transform translateY(0)
    transition all .5s

    &.este-hidden
      transform translateY(100%)
      background-color rgba(0, 0, 0, 0)

    > *, .touch-hover
      color #fff
      margin 0
      padding .625em 1em

Use new este stylus pos mixin. Pls bower update.

.song
  // NOTE(steida): Overflow hidden prevents hidden menu to show scrollbars.
  overflow hidden
  pos absolute 0 0 0 0

  article
    padding 1em
    text-align left
    white-space pre

    sup
      color #428BCA
      font-size 110%
      font-style italic
      font-weight bold
      letter-spacing 1px

  menu
    inline-block-container()
    background-color rgba(0, 0, 0, 0.7)
    font-size 2rem
    margin 0
    padding 0
    pos absolute auto 0 0 0
    transform translateY(0)
    transition all .5s

    &.este-hidden
      transform translateY(100%)
      background-color rgba(0, 0, 0, 0)

    > *, .touch-hover
      color #fff
      margin 0
      padding .625em 1em


// Common markup styles for all messages

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

.markup
  font-family sansWideFontFamily

  // Avoid layout width break by long strings
  overflow auto

  // External images
  .image
    max-width 100%
    display inline-block
    border-radius 2px
    position relative

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

  .image__spacer
    display block

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

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

  pre code
    white-space unset

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

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

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

Make hidden 1x1 external images visible

// Common markup styles for all messages

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

.markup
  font-family sansWideFontFamily

  // Avoid layout width break by long strings
  overflow auto

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

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

  .image__spacer
    display block

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

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

  pre code
    white-space unset

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

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

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


*,
*:before,
*:after
	box-sizing border-box
	-webkit-text-size-adjust 100%
	-moz-text-size-adjust 100%
	-ms-text-size-adjust 100%
	text-size-adjust 100%

html, body
	height 100%
	overflow hidden

body, button
	font-family sans-serif
	font-weight 400
	font-size 16px
	color #333333

#app
	display flex
	min-height 100%
	position relative

#app > .layout
	flex auto

Allow scrolling of content (typical aps)

*,
*:before,
*:after
	box-sizing border-box
	-webkit-text-size-adjust 100%
	-moz-text-size-adjust 100%
	-ms-text-size-adjust 100%
	text-size-adjust 100%

html, body
	height 100%

body, button
	font-family sans-serif
	font-weight 400
	font-size 16px
	color #333333

#app
	display flex
	min-height 100%
	position relative

#app > .layout
	flex auto


---

---
@import '_normalize'
@import '_base'
@import '_syntax-highlighting'
@import '_syntax'

Update stylus order for err troubleshoot

---

---
@import '_normalize'
@import '_base'
@import '_syntax'
@import '_syntax-highlighting'


.tooltip-inner
  max-width 350px

.popover
  z-index 20000
  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-arrow
  +below(3)
    top 0 !important

.tooltip
  &.in
    opacity .95
  $tooltip-BG-color = darken($primary, 20%)
  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

Remove tooltip arrow positioning on small screen

.tooltip-inner
  max-width 350px

.popover
  z-index 20000
  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
  &.in
    opacity .95
  $tooltip-BG-color = darken($primary, 20%)
  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


html
body
  padding: 0
  margin: 0

body
  -webkit-font-smoothing: antialiased
  position: relative

img
  border: 0

Add osx font smoothing for firefox too

html
body
  padding: 0
  margin: 0

body
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  position: relative

img
  border: 0


_scrollable-grid()
	white-space: nowrap

	.scrollable-grid-item
		display: inline-block
		float: none
		vertical-align: top

@media $media-xs
	.scrollable-grid-xs
		scrollable-x()
		_scrollable-grid()

@media $media-sm
	.scrollable-grid-sm
		scrollable-x()
		_scrollable-grid()

@media $media-mobile
	.scrollable-grid-mobile
		scrollable-x()
		_scrollable-grid()

Update scrollable grid to have a style that works on all screen sizes.

_scrollable-grid()
	white-space: nowrap

	.scrollable-grid-item
		display: inline-block
		float: none
		vertical-align: top

@media $media-xs
	.scrollable-grid-xs
		scrollable-x()
		_scrollable-grid()

@media $media-sm
	.scrollable-grid-sm
		scrollable-x()
		_scrollable-grid()

@media $media-mobile
	.scrollable-grid-mobile
		scrollable-x()
		_scrollable-grid()

.scrollable-grid
	scrollable-x()
	_scrollable-grid()


.histomicstk-body
  #g-app-header-container
    #h-navbar-brand
      font-size 25px
      font-weight 700
    .g-header-wrapper
      .h-image-menu-wrapper
        display inline
        float right
    z-index 1000
  @media (min-width: 768px)
    .navbar-right
      float none
      margin-right 0
      position absolute
      right 0
      white-space nowrap
      z-index 10
    .navbar-nav li
      float none
      display inline-block
    .navbar > .container-fluid .navbar-brand
      margin-left 0
  .navbar-header
    z-index 20
    background #f8f8f8
    float none
    position absolute
    left 0

Fix the layout of dropdown submenus

.histomicstk-body
  #g-app-header-container
    #h-navbar-brand
      font-size 25px
      font-weight 700
    .g-header-wrapper
      .h-image-menu-wrapper
        display inline
        float right
    z-index 1000
  @media (min-width: 768px)
    .navbar-right
      float none
      margin-right 0
      position absolute
      right 0
      white-space nowrap
      z-index 10
    .navbar-nav > li
      float none
      display inline-block
    .navbar > .container-fluid .navbar-brand
      margin-left 0
  .navbar-header
    z-index 20
    background #f8f8f8
    float none
    position absolute
    left 0


.image-view
  text-align center
  &__img
    max-width 100%
    max-height 100vh

.image-modal
  .modalize-backdrop
    background-color black
  .modalize-close
    opacity 1
    background-color rgba(255, 255, 255, 0.5)
    border-radius 40px
    margin 10px
    width 40px
    height 40px
    padding 0
    text-align center
    line-height 40px
    display block
    span
      vertical-align middle

Adjust x position for image view

.image-view
  text-align center
  &__img
    max-width 100%
    max-height 100vh

.image-modal
  .modalize-backdrop
    background-color black
  .modalize-close
    opacity 1
    background-color rgba(255, 255, 255, 0.5)
    border-radius 40px
    margin 10px
    width 40px
    height 40px
    padding 0
    text-align center
    line-height 42px
    display block
    span
      vertical-align middle


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

  .tooltip
    left -15%
    width 130%
    &:before
      left 50%

Fix typo in space-between css prop for 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-between
  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/7*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

  .tooltip
    left -15%
    width 130%
    &:before
      left 50%


*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		min-height: 100%
		display: flex
		justify-content: center
		align-items: center
		.app
			min-width: 970px
			height: 860px
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative

Insert visible box for logo and current weather

*
	box-sizing: border-box

html, body
	height: 100%
body
	background: #F9F7F4
	font-family: Arial, Helvetica, sans-serif
	cursor: default
	.app-container
		min-height: 100%
		display: flex
		justify-content: center
		align-items: center
		.app
			min-width: 970px
			height: 860px
			display: flex
			flex-direction: column
			align-items: center
			box-shadow: 0 2px 15px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
			background: url("../../images/main_background.jpg")
			background-size: cover
			position: relative
			.visible-box
				position: absolute
				top: 15%
				z-index: 1


html
  height: 100%

body
  margin: 0
  height: 100%
  font: 300 62.5%/1.5 baskerville, times
  text-align: center
  background: black
  color: white

.container
  margin: 0 auto

@media (max-width: 768px)
  .container
    padding: 1rem
  h1
    font-size: 3.2rem
  p,a
    font-size: 1.4rem
  a
    padding: 0.25rem 1rem

@media (min-width: 769px)
  .container
    width: 32rem
    position: relative
    top: 50%
    transform: translateY(-50%)
  h1
    font-size: 4.8rem
  p,a
    font-size: 1.6rem
  a
    padding: 0.5rem 2rem

h1
  margin: 0
  font-weight: 300

p
  margin: 0.5rem 0 2.5rem

a
  display: inline-block
  margin: 0 0.5rem 1rem
  color: black
  text-decoration: none
  color: white
  border: 0.2rem solid white

Fix centering of CEKTOP site

html
  height: 100%

body
  margin: 0
  height: 100%
  font: 300 62.5%/1.5 baskerville, times
  text-align: center
  background: black
  color: white

.container
  margin: 0 auto

@media (max-width: 768px)
  .container
    padding: 1rem
  h1
    font-size: 3.2rem
  p,a
    font-size: 1.4rem
  a
    padding: 0.25rem 1rem

@media (min-width: 769px)
  .container
    width: 32rem
    position: relative
    top: 50%
    -webkit-transform: translateY(-50%)
    transform: translateY(-50%)
  h1
    font-size: 4.8rem
  p,a
    font-size: 1.6rem
  a
    padding: 0.5rem 2rem

h1
  margin: 0
  font-weight: 300

p
  margin: 0.5rem 0 2.5rem

a
  display: inline-block
  margin: 0 0.5rem 1rem
  color: black
  text-decoration: none
  color: white
  border: 0.2rem solid white


.DropdownTapSurface
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color rgba(black, 0.25)
  z-index dropdown_z

+mobile()
  .Dropdown
    position fixed
    top topbar_h !important
    right 0 !important
    left 0 !important
    margin-top 0 !important
    width 100%
    height 'calc(100vh - %s)' % topbar_h
    overflow-y auto
    border-right none
    border-left none

    // Hide persistence hit area
    &:before
    // Hide outline-border
    &:after
      display none !important

    // Display when clicked
    &[data-active]
      display block !important
      z-index dropdown_z

  .DropdownHover
    // Hide pointer
    &:hover
      &:after
        display none

      // Disables hover display, we manually
      // trigger on clicks when touch
      > .Dropdown
        display none

Check for touch class when disabling hovers so we dont break tiny non-touch screens

.DropdownTapSurface
  position absolute
  top 0
  right 0
  bottom 0
  left 0
  background-color rgba(black, 0.25)
  z-index dropdown_z

+mobile()
  .Dropdown
    position fixed
    top topbar_h !important
    right 0 !important
    left 0 !important
    margin-top 0 !important
    width 100%
    height 'calc(100vh - %s)' % topbar_h
    overflow-y auto
    border-right none
    border-left none

    // Hide persistence hit area
    &:before
    // Hide outline-border
    &:after
      display none !important

    // Display when clicked
    &[data-active]
      display block !important
      z-index dropdown_z

  .DropdownHover
    // Hide pointer
    &:hover
      &:after
        display none

  // On touch devices, specifically
  .Body--touch
    .DropdownHover:hover
      // Disables hover display, we manually
      // trigger on clicks when touch
      > .Dropdown
        display none


@import '../../../bower_components/normalize-css/normalize.css'
@import '../../../bower_components/stylus-nib'
@import '../../../bower_components/este-library/este/css'

// From PhoneGap CSS.
// TODO(steida): Use more.
// TODO(steida): Clean and refactor.

*
  -webkit-tap-highlight-color rgba(0,0,0,0)

// // lvfha
// a, button
//   &:focus
//     outline solid 1px red
//   &:active
//     color inherit

.app
  padding 0 1em

form
  input, textarea
    border 0
    box-sizing border-box
    display block
    margin .625em 0
    width 100%
    &:focus
      outline none
  button
    display block

  textarea
    min-height 3em
    // http://stackoverflow.com/questions/588089/hiding-textarea-resize-handle-in-safari
    resize none

Normalize focusable elements outline effect.

@import '../../../bower_components/normalize-css/normalize.css'
@import '../../../bower_components/stylus-nib'
@import '../../../bower_components/este-library/este/css'

// From PhoneGap CSS.
// TODO(steida): Use more.
// TODO(steida): Clean and refactor.

*
  -webkit-tap-highlight-color rgba(0,0,0,0)

a
button
input
textarea
  transition all 0.3s ease-in-out
  outline none

  &:focus
    // background-color red
    opacity .9
    box-shadow 0 0 6px rgba(0, 0, 0, .3)

.app
  padding 0 1em

form
  input, textarea
    border 0
    box-sizing border-box
    display block
    margin .625em 0
    width 100%
    &:focus
      outline none
  button
    display block

  textarea
    min-height 3em
    // http://stackoverflow.com/questions/588089/hiding-textarea-resize-handle-in-safari
    resize none


.histomicstk-body
  .g-item-breadcrumb-container
    display inline-block
    padding-right 10px
    ol.breadcrumb
      background none

Allow selecting the image name.

.histomicstk-body
  .g-item-breadcrumb-container
    display inline-block
    padding-right 10px
    user-select text
    ol.breadcrumb
      background none


/**
 * Nav platform lists in headers should be scrollable horizontally and not wrap.
 */
@media $media-xs
	header nav.platform-list.inline > ul
	nav.platform-list.inline.scrollable-xs > ul
		scrollable-x()
		white-space: nowrap

		li
			float: none
			display: inline-block

Fix scrollable inline platform lists to take up full bleed on mobile.

/**
 * Nav platform lists in headers should be scrollable horizontally and not wrap.
 */
@media $media-xs
	header nav.platform-list.inline
	nav.platform-list.inline.scrollable-xs
		@extend .full-bleed-xs

		> ul
			scrollable-x()
			white-space: nowrap
			padding-left: ($grid-gutter-width-xs / 2)
			padding-right: ($grid-gutter-width-xs / 2)

			li
				float: none
				display: inline-block


// copy pasted from cozy-ui

.coz-form-toggle
  .toggle
      display block
      width   40px
      height  24px
      float right
      margin .5em 1em

  .checkbox
      display none

  .label
      position      relative
      display       inline-block
      width         100%
      height        100%
      border-radius 1em
      background    silver
      transition    all .2s ease-out

      // added, unlinke other app cozy-desktop is not
      // full border-box.
      box-sizing: border-box;

  .label:before
      position      absolute
      top           0
      bottom        0
      left          2px
      display       inline-block
      width         20px
      height        20px
      margin        auto
      border-radius 50%
      content       ''
      background    white
      transition    all .2s ease-out

  .checkbox:checked + .label
      background emerald

      &:before
        left 18px

Use pointer cursor for AutoLaunch toggle

// copy pasted from cozy-ui

.coz-form-toggle
  .toggle
      display block
      width   40px
      height  24px
      float right
      margin .5em 1em

  .checkbox
      display none

  .label
      position      relative
      display       inline-block
      width         100%
      height        100%
      border-radius 1em
      background    silver
      transition    all .2s ease-out
      cursor        pointer

      // added, unlinke other app cozy-desktop is not
      // full border-box.
      box-sizing: border-box;

  .label:before
      position      absolute
      top           0
      bottom        0
      left          2px
      display       inline-block
      width         20px
      height        20px
      margin        auto
      border-radius 50%
      content       ''
      background    white
      transition    all .2s ease-out

  .checkbox:checked + .label
      background emerald

      &:before
        left 18px


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

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

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

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

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

Set max-width property to max-content

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

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

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

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

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


.list p
  margin 0 auto
  // letter-spacing .5px

.form-content
  font-family body-font
  font-size 18px
  line-height 1.166666
  letter-spacing 1.29px

.subtitle
  color white
  font-size 17px

.description
  col(3/5)
  text-align left
  padding-bottom 30px
  p
    color white

.course-link
  margin-top 15px
  a
    color suit
    &:hover
      color zircon

.red
  color burnt

Fix paragraph sizing inside of lists


@import '../../layouts/variables.styl'

header
  position: sticky
  text-bold()
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a
    color: inherit
    outline: none
    text-decoration: none
    &.placard-link
      img
        height: 2.65em
        width: 5.3em
    &:not(.placard-link)
      inline-block()
      padding: $default-padding
      &.active
        background-color: $primary-red

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

  ol
    background-color: $black
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      inline-block()
      ol
        left: 3em
        position: absolute
        right: 3em
        text-align: center

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

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

Set maximum height of the countries list to avoid missing countries in small divices. Guarantee that the list is scrollable.

@import '../../layouts/variables.styl'

header
  position: sticky
  text-bold()
  top: $default-padding * -1

nav
  background-color: $black
  color: $white
  padding-top: $default-padding
  a
    color: inherit
    outline: none
    text-decoration: none
    &.placard-link
      img
        height: 2.65em
        width: 5.3em
    &:not(.placard-link)
      inline-block()
      padding: $default-padding
      &.active
        background-color: $primary-red

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

  ol
    background-color: $black
    white-space: normal
    &.no-overflow-x
      overflow-x: hidden
      white-space: nowrap
    li
      inline-block()
      ol
        box-shadow: inset 0px -3px 10px 0px $primary-grey
        left: 3em
        max-height: 500%
        overflow-y: auto
        position: absolute
        right: 3em
        text-align: center

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

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


#intro-social img:hover {
    border-bottom: 1px solid var(--accent-color);
}
#intro-social img:active {
    border-bottom: 1px solid var(--secondary-color);
}
#splash-hack-cambridge-logo-object {
    --min-width: var(--two);
}

@media (max-width: 595pt) {
    #splash-hack-cambridge-logo-object {
        max-width: var(--two);
    }
}

#mlh-trust-badge {
    display: block;
    max-width: 100px;
    min-width: 60px;
    position: fixed;
    right: 50px;
    top: 0;
    width: 10%;
    z-index: 10000;

    img {
        width: 100%
    }
}

@media (max-width: 342pt) {
    div.container.width {
        margin: 0 calc(57 / 342 * 100vw);
    }
}

@media (pointer: coarse) {
    .submit {
        display: none;
    }
}

Remove arrow after MLH trust badge

#intro-social img:hover {
    border-bottom: 1px solid var(--accent-color);
}
#intro-social img:active {
    border-bottom: 1px solid var(--secondary-color);
}
#splash-hack-cambridge-logo-object {
    --min-width: var(--two);
}

@media (max-width: 595pt) {
    #splash-hack-cambridge-logo-object {
        max-width: var(--two);
    }
}

#mlh-trust-badge {
    display: block;
    max-width: 100px;
    min-width: 60px;
    position: fixed;
    right: 50px;
    top: 0;
    width: 10%;
    z-index: 10000;

    img {
        width: 100%
    }
}
#mlh-trust-badge::after {
    display: none;
}

@media (max-width: 342pt) {
    div.container.width {
        margin: 0 calc(57 / 342 * 100vw);
    }
}

@media (pointer: coarse) {
    .submit {
        display: none;
    }
}


.search-container
	text-align: center
	.input-container
		margin-top: 80px
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		margin: 60px auto 0
		width: fit-content
		.btn
			text-align: center

Fix search margin for desktop

.search-container
	text-align: center
	.input-container
		margin-top: 45px
		input[type=text]
			width: 360px
			padding: 10px
			border-radius: 4px
			border: 1px solid rgba(0,0,0,0)
			background: #ccc
			transition: all 0.3s
			box-shadow: 2px 2px 10px rgba(0,0,0, 0.3)
			&:hover,
			&:focus
				box-shadow: 3px 4px 16px rgba(0,0,0,0.49)
			&:focus
				border: 1px solid rgba(0,0,0,0.3)
	.button-container
		margin: 45px auto
		width: fit-content
		.btn
			text-align: center


.visualTestingContainer
  display flex
  flex-wrap wrap
  justify-content space-between

.column
  float: left
  width 30%
  padding 10px

.column
  textarea
    width 100%
    min-height 200px

Add ‘border-box’ box sizing to the Playground.

*
  -moz-box-sizing border-box
  -webkit-box-sizing border-box
  -webkit-font-smoothing antialiased
  box-sizing border-box
  margin 0
  padding 0

.visualTestingContainer
  display flex
  flex-wrap wrap
  justify-content space-between

.column
  float: left
  width 30%
  padding 10px

.column
  textarea
    width 100%
    min-height 200px


#student
    width: 90%
    margin: 24px auto 0 auto

    .student, .cart
        width: calc(50% - 18px)
        margin: 12px
        padding: 12px
        box-sizing: border-box
        float: left
        background-color: #d8d8d8
        border-radius: 3px
        box-shadow: 0 1px 0 #ccc

        .name, .id
            margin: 0 0 0 0.5rem

        .equipment-heading, .equipment-none
            margin 1em 0 0 0.8rem

        i
            color: #777

        .overdue
            color: red

        .item-info
            background: #e5e5e5
            margin: 0.5em 0.5rem
            border-radius: 3px
            padding: 0.3em .8rem
            box-shadow: 0 1px 0 #ccc

            &:hover
                background: lighten(#e5e5e5, 15%)

    .cart
        margin-left: 0

Add style for model info

#student
    width: 90%
    margin: 24px auto 0 auto

    .student, .cart
        width: calc(50% - 18px)
        margin: 12px
        padding: 12px
        box-sizing: border-box
        float: left
        background-color: #d8d8d8
        border-radius: 3px
        box-shadow: 0 1px 0 #ccc

        .name, .id
            margin: 0 0 0 0.5rem

        .equipment-heading, .equipment-none
            margin 1em 0 0 0.8rem

        i
            color: #777

        .overdue
            color: red

        .item-info, .model-info
            background: #e5e5e5
            margin: 0.5em 0.5rem
            border-radius: 3px
            padding: 0.3em .8rem
            box-shadow: 0 1px 0 #ccc

            &:hover
                background: lighten(#e5e5e5, 15%)

    .cart
        margin-left: 0


header
  position: sticky
  top: -1px

nav
  a:not(.default)
    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

Remove outline from anchor elements.

header
  position: sticky
  top: -1px

nav
  a:not(.default)
    color: #FFF
    display: inline-block
    outline: 0
    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


#rules-tree-view input[type=text]
  width 300px

#rules-tree-view li
#rules-list-view li
  height 25px

#rules-list-view .ui-draggable
  width 300px
  padding 5px
  margin 10px
  border 1px solid black
  background-color white

#rules-tree-view .ui-droppable
  padding 5px

.dropHover
  background-color lightgreen

Tweak style to align buttons to the right

#rules-tree-view input[type=text]
  width 300px

#rules-tree-view li
#rules-list-view li
  height 25px

#rules-list-view .ui-draggable
  width 300px
  padding 5px
  margin 10px
  border 1px solid black
  background-color white

#rules-tree-view .ui-droppable
  padding 5px

.dropHover
  background-color lightgreen

.btnDeleteList
  float right


//reset spacing values
p, h1, h2, h3, h4, h5, h6, small
  margin 0
  padding 0

html
  font-family: 'Merriweather', serif
  color $text-color

h1, h2, h3, h4, h5, h6
  font-family: 'Montserrat', sans-serif
  font-weight 400

h1
  font-weight 700

// setup responsive baseline and vertical grid (when debugging)
$establish-baseline()

for $bp, $config in $bp-list
  if ($config.baseline isnt null)
    +$mq($bp)
      $establish-baseline(unit($config.baseline, px))
      if ($debug is true)
        $vertical-grid( unit(round($ms-ratio * $config.baseline), '') )

if ($debug is true)
  $vertical-grid(unit(round($ms-base * $ms-ratio), ''))

// set font size, leading, trailing, as configured
for $element, $config in $typography-list
  $selector = $element

  if ($config.class is null)
    $selector += ', .'+$element
  else
    if ($config.class isnt false)
      $selector += ', .'+$config.class

  {$selector}
    $leader($config.lead || 0)
    $trailer($config.trail || 0)

    if ($config['extra-lines'] isnt null)
      $font-size($config.size, $config['extra-lines'])
    else
      $font-size($config.size)

Fix source order of responsive baseline styles

//reset spacing values
p, h1, h2, h3, h4, h5, h6, small
  margin 0
  padding 0

html
  font-family: 'Merriweather', serif
  color $text-color

h1, h2, h3, h4, h5, h6
  font-family: 'Montserrat', sans-serif
  font-weight 400

h1
  font-weight 700

// setup responsive baseline and vertical grid (when debugging)
$establish-baseline()

if ($debug is true)
  $vertical-grid(unit(round($ms-base * $ms-ratio), ''))

for $bp, $config in $bp-list
  if ($config.baseline isnt null)
    +$mq($bp)
      $establish-baseline(unit($config.baseline, px))
      if ($debug is true)
        $vertical-grid( unit(round($ms-ratio * $config.baseline), '') )

// set font size, leading, trailing, as configured
for $element, $config in $typography-list
  $selector = $element

  if ($config.class is null)
    $selector += ', .'+$element
  else
    if ($config.class isnt false)
      $selector += ', .'+$config.class

  {$selector}
    $leader($config.lead || 0)
    $trailer($config.trail || 0)

    if ($config['extra-lines'] isnt null)
      $font-size($config.size, $config['extra-lines'])
    else
      $font-size($config.size)


mark,
.mark
  color: #fff
  background-color $color-grapefruit

a:not([class])
  anchor-hover-effect()

// fixes
.nav a:before,
.pagination a:before,
.pager a:before,
.breadcrumb a,
a.disabled:before, a[disabled]:before
th a:before
  content: none

// Contextual colors
.text-muted
  color $text-muted

.text-primary
  text-emphasis-variant($brand-primary)

.text-success
  text-emphasis-variant($brand-success)

.text-info
  text-emphasis-variant($brand-info)

.text-warning
  text-emphasis-variant($brand-warning)

.text-danger
  text-emphasis-variant($brand-danger)

// Contextual backgrounds
.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger
  color #fff

Remove the link hover effect on some components

mark,
.mark
  color: #fff
  background-color $color-grapefruit

a:not([class])
  anchor-hover-effect()

// fixes
.nav a:before,
.pagination a:before,
.pager a:before,
.breadcrumb a:before,
.dropdown-menu a:before,
.panel-group .panel-heading a:before,
a.disabled:before, a[disabled]:before
th a:before
  content: none

// Contextual colors
.text-muted
  color $text-muted

.text-primary
  text-emphasis-variant($brand-primary)

.text-success
  text-emphasis-variant($brand-success)

.text-info
  text-emphasis-variant($brand-info)

.text-warning
  text-emphasis-variant($brand-warning)

.text-danger
  text-emphasis-variant($brand-danger)

// Contextual backgrounds
.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger
  color #fff


.profile-page {
  .sub-page {
    padding: 30px 20px;
  }

  .items {
    clearfix();
  }

  .item {
    box-sizing: border-box;
    float: left;
    padding: 10px;
    position: relative;
    width: 20%;

    &.new {
      outline: 1px solid green;
    }

    > a {
      display: block;
    }

    img {
      display: block;
      max-width: 100%;
    }

    .controls {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .action {
    text-align: center;
  }
}

Clean up profile style a bit

.profile-page {
  .sub-page {
    padding: 50px 20px;
  }

  .items {
    clearfix();
  }

  .item {
    box-sizing: border-box;
    float: left;
    padding: 10px;
    position: relative;
    width: 20%;

    &.new {
      background: $white;
    }

    > a {
      display: block;
    }

    img {
      box-shadow: 0 1px 2px -1px $black;
      display: block;
      max-width: 100%;
    }

    .controls {
      color: $white;
      position: absolute;
      right: 10px;
      text-shadow: 0 1px 1px $black;
      top: 10px;
    }
  }

  .action {
    margin: 20px 0;
    text-align: center;

    button {
      @extend #standard-button;
    }
  }
}


// # module: player
//
// TODO: Document, refactor.

#player
  display: inline-block
  width: 35rem
  height: 20rem
  padding: 0.5rem

  +between(64rem, 80rem)
    width: 53rem
    height: 30rem

  +above(80rem)
    width: 80rem
    height: 45rem

Fix game teaser responsiveness issues

// # module: player
//
// TODO: Document, refactor.

#player
  display: inline-block
  width: 25rem
  height: 13.31rem
  padding: 0.5rem

  +tablet()
    width: 53rem
    height: 30rem

  +desktop()
    width: 80rem
    height: 45rem

  +hd()
    width: 120rem
    height: 67.5rem


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

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

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

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

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

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

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

Set font-size: 13px for dropdown header

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

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

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

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

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

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

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


html, body
    font-family 'Roboto', 'Helvetica', sans-serif

Disable text selection (useful for for mobile)

html, body
  font-family 'Roboto', 'Helvetica', sans-serif

*:not(input)
  -webkit-touch-callout none
  -webkit-user-select none

*:not(textarea)
  -webkit-touch-callout none
  -webkit-user-select none


@require '../../components/stylus_lib'

#page-markdown-content
  width 600px
  margin content-margin-top auto 0 auto
  padding 40px 0

#page-markdown-content
.markdown-content
  font-size 19px
  h1, h2, p, ul
    &:first-child
      margin-top 0
  h1, h2, h3
    display block
    text-align center
    avant-garde()
  h1
    margin 1em 0 1.8em 0
    font-size 20px
  h2
    margin-bottom 1.5em
    font-size 13px
  h3
    font-size: 15px
    text-align: left
    margin-top: 28px
    margin-bottom: 8px
    line-height: 160%
  p
    margin-bottom 1em
    line-height 1.5em
  ul
    list-style disc
    li
      margin-bottom 1em
  ol
    list-style decimal
    li
      margin-bottom 1em

@media (max-width: 600px)
  #page-markdown-content
    width: 100%

Fix list spacing in JSON pages

@require '../../components/stylus_lib'

#page-markdown-content
  width 600px
  margin content-margin-top auto 0 auto
  padding 40px 0

#page-markdown-content
.markdown-content
  font-size 19px
  h1, h2, p, ul
    &:first-child
      margin-top 0
  h1, h2, h3
    display block
    text-align center
    avant-garde()
  h1
    margin 1em 0 1.8em 0
    font-size 20px
  h2
    margin-bottom 1.5em
    font-size 13px
  h3
    font-size: 15px
    text-align: left
    margin-top: 28px
    margin-bottom: 8px
    line-height: 160%
  p
    margin-bottom 1em
    line-height 1.5em
  ul
    list-style disc
    margin-left 1em
    li
      margin-bottom 1em
      margin-left 1em
      line-height 1.5em
  ol
    list-style decimal
    margin-left 1em
    li
      margin-bottom 1em
      margin-left 1em
      line-height 1.5em

@media (max-width: 600px)
  #page-markdown-content
    width: 100%


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

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

  .week
    margin-bottom 0 !important

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

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

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

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

Add styling for oauth notice

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

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

  .week
    margin-bottom 0 !important

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

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

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

.notice
  @extend .notification
  position fixed
  top 0
  z-index 9999
  width 100%

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


.weatherModal
	.or
		display: flex
		height: 34px
		justify-content: center
		align-items: center

Make labels nicer in weather dialog

.weatherModal
	.or
		display: flex
		height: 34px
		justify-content: center
		align-items: center

	label
		display: block


.game-comment-content
.user-comment-content
.fireside-post-comment-content
	// Remove empty P tags.
	p:empty
		display: none

	// Responsive images. Ignore emoji images.
	img:not(.emoji)
		img-responsive()

	// Make all headings just look like bold text.
	h1
	h2
	h3
	h4
	h5
	h6
		font-weight: bold
		font-size: $font-size-base
		margin: $font-size-base 0

	blockquote
		font-size: inherit

Fix mention avatars being big

.game-comment-content
.user-comment-content
.fireside-post-comment-content
	// Remove empty P tags.
	p:empty
		display: none

	// Make all headings just look like bold text.
	h1
	h2
	h3
	h4
	h5
	h6
		font-weight: bold
		font-size: $font-size-base
		margin: $font-size-base 0

	blockquote
		font-size: inherit


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

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

  .organism
    margin-top: 10px

Set the bottom position up a bit so the container is fully visible

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

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

  .organism
    margin-top: 10px


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

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

code
  background-color: $hl
  padding: 2px

a
  color: $blue

a:visited
  color: $orange

a:hover
  color: $orange

h1
  color: $red

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

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

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

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

colgroup
  border: 1px solid $comment

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

Change headlines to violet in light

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

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

code
  background-color: $hl
  padding: 2px

a
  color: $blue

a:visited
  color: $orange

a:hover
  color: $orange

h1
  color: $red

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

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

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

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

colgroup
  border: 1px solid $comment

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


.SvgGraphView
  position relative
  height 135px
  svg
    position absolute
    path
      stroke-linecap round
      stroke light-blue
      fill none
      stroke-width 4px
      stroke light-blue
      &.axisLines
        stroke blue-gray
      &.data
        stroke codap-orange

    text
      stroke-linecap round
      stroke none
      fill light-blue
      -webkit-touch-callout none
      -webkit-user-select none
      -khtml-user-select none
      -moz-user-select none
      -ms-user-select none
      -o-user-select none
      user-select none

      &.yLabel
        fill darken(codap-orange, 5)
        font-size 16
      &.xLabel
        fill darken(green-blue, 10)
        font-size 16

  .unknown-graph
    position absolute
    font-size 2em
    top 43px
    left 50px
    z-index 1

  .draw-graph
    position absolute
    height 110px
    width 110px
    top -5px
    left 25px
    z-index 2

  .graph-hint
    position absolute
    width 100px
    right 0px
    text-align center
    line-height 1em
    color #AAA
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select none

  .draw-graph.drawing:hover
    background-color rgba(255,255,255,0.4)
    cursor url('../img/bb-chrome/brush.cur'), pointer

Improve hotspot coordinate of brush cursor

.SvgGraphView
  position relative
  height 135px
  svg
    position absolute
    path
      stroke-linecap round
      stroke light-blue
      fill none
      stroke-width 4px
      stroke light-blue
      &.axisLines
        stroke blue-gray
      &.data
        stroke codap-orange

    text
      stroke-linecap round
      stroke none
      fill light-blue
      -webkit-touch-callout none
      -webkit-user-select none
      -khtml-user-select none
      -moz-user-select none
      -ms-user-select none
      -o-user-select none
      user-select none

      &.yLabel
        fill darken(codap-orange, 5)
        font-size 16
      &.xLabel
        fill darken(green-blue, 10)
        font-size 16

  .unknown-graph
    position absolute
    font-size 2em
    top 43px
    left 50px
    z-index 1

  .draw-graph
    position absolute
    height 110px
    width 110px
    top -5px
    left 25px
    z-index 2

  .graph-hint
    position absolute
    width 100px
    right 0px
    text-align center
    line-height 1em
    color #AAA
    -webkit-user-select none
    -moz-user-select none
    -ms-user-select none

  .draw-graph.drawing:hover
    background-color rgba(255,255,255,0.4)
    cursor url('../img/bb-chrome/brush.cur') 6 6, pointer


html
  background: white
  color: FOREGROUND
  font: 400 15px/1.5 "Open Sans", "Gill Sans", Arial, sans-serif

hr
  border: 0 solid rgba(gray, 0.5)
  border-top-width: 1px
  margin: 1em 0

a
  color: MAIN_HIGHLIGHT

.emoji
  max-height: 1em

h1,
h2,
h3,
h4
  font-smoothing: antialiased
  font-weight: bold
  margin: 0

img
  &:not([src]),
  &[src=""]
    background-stripes: black yellow 20%

Make empty images a little nicer

html
  background: white
  color: FOREGROUND
  font: 400 15px/1.5 "Open Sans", "Gill Sans", Arial, sans-serif

hr
  border: 0 solid rgba(gray, 0.5)
  border-top-width: 1px
  margin: 1em 0

a
  color: MAIN_HIGHLIGHT

.emoji
  max-height: 1em

h1,
h2,
h3,
h4
  font-smoothing: antialiased
  font-weight: bold
  margin: 0

img
  &:not([src]),
  &[src=""]
    background-stripes: lighten(MAIN_HIGHLIGHT, 20%) darken(SECOND_HIGHLIGHT, 20%) 20%


.forecast-weather-container
	height: 100%
	display: none
	flex-direction: column-reverse
	align-items: center
	justify-content: space-around
	opacity: 0
	.forecast-weather
		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
		.content
			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 for forecast container

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


@import 'cozy-ui'

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

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

    .reset-link
        margin-top      .5em

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

Update styles to use latest colours names

@import 'cozy-ui'

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

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

    .reset-link
        margin-top      .5em

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


@import '../lib';

.review-actions
  display inline-flex
  position relative

  div:first-child
    margin-right 10px

.review-actions-textarea
  position relative

  &:after
    border-left 8px solid transparent
    border-right 8px solid transparent
    border-bottom 10px solid rgba($color--highlight, .8)
    content ''
    display block
    height 0
    position absolute
    right 2px
    width 0

  textarea
    box-shadow 0 0 1px 0 $color--highlight
    position absolute
    top 9px
    right 0
    width 240px

.review-actions-reject button
  background $color--assertive

.review-actions-publish button
  background $color--success

Move message on Publish so that it doesn't overlap the other buttons

@import '../lib';

.review-actions
  display inline-flex
  position relative

  div:first-child
    margin-right 10px

.review-actions-textarea
  position relative

  &:after
    border-bottom 8px solid transparent
    border-right 10px solid rgba($color--highlight, .8)
    border-top 8px solid transparent
    content ''
    display block
    height 0
    position absolute
    right -10px
    top -25px
    width 0

  textarea
    box-shadow 0 0 1px 0 $color--highlight
    position absolute
    top -37px
    right -247px
    width 240px

.review-actions-reject button
  background $color--assertive

.review-actions-publish button
  background $color--success


@require 'settings/palette.styl'

:local // @stylint ignore
    .col-account-folder
        margin-top  2rem
        position    relative

        &-highlighted-data
            padding .5em 1em
            display block
            background paleGrey

        &-fetching
            position absolute
            background-color rgba(255, 255, 255, .7)
            z-index 100
            width 100%
            height 75%
            > div
                position relative // override default Spinner absolute position
                transform translateX(-50%) translateY(0)

        &-link
            color dodgerBlue
            text-decoration none
            font-weight bold
            display block
            margin-top 1rem

        &-save-btn
            width 100%
            margin 1em 0

        &-modal-path-btn
            text-align center

Remove unused KonnectorFolder CSS 🔥

@require 'settings/palette.styl'

:local // @stylint ignore
    .col-account-folder
        margin-top  2rem
        position    relative

        &-link
            color dodgerBlue
            text-decoration none
            font-weight bold
            display flex
            align-items center
            margin-top 1rem


.h-image-body

  .h-image-view-body
    height calc(100vh - 52px)
    width 100%
    position absolute
    top 52px
    left 0

    .h-image-view-container
      height 100%
      width 100%

    .h-image-view-container:focus
      border none

    .h-image-coordinates-container
      position absolute
      right 0
      bottom 0
      background #eee
      padding 0 3px
      border-radius 3px

  .h-control-panel-container

    overflow-y auto

    .h-control-panel.s-panel-group
      background-color rgba(255, 255, 255, 0.5)
      border 1px solid black
      border-radius 5px

  #h-annotation-selector-container
    right 0
    overflow-y auto

    .s-panel
      margin-right 5px

Increase the width of the right panel

.h-image-body

  .h-image-view-body
    height calc(100vh - 52px)
    width 100%
    position absolute
    top 52px
    left 0

    .h-image-view-container
      height 100%
      width 100%

    .h-image-view-container:focus
      border none

    .h-image-coordinates-container
      position absolute
      right 0
      bottom 0
      background #eee
      padding 0 3px
      border-radius 3px

  .h-control-panel-container

    overflow-y auto

    .h-control-panel.s-panel-group
      background-color rgba(255, 255, 255, 0.5)
      border 1px solid black
      border-radius 5px

  #h-annotation-selector-container
    right 0
    overflow-y auto
    width 300px

    .s-panel
      margin-right 5px


.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

Update style of current weather box

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


.divider
  border: 0
  margin: 60px 0
  height: 4px
  border-top: #ddd 1px solid
  border-bottom: #ddd 1px solid
  text-align: center
  position: relative
  clear: both
.teamRow
  width: 800px;
  margin-left: auto;
  margin-right: auto
.teamCol
  width: 370px
.chatRow
  width: 330px;
  margin-left: auto;
  margin-right: auto;
.chatCol
  width: 370px

Join button should have a cursor pointer

.divider
  border: 0
  margin: 60px 0
  height: 4px
  border-top: #ddd 1px solid
  border-bottom: #ddd 1px solid
  text-align: center
  position: relative
  clear: both
.teamRow
  width: 800px;
  margin-left: auto;
  margin-right: auto
.teamCol
  width: 370px
.chatRow
  width: 330px;
  margin-left: auto;
  margin-right: auto;
.chatCol
  width: 370px
.joinBtn
  cursor: pointer


@import '_settings'

normalize()
base()

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

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

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

#answer
  font-size: 15rem

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

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

Add a subtle highlight to page background

@import '_settings'

normalize()
base()

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

rainbow-gradient-position = 50% 0%
rainbow-gradient-start = rgba(255, 255, 255, 0.2)
rainbow-gradient-stop = rgba(255, 255, 255, 0)
#rainbow
  transition(background-color 0.5s ease-in-out)
  background-color: back-color
  background-image: -webkit-radial-gradient(          rainbow-gradient-position, rainbow-gradient-start, rainbow-gradient-stop)
  background-image:    -moz-radial-gradient(circle at rainbow-gradient-position, rainbow-gradient-start, rainbow-gradient-stop)
  background-image:     -ms-radial-gradient(circle at rainbow-gradient-position, rainbow-gradient-start, rainbow-gradient-stop)
  background-image:      -o-radial-gradient(circle at rainbow-gradient-position, rainbow-gradient-start, rainbow-gradient-stop)
  background-image:         radial-gradient(circle at rainbow-gradient-position, rainbow-gradient-start, rainbow-gradient-stop)
  &,
  a
    color: fore-color

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

#answer
  font-size: 15rem

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

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


.channel-filter
  width 100%
  position relative

  input.input--wide
    padding-left 50px
    background white

  input:focus
    background backgroundgray

  &__status
    position absolute
    height 100%
    width 50px
    left 0px
    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

Remove these two offensive letters

.channel-filter
  width 100%
  position relative

  input.input--wide
    padding-left 50px
    background white

  input:focus
    background backgroundgray

  &__status
    position absolute
    height 100%
    width 50px
    left 0
    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


@keyframes friggingBootstrapErrorHeight
  0%
    max-height: 0px
  100%
    max-height: 300px

@keyframes friggingBootstrapErrorOpacity
  0%
    opacity: 0
  100%
    opacity: 1

.frigb-error
  animation friggingBootstrapErrorHeight, 1.4s, linear, 0s, 1, normal, both
  .alert
    animation friggingBootstrapErrorOpacity, 0.6s, linear, 0s, 1, normal, both
  margin: 0 0 15px 0

Fix Error Block Animation To Work Again

@keyframes friggingBootstrapErrorHeight
  0%
    max-height 0px
  100%
    max-height 300px

@keyframes friggingBootstrapErrorOpacity
  0%
    opacity 0
  100%
    opacity 1

.frigb-error
  animation friggingBootstrapErrorHeight 2.5s linear 0s 1 normal both
  .alert
    animation friggingBootstrapErrorOpacity 0.6s linear 0s 1 normal both
  margin 0 0 15px 0


.ion-notice {
    animation: fadein 0.5s;
    background: notice.bg;
    border-radius: 3px;
	box-sizing: border-box;
    color: notice.color;
    line-height: 40px;
	min-height: 40px;
	padding: 0 15px;
	width: 100%;
	z-index: 999;

    &.ion-info {
        background: notice.info-bg;
    }

    &.ion-alert {
        background: notice.alert-bg;
    }

    &.ion-warning {
        background: notice.warning-bg;
    }

    .material-icons {
        cursor: pointer;
        float: right;
        line-height: 40px;
    }
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

Fix default alert text being hard to read

.ion-notice {
    animation: fadein 0.5s;
    background: notice.bg;
    border-radius: 3px;
	box-sizing: border-box;
    color: #212121;
    line-height: 40px;
	min-height: 40px;
	padding: 0 15px;
	width: 100%;
	z-index: 999;

    &.ion-info {
        background: notice.info-bg;
        color: notice.color;
    }

    &.ion-alert {
        background: notice.alert-bg;
        color: notice.color;
    }

    &.ion-warning {
        background: notice.warning-bg;
        color: notice.color;
    }

    .material-icons {
        cursor: pointer;
        float: right;
        line-height: 40px;
    }
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


.diff-viewer
  background-color white
  padding 10px
  position fixed
  top 70px
  left 50%
  width 100%
  max-width 1200px
  max-height 90vh
  z-index 10
  border 1px solid mischka
  border-radius 3px
  box-shadow 0 0 20px 0 rgba(0, 0, 0, .6)
  transform translateX(-50%)
  overflow-x scroll

.diff-comment
  text-align center

.diff-header
  border none !important

.diff-lineno
  display none

.diff-marker
  border none !important
  padding-top 0 !important
  padding-bottom 0 !important
  padding-left 12px !important
  padding-right 12px !important

.diff-empty
  border none !important

.diff-context
  display none

.diff-addedline
  border 2px solid #dff0d8 !important
  max-width 600px
  overflow hidden
  .diffchange-inline
    background-color #dff0d8

.diff-deletedline
  border 2px solid #f2dede !important
  max-width 500px
  overflow hidden
  .diffchange-inline
    background-color #f2dede

Fix RTL positioning of DiffViewer

.diff-viewer
  background-color white
  padding 10px
  position fixed
  top 70px
  /*@noflip*/ left 50%
  width 100%
  max-width 1200px
  max-height 90vh
  z-index 10
  border 1px solid mischka
  border-radius 3px
  box-shadow 0 0 20px 0 rgba(0, 0, 0, .6)
  transform translateX(-50%)
  overflow-x scroll

.diff-comment
  text-align center

.diff-header
  border none !important

.diff-lineno
  display none

.diff-marker
  border none !important
  padding-top 0 !important
  padding-bottom 0 !important
  padding-left 12px !important
  padding-right 12px !important

.diff-empty
  border none !important

.diff-context
  display none

.diff-addedline
  border 2px solid #dff0d8 !important
  max-width 600px
  overflow hidden
  .diffchange-inline
    background-color #dff0d8

.diff-deletedline
  border 2px solid #f2dede !important
  max-width 500px
  overflow hidden
  .diffchange-inline
    background-color #f2dede


/**
 * Custom palette here.
 *
 * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
 */

$accentColor = #b50938
$textColor = #1a1a1a
$borderColor = #eaecef
$codeBgColor = #282c34

$navbarHeight = 5.6rem

.navbar .home-link .site-name
  font-weight: 300

.nav-links a
  font-weight: 300;
  font-size: 19px
  line-height: 28px

.home .hero #main-title
  text-align: left
  margin-bottom: 58px
  margin-top: 48px

.home .footer
  text-align: left
  padding-left: 0

.sidebar-heading
  font-weight: normal

a.sidebar-link
  font-weight: 300

a.sidebar-link.active
  font-weight: 400

Update Tip and Warning box colors to AIC brand colors

/**
 * Custom palette here.
 *
 * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
 */

$accentColor = #b50938
$textColor = #1a1a1a
$borderColor = #eaecef
$codeBgColor = #282c34

$navbarHeight = 5.6rem

.navbar .home-link .site-name
  font-weight: 300

.nav-links a
  font-weight: 300;
  font-size: 19px
  line-height: 28px

.home .hero #main-title
  text-align: left
  margin-bottom: 58px
  margin-top: 48px

.home .footer
  text-align: left
  padding-left: 0

.sidebar-heading
  font-weight: normal

a.sidebar-link
  font-weight: 300

a.sidebar-link.active
  font-weight: 400

.custom-block.tip {
    border-color: #008085;
}

.custom-block.warning {
    background-color: #fbf3f6;
    border-color: #c95100;
    color: #1a1a1a;
}

.custom-block.warning .custom-block-title {
    color: #c95100;
}

.custom-block.warning a {
    color: #b50938;
}


.public-comments-wrapper {
  display: none;
}

.comments-toggler {
  display: block;
  margin-bottom: 15px;

  .dropdown-toggle {
    padding-left: 0;
    padding-right: 0;
  }
}

.collaborator-comments {
  min-height: 150px;

  &.is-loading {
    background: url('../images/loading-content.gif') no-repeat center center;

    .comments-list {
      display: none !important;
    }
  }
}

Tweak empty comment message height.

.public-comments-wrapper {
  display: none;
}

.comments-toggler {
  display: block;
  margin-bottom: 15px;

  .dropdown-toggle {
    padding-left: 0;
    padding-right: 0;
  }
}

.collaborator-comments {
  min-height: 35px;

  &.is-loading {
    background: url('../images/loading-content.gif') no-repeat center center;

    .comments-list {
      display: none !important;
    }
  }
}


editor-tag(color=color-primary, color-text=#fff)
    background color
    padding 2px
    margin 0 -2px
    border-radius()
    color color-text

editor
    min-height 460px
    display block
    border-radius()

    &.ace_editor
        line-height 26px
        font-size 15px

        .ace_content .ace_line

            .ace_comment
                color #aaa

            .ace_keyword
                editor-tag(color-language-keyword, color-black)

            .ace_string
                editor-tag(color-language-string)

            .ace_numeric
                editor-tag(color-language-number)

            .ace_identifier
                editor-tag(color-language-identifier)

        .ace_gutter-cell
            color #aaa

Make line number less relevant

editor-tag(color=color-primary, color-text=#fff)
    background color
    padding 2px
    margin 0 -2px
    border-radius()
    color color-text

editor
    min-height 460px
    display block
    border-radius()

    &.ace_editor
        line-height 26px
        font-size 15px

        .ace_content .ace_line

            .ace_comment
                color #aaa

            .ace_keyword
                editor-tag(color-language-keyword, color-black)

            .ace_string
                editor-tag(color-language-string)

            .ace_numeric
                editor-tag(color-language-number)

            .ace_identifier
                editor-tag(color-language-identifier)

        .ace_gutter-cell
            color #ccc

        // .ace_gutter
        //     display none


@require './super_article'
@require './scroller'
@require './body'
@import '../components/merry_go_round'

flex-display(justify = space-between, align = center)
  display flex
  justify-content justify
  align-items align

.eoy-feature
  &__background
    position fixed
    top 49.9%
    left 50%
    min-height 101vh
    min-width 100vw
    transform translate(-50%, -50%)
    z-index -1
    opacity 0
    &.active
      opacity 1
  &__menu
    position fixed
    top 0
    left 0
    right 0
    margin 0 40px
    height 75px
    border-bottom 1px solid white
    z-index 100
    flex-display()
    align-items center
    img.logo
      height 30px
    img.planet-art
      height 25px
      display inline-block
    a
      color white
      text-decoration none
      font-size 14px
      font-weight 600
      span
        display inline-block
        line-height 15px
        margin-right 12px

#recently-viewed-artworks
  display none

@media screen and (max-width: 550px)
  .eoy-feature__menu
    margin 0 10px
    justify-content flex-start
    .planet-art
      margin-left 30px
      margin-top 5px
    a span
      display none

Remove display none on recently viewed artworks

@require './super_article'
@require './scroller'
@require './body'
@import '../components/merry_go_round'

flex-display(justify = space-between, align = center)
  display flex
  justify-content justify
  align-items align

.eoy-feature
  &__background
    position fixed
    top 49.9%
    left 50%
    min-height 101vh
    min-width 100vw
    transform translate(-50%, -50%)
    z-index -1
    opacity 0
    &.active
      opacity 1
  &__menu
    position fixed
    top 0
    left 0
    right 0
    margin 0 40px
    height 75px
    border-bottom 1px solid white
    z-index 100
    flex-display()
    align-items center
    img.logo
      height 30px
    img.planet-art
      height 25px
      display inline-block
    a
      color white
      text-decoration none
      font-size 14px
      font-weight 600
      span
        display inline-block
        line-height 15px
        margin-right 12px

@media screen and (max-width: 550px)
  .eoy-feature__menu
    margin 0 10px
    justify-content flex-start
    .planet-art
      margin-left 30px
      margin-top 5px
    a span
      display none


#footer
  padding-top: 10px
  padding-bottom: 10px
  color: #666
  font-size: 11px
  max-width: 700px
  width: 100%
  margin: 0 auto 1rem auto
  vertical-align: top
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
    vertical-align: middle
    margin-right: 15px
    border-right: 1px solid #4a4a4a
    a
      margin-right: 15px
  li:last-child
    border-right: 0
    margin-right: 0
    a
      margin-right: 0
  a
    color: #666
  a:hover
    color: #999
  .footer-left
    height: 20px
    line-height: 20px
    vertical-align: middle

@media (min-width: 480px)
  #footer
    padding-top: 20px
    padding-bottom: 20px
    .footer-left
      float: left
    .footer-right
      float: right

Fix mistake in prev commit

#footer
  padding-top: 10px
  padding-bottom: 10px
  color: #666
  font-size: 11px
  max-width: 700px
  width: 100%
  margin: 0 auto 1rem auto
  vertical-align: top
  text-align: center
  ul
    margin: 0
    padding: 0
    list-style: none
  li
    display: inline-block
    vertical-align: middle
    margin-right: 15px
    border-right: 1px solid #4a4a4a
    a
      margin-right: 15px
  li:last-child
    border-right: 0
    margin-right: 0
    a
      margin-right: 0
  a
    color: #666
  a:hover
    color: #999
  .footer-left
    height: 20px
    line-height: 20px
    vertical-align: middle

@media (min-width: 480px)
  #footer
    padding-top: 20px
    padding-bottom: 20px
    .footer-left
      float: left
    .footer-right
      float: right


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

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

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

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

.bespoke-inactive
  display: none

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

Hide elements via opacity instead of display none

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

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

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

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

.bespoke-inactive
  opacity: 0

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


@require '../../../components/stylus_lib'
@require './development'

.inquiry-page
  margin (main-header-height + 20px) 0

.iqm-alert
  position absolute
  top 50%
  left 0
  right 0
  transform translateY(-50%)
  text-align center
  garamond-size('l-body')

Remove header offset on Eigen

@require '../../../components/stylus_lib'
@require './development'

.inquiry-page
  margin (main-header-height + 20px) 0

.body-eigen .inquiry-page
  margin 20px 0

.iqm-alert
  position absolute
  top 50%
  left 0
  right 0
  transform translateY(-50%)
  text-align center
  garamond-size('l-body')


.game_form_popup
  background bglight
  width 85%
  left 7.5%

.game_form
  padding-top 10px
  fieldset
    padding 0px 20px
  button[type=submit]
    width 100%
    border-radius 0 0 5px 5px
    margin 30px 0 0
    background gold
    color #FFF
    font-size 0.85em
    text-transform uppercase

#new_game_form
  .nice-radio
    input.radio.computer:empty + label
      text-align right
      border-radius 0 25px 25px 0
    input.radio.human:empty + label
      border-radius 30px 0 0 30px
    input.radio.human:empty + label:after
      left auto
      right 0

.rating_range
  margin-top 10px
  .select_input
    margin-top 5px
    select
      padding-left 60px

Add active style to new game button

.game_form_popup
  background bglight
  width 85%
  left 7.5%

.game_form
  padding-top 10px
  fieldset
    padding 0px 20px
  button[type=submit]
    width 100%
    border-radius 0 0 5px 5px
    margin 30px 0 0
    background gold
    color #FFF
    font-size 0.85em
    text-transform uppercase
    &.active
      background lighten(gold, 10%)

#new_game_form
  .nice-radio
    input.radio.computer:empty + label
      text-align right
      border-radius 0 25px 25px 0
    input.radio.human:empty + label
      border-radius 30px 0 0 30px
    input.radio.human:empty + label:after
      left auto
      right 0

.rating_range
  margin-top 10px
  .select_input
    margin-top 5px
    select
      padding-left 60px