@import url('http://fonts.googleapis.com/css?family=Ubuntu')

text-decoration-line()
	-webkit-text-decoration-line arguments
	-moz-text-decoration-line arguments
	text-decoration-line arguments

text-decoration-style()
	-webkit-text-decoration-style arguments
	-moz-text-decoration-style arguments
	text-decoration-style arguments

body
html
	font-family 'Ubuntu', sans-serif
	font-size 1em

a
a:visited
	text-decoration-line underline
	text-decoration-style dotted

a:focus
a:hover
	text-decoration-line underline
	text-decoration-style solid

p
	line-height 1.6em
	margin-bottom 1.6em

h1
h2
h3
h4
h5
h6
	font-weight normal

h1
	font-size 3em

h2
	font-size 2.4em

h3
	font-size 1.8em

h4
	font-size 1.6em

h5
	font-size 1.2em

h6
	font-size 1em

ol
ul
	padding-left 1.6em

li
	margin-bottom 1em

li > p
	margin-bottom 0

hr
	margin-top 2em

.container
	margin 0 auto
	max-width 36em

Set input and label to block display

@import url('http://fonts.googleapis.com/css?family=Ubuntu')

text-decoration-line()
	-webkit-text-decoration-line arguments
	-moz-text-decoration-line arguments
	text-decoration-line arguments

text-decoration-style()
	-webkit-text-decoration-style arguments
	-moz-text-decoration-style arguments
	text-decoration-style arguments

body
html
	font-family 'Ubuntu', sans-serif
	font-size 1em

a
a:visited
	text-decoration-line underline
	text-decoration-style dotted

a:focus
a:hover
	text-decoration-line underline
	text-decoration-style solid

p
	line-height 1.6em
	margin-bottom 1.6em

h1
h2
h3
h4
h5
h6
	font-weight normal

h1
	font-size 3em

h2
	font-size 2.4em

h3
	font-size 1.8em

h4
	font-size 1.6em

h5
	font-size 1.2em

h6
	font-size 1em

ol
ul
	padding-left 1.6em

li
	margin-bottom 1em

li > p
	margin-bottom 0

hr
	margin-top 2em

.container
	margin 0 auto
	max-width 36em

input
label
	display block


h1
h2
h3
h4
h5
h6
	font-family $heading-font-family
	font-weight $heading-font-weight
	margin $base-line-height 0 0.5em
	line-height normal
	a
		&
		&:visited
			color inherit

h1
	font-size 2.25em

h2
	font-size 2em

h3
	font-size 1.75em

h4
	font-size 1.5em

h5
	font-size 1.25em

h6
	font-size 1em

Remove spaces for first and last heading

h1
h2
h3
h4
h5
h6
	font-family $heading-font-family
	font-weight $heading-font-weight
	margin $base-line-height 0 0.5em
	line-height normal
	a
		&
		&:visited
			color inherit

	&:first-child
		margin-top 0

	&:last-child
		margin-bottom 0

h1
	font-size 2.25em

h2
	font-size 2em

h3
	font-size 1.75em

h4
	font-size 1.5em

h5
	font-size 1.25em

h6
	font-size 1em


@require 'components/forms.styl'
@require 'settings/palette.styl'

.fil-file-name-input
    @extend $form-text

    input[type=text]
        width   100%
        padding .375rem

        &:focus
            background-color  var(--white)

Make the input takes 100% of the width

@require 'components/forms.styl'
@require 'settings/palette.styl'

.fil-file-name-input
    @extend $form-text
    display table-cell
    width 100%

    input[type=text]
        width   100%
        padding .375rem

        &:focus
            background-color  var(--white)


.Connect__create
  display none
  position relative
  line-height 1
  padding input-padding
  border 1px solid colors-gray-lighter
  margin 0 0 -1px 0
  text-align center
  cursor pointer

  &:hover
    border 1px solid colors-gray-text
    z-index 1

Create new private channel button reflects private state color

.Connect__create
  display none
  position relative
  line-height 1
  padding input-padding
  color colors-channel-private
  border 1px solid colors-gray-lighter
  margin 0 0 -1px 0
  text-align center
  cursor pointer

  &:hover
    border 1px solid colors-gray-text
    z-index 1


body
  color #333
  font-family sans-serif
  margin 0
  padding 0

i
  -webkit-user-select none
  -moz-user-select none
  -user-select none

a
  cursor pointer

.dropdown-menu>li>a
  padding-left 6px

.c-app-header-container
  background-color #333
  height 40px

.c-app-body-container
  position absolute
  left 0
  right 0
  top 40px
  bottom 0
  z-index 0

Use fixed header bar position for convenience on scrolly pages

body
  color #333
  font-family sans-serif
  margin 0
  padding 0

i
  -webkit-user-select none
  -moz-user-select none
  -user-select none

a
  cursor pointer

.dropdown-menu>li>a
  padding-left 6px

.c-app-header-container
  background-color #333
  height 40px
  width 100%
  position fixed
  top 0
  z-index 1000

.c-app-body-container
  position absolute
  left 0
  right 0
  top 40px
  bottom 0
  z-index 0


@require 'mixins'

.bets-table
  pad-lr(1em)
  th
    font-weight normal

button
  background $grey_brighter;
  color $red_brighter
  font-family inherit
  font-size inherit
  font-weight bold
  letter-spacing 1px;
  line-height 1.6
  border 0
  min-width 4em
  pad(0)
  cursor pointer
  outline($red, 2px)
  &:active
    background-color #FFF

Adjust styling of events' buttons: - set style to those buttons only;


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

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

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

.navbar-auth__dropdown-toggle
  padding-right 0 !important
.navbar-guest
  padding-right 0 !important

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

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

Fix breakpoint for mobile screens

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

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

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

.navbar-auth__dropdown-toggle
  padding-right 0 !important
.navbar-guest
  padding-right 0 !important

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

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


.ChannelBlockGroup
  width 100%
  &__inner
    margin 0 auto
    display flex
    justify-content flex-start
  &__divider
    border-top 1px solid bordergray
    margin 2em auto
    height 0

  for i in (1..5)
    @media (min-width:(block_width_mar * i) + 20) and (max-width:(block_width_mar * (i + 1)) + 20)
      &__inner
        width (block_width_mar * i)
      &__divider
        width (block_width_mar * i) - 20
      .Block:nth-of-type(1n+{i+1})
        display none

  +mobile()
    &__divider
      border-color transparent
      margin 0.5em auto

.ChannelBlockGroup:first-child
  .ChannelBlockGroup__divider
    margin-top 0

Increase width for channel block group

.ChannelBlockGroup
  width 100%
  &__inner
    margin 0 auto
    display flex
    justify-content flex-start
  &__divider
    border-top 1px solid bordergray
    margin 2em auto
    height 0

  for i in (1..8)
    @media (min-width:(block_width_mar * i) + 20) and (max-width:(block_width_mar * (i + 1)) + 20)
      &__inner
        width (block_width_mar * i)
      &__divider
        width (block_width_mar * i) - 20
      .Block:nth-of-type(1n+{i+1})
        display none

  +mobile()
    &__divider
      border-color transparent
      margin 0.5em auto

.ChannelBlockGroup:first-child
  .ChannelBlockGroup__divider
    margin-top 0


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

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

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

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

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

      &:before
        top 300%

      &:after
        bottom 300%

  &__options
    margin-top 1em

    > a
      display block
      text-decoration none

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

      &:first-child
        display none

  &--active
    .LoggedOutMenu
      &__options
        display block

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

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

    &__toggle
      display block

    &__options
      display none

      > a:first-child
        display block

Add padding to menu to line text up with logo

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

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

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

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

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

      &:before
        top 300%

      &:after
        bottom 300%

  &__options
    margin-top 1em

    > a
      display block
      text-decoration none

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

      &:first-child
        display none

  &--active
    .LoggedOutMenu
      &__options
        display block

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

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

    &__toggle
      display block

    &__options
      display none

      > a:first-child
        display block


.secondary-page
  font-size: 10px
  line-height: 20px

  .secondary-page-side-bar
    flex: 0 1 190px

    nav
      align-items: flex-start
      display: inline-flex
      flex-direction: column
      flex-wrap: wrap
      margin-top: 0.75em

      @media screen and (max-width: 400px)
        flex-direction: row

      .side-bar-button
        color: #5a5a5a
        font-size: 14px
        margin: 6.75px 6.75px 20.25px
        outline: none

        &.active
          font-weight: 700

  .markdown, .secondary-page-copy
    h1, h2, h3
      color: #5a5a5a

    h2
      font-size: 2.4em
      line-height: 26px

    h3
      font-size: 1.4em

    p, li
      color: #989898
      margin: 1em 0
      max-width: 700px

      ul > li
        font-size: 14px

      img
        max-width: 100%

    pre
      background-color: #E8E8E8
      border-radius: 4px
      padding: 1em

.centered-grid
  margin: 0 auto
  max-width: 960px
  padding: 40px 3vw

Increase font size on secondary pages

.secondary-page
  font-size: 10px
  line-height: 20px

  .secondary-page-side-bar
    flex: 0 1 190px

    nav
      align-items: flex-start
      display: inline-flex
      flex-direction: column
      flex-wrap: wrap
      margin-top: 0.75em

      @media screen and (max-width: 400px)
        flex-direction: row

      .side-bar-button
        color: #5a5a5a
        font-size: 14px
        margin: 6.75px 6.75px 20.25px
        outline: none

        &.active
          font-weight: 700

  .markdown, .secondary-page-copy
    h1, h2, h3
      color: #5a5a5a

    h2
      font-size: 2.4em
      line-height: 26px

    h3
      font-size: 1.4em

    p, li
      color: #989898
      margin: 1em 0
      max-width: 700px
      font-size: 14px

      ul > li
        font-size: 14px

      img
        max-width: 100%

    pre
      background-color: #E8E8E8
      border-radius: 4px
      padding: 1em

.centered-grid
  margin: 0 auto
  max-width: 960px
  padding: 40px 3vw


.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

Add bottom space to current weather

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


.section-list
  list-style: none

.section-control
  margin: 3px 0px
  padding: 5px
  background-color: #EFEFEF
  border: solid 1px #EAEAEA
  border-radius: 5px
  &:hover
    background-color: #E2E2E2

.section-drag-mark
  margin: 5px
  font-size: 18px
  color: #808080
  user-select: none
  cursor: move

.section-moderators-list
  width: 200px
  text-align: right

.section-delete-button
  width: 100px
  text-align: center

.section-title
  margin: 5px 0px 5px 10px
  font-size: 12pt

.section-placeholder
  margin-top: 3px
  margin-bottom: 3px
  height: 25px
  background-color: #FFFB91
  border: solid 2px #FFF947
  border-radius: 5px

.section-children
  margin-left: 50px

.section-children-placeholder:empty
  @extend .section-placeholder
  background-color: #FAFAFA
  border-style: dashed
  border-color: #E8E8E8

Clean up styles at section management page.

.section-list
  list-style: none

.section-control
  margin: 3px 0px
  padding: 5px
  background-color: #EFEFEF
  border: solid 1px #EAEAEA
  border-radius: 5px
  &:hover
    background-color: #E2E2E2

.section-drag-mark
  color: #808080
  user-select: none
  cursor: move

.section-moderators-list
  width: 200px
  text-align: right

.section-delete-button
  width: 100px
  text-align: center

.section-placeholder
  margin-top: 3px
  margin-bottom: 3px
  height: 25px
  background-color: #FFFB91
  border: solid 2px #FFF947
  border-radius: 5px

.section-children
  margin-left: 50px

.section-children-placeholder:empty
  @extend .section-placeholder
  background-color: #FAFAFA
  border-style: dashed
  border-color: #E8E8E8


.isic-upload-description-container
  margin-top 10px

.isic-upload-container
  margin 5px 0px
  h4
    font-size 14px
    font-weight bold
    font-color #eee

  .g-drop-zone
    width 100%
    text-align center
    height 60px
    line-height 60px
    box-shadow 0 2px 5px rgba(0,0,0,0.2)
    background-color #5cb897
    border 1px solid #4a8
    height 30px
    line-height 100%
    padding 7px 22px 5px 17px
    font-size 14px
    font-weight normal

    &:hover
      background-color #6cc8a7
      background linear-gradient(top,#6cc8a7 50%,#5cb897 100%)

    &:active
      background #6cc8a7
      box-shadow inset 0 3px 5px rgba(0,0,0,0.125);

    &.g-dropzone-show
      background white
      border 2px dashed #bbb
      box-shadow none
      padding 0

.isic-upload-widget-container
  padding 10px 0px
  text-align left
  display inline-block
  max-width 370px

  .g-dialog-subtitle
    display none

.isic-upload-reset-container
  padding 10px 0px

.isic-upload-list
  padding-bottom 10px

Improve upload widget drop zone style

.isic-upload-description-container
  margin-top 10px

.isic-upload-container
  margin 5px 0px
  h4
    font-size 14px
    font-weight bold
    font-color #eee

  .g-drop-zone
    width 40%
    text-align center
    height 60px
    line-height 60px
    box-shadow 0 2px 5px rgba(0,0,0,0.2)
    background-color #5cb897
    border 1px solid #4a8
    height 30px
    line-height 100%
    padding 7px 22px 5px 17px
    font-size 14px
    font-weight normal

    &:hover
      background-color #6cc8a7
      background linear-gradient(top,#6cc8a7 50%,#5cb897 100%)

    &:active
      background #6cc8a7
      box-shadow inset 0 3px 5px rgba(0,0,0,0.125);

    &.g-dropzone-show
      background white
      border 2px dashed #bbb
      box-shadow none
      height 60px
      // Center content horizontally and vertically
      display flex
      align-items center
      justify-content center

.isic-upload-widget-container
  padding 10px 0px
  text-align left

  .g-dialog-subtitle
    display none

.isic-upload-reset-container
  padding 10px 0px

.isic-upload-list
  padding-bottom 10px


//** The Collection Summary page styles. **//

.qi-subject-list
  margin-bottom 1em
  border 1px solid SlateGray
  border-radius 0.4em
  padding-top 0.4em

Remove unused style. Add Collection List name style.

//** The Collection List and Detail page styles. **//

.qi-collection-name
  font-size larger


.mongochem-max-height
  height 100%
.mongochem-fifty
  height 50%
  width 50%
.mongochem-logo
  height 40px
  width 40px
.mongochem-no-scroll
  overflow: hidden

md-toolbar .md-menu.mongochem-menu
  margin inherit

#mongochem-3dmol.mongochem-frequency-overlay
  canvas
    margin-top: -316px

.bar rect
  fill: #7986CB
  shape-rendering: crispEdges

//md-content[mongochem-frequency-histogram="mongochem-frequency-histogram"][mongochem-animating="false"] .bar rect:hover
//  fill: #3F51B5

.bar.selected rect
  fill: #3F51B5

.axis path, .axis line
  fill: none
  stroke: #000
  shape-rendering: crispEdges

#mongochem-select-mode, #mongochem-select-experimental, #mongochem-select-molecule
  margin: 0px 0px 0px 0px

.mongochem-no-select
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

Add styling to combo box

.mongochem-max-height
  height 100%
.mongochem-fifty
  height 50%
  width 50%
.mongochem-logo
  height 40px
  width 40px
.mongochem-no-scroll
  overflow: hidden

md-toolbar .md-menu.mongochem-menu
  margin inherit

#mongochem-3dmol.mongochem-frequency-overlay
  canvas
    margin-top: -316px

.bar rect
  fill: #7986CB
  shape-rendering: crispEdges

//md-content[mongochem-frequency-histogram="mongochem-frequency-histogram"][mongochem-animating="false"] .bar rect:hover
//  fill: #3F51B5

.bar.selected rect
  fill: #3F51B5

.axis path, .axis line
  fill: none
  stroke: #000
  shape-rendering: crispEdges

#mongochem-select-mode, #mongochem-select-experimental, #mongochem-select-molecule, #mongochem-select-calculation
  margin: 0px 0px 0px 0px

.mongochem-no-select
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none


@import "variables";

.scroll-header,
.scroll-footer {
    :global {
        .rc-table-placeholder {
            display: none;
        }
    }
}

.scroll-header {
    border-bottom: 2px solid $table-header-border-bottom-color

    :global {
        .rc-table-content {
            overflow: hidden;
        }
    }

    .table {
        table {
            table-layout: fixed;
            width: 100%;

            thead {
                th {
                    border-top: 0;
                    border-bottom: 0;

                    &.th-scroll-bar {
                        border-left: 0;
                        padding: 0;
                    }
                }
            }
        }
    }

    + .scroll-body {
        overflow: auto;
        thead {
            border-top: 0;
            border-bottom: 0;

            th {
                border-top: 0;
                border-bottom: 0;
            }
        }

        tbody > tr:first-child > td {
            border-top: 0;
        }

        .loader-overlay {
            top: 0;
        }
    }
}

Adjust table footer style when footer is fixed.

@import "variables";

.scroll-header,
.scroll-footer {
    :global {
        .rc-table-placeholder {
            display: none;
        }
    }
}

.scroll-footer {
    :global {
        .rc-table-body {
            display: none;
        }
        .rc-table-footer :local(.table-toolbar) {
            border-top: 1px solid #ddd;
            border-bottom: none;
        }
    }
}

.scroll-header {
    border-bottom: 2px solid $table-header-border-bottom-color

    :global {
        .rc-table-content {
            overflow: hidden;
        }
    }

    .table {
        table {
            table-layout: fixed;
            width: 100%;

            thead {
                th {
                    border-top: 0;
                    border-bottom: 0;

                    &.th-scroll-bar {
                        border-left: 0;
                        padding: 0;
                    }
                }
            }
        }
    }

    + .scroll-body {
        overflow: auto;
        thead {
            border-top: 0;
            border-bottom: 0;

            th {
                border-top: 0;
                border-bottom: 0;
            }
        }

        tbody > tr:first-child > td {
            border-top: 0;
        }

        .loader-overlay {
            top: 0;
        }
    }
}


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

  .post
    //

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

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

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

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

      > .post-author
        font-weight bold

    > .post-content
      //

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

        > a
          text-decoration underline

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

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

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

Fix margins around images and iframes

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

  .post
    //

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

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

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

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

      > .post-author
        font-weight bold

    > .post-content
      //

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

        > a
          text-decoration underline

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

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

      h2
        margin-top 4em

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


@require 'tools/mixins.styl'
@require 'settings/palette.styl'

:local // @stylint ignore
    .col-account-connection-content
        padding 0 2rem
    .col-account-connection-fetching
        padding 0 0 2em
        position relative
        > div
            position relative // override default Spinner absolute position
            transform translateX(-50%) translateY(0)

    .col-account-connection-security
        display      flex
        align-items  top
        margin-bottom .5rem
        margin-top    1.5rem

    .col-account-connection-security svg
        max-height   rem(24)
        max-width    rem(24)
        float        left
        margin-right rem(8)

    .col-account-connection-form
        margin 0 rem(8) 0 0

    +small-screen()
        .col-account-connection-content
            display block
            width   100%

    .col-account-connection-editor
        text-align      center
        color           coolGrey
        margin-top      0
        margin-bottom   0
        font-size       .9em

Remove account form padding on small screens 💄

@require 'tools/mixins.styl'
@require 'settings/breakpoints.styl'
@require 'settings/palette.styl'

:local // @stylint ignore
    .col-account-connection-content
        padding 0 2rem

        +tiny-screen()
            padding 0

    .col-account-connection-fetching
        padding 0 0 2em
        position relative
        > div
            position relative // override default Spinner absolute position
            transform translateX(-50%) translateY(0)

    .col-account-connection-security
        display      flex
        align-items  top
        margin-bottom .5rem
        margin-top    1.5rem

    .col-account-connection-security svg
        max-height   rem(24)
        max-width    rem(24)
        float        left
        margin-right rem(8)

    .col-account-connection-form
        margin 0 rem(8) 0 0

    .col-account-connection-editor
        text-align      center
        color           coolGrey
        margin-top      0
        margin-bottom   0
        font-size       .9em


// module.styl

// .header

.header__logo
	max-width 100%

// .gallery

// .gallery__image

// .gallery__image--selected

// .search

// .search__field

// .search__field--warning

// .search__field--success

// .search__button

// .detail

.detail__image
	display block
	float left
	width 45%
	max-width 50%
	margin 20px
	border-bottom 2px solid dark-purple
	border-radius 2px
	box-shadow 0 4px 2px -2px rgba(0,0,0,0.4)

.detail__content
	background-color off-white
	width 45%
	max-width 50%
	margin 20px
	padding 20px
	border-bottom 2px solid dark-purple
	border-radius 2px 2px 4px 4px
	box-shadow 0 4px 2px -2px rgba(0,0,0,0.4)

Add styles for Gallery images

// module.styl

// .header

.header__logo
	max-width 100%

.gallery

//.gallery__image
//	width 25%

//.gallery__image--w2
//	width 50%

// .search

// .search__field

// .search__field--warning

// .search__field--success

// .search__button

// .detail

.detail__image
	display block
	float left
	width 45%
	max-width 50%
	margin 20px
	border-bottom 2px solid dark-purple
	border-radius 2px
	box-shadow 0 4px 2px -2px rgba(0,0,0,0.4)

.detail__content
	background-color off-white
	width 45%
	max-width 50%
	margin 20px
	padding 20px
	border-bottom 2px solid dark-purple
	border-radius 2px 2px 4px 4px
	box-shadow 0 4px 2px -2px rgba(0,0,0,0.4)


.modal-form.tutorial-dialog
  padding: 0 0 1.5em

.tutorial-steps
  display: flex
  flex-direction: column
  max-height: 95vh
  max-width: 95vw
  width: 50ch

  > .step-through-content
    // TODO: I'd rather the header media not scroll.
    overflow-y: auto !important // Override swipe library setting.

  > .step-through-controls
    text-align: center

.media-card.tutorial-step
  > .media-card-content
    @extends .content-container

.media-card-media
  display: block
  max-width: 100%

.step-through-direction
  @extends $reset-button
  vertical-align: middle

.step-through-pips
  margin: 0 0.4em

.step-through-pip
  cursor: pointer
  padding: 0.2em 0.4em

.step-through-pip-input
  cursor: pointer
  position: absolute
  opacity: 0

.step-through-pip-number
  border: 0.2em solid
  border-radius: 50%
  cursor: pointer
  display: inline-block
  height: 0.5em
  overflow: hidden
  text-indent: 2em
  vertical-align: middle
  width: 0.5em

  :focus + &
    box-shadow: 0 0 1px 1px MAIN_HIGHLIGHT

  :checked + &
    background: currentColor

Add border radius and max width

.modal-form.tutorial-dialog
  border-radius: 8px
  max-width: 400px
  padding: 0 0 1.5em

.tutorial-steps
  display: flex
  flex-direction: column
  max-height: 95vh
  max-width: 95vw
  width: 50ch

  > .step-through-content
    // TODO: I'd rather the header media not scroll.
    overflow-y: auto !important // Override swipe library setting.

  > .step-through-controls
    text-align: center

.media-card.tutorial-step
  > .media-card-content
    @extends .content-container

.media-card-media
  display: block
  max-width: 100%

.step-through-direction
  @extends $reset-button
  vertical-align: middle

.step-through-pips
  margin: 0 0.4em

.step-through-pip
  cursor: pointer
  padding: 0.2em 0.4em

.step-through-pip-input
  cursor: pointer
  position: absolute
  opacity: 0

.step-through-pip-number
  border: 0.2em solid
  border-radius: 50%
  cursor: pointer
  display: inline-block
  height: 0.5em
  overflow: hidden
  text-indent: 2em
  vertical-align: middle
  width: 0.5em

  :focus + &
    box-shadow: 0 0 1px 1px MAIN_HIGHLIGHT

  :checked + &
    background: currentColor


#chat
  color #353535

.chat_content
  height 100%
  padding-top 45px

.chat_messages
  padding 10px
  padding-bottom 55px
  height 100%
  overflow auto

.chat_msg
  font-weight normal
  padding 10px 0
  border-bottom 1px solid #888
  &:last-child
    border-bottom none

.chat_user
  font-family 'montserratbold'
  margin-right 15px

.chat_form
  position absolute
  bottom 0
  height 45px
  width 100%

.chat_input
  display block
  width 100%
  height 100%
  padding 3px 50px 3px 10px
  font-size 1.2em

.chat_send
  position absolute
  top 0
  right 0
  padding 0 10px
  width 50px
  height 100%
  background transparent
  font-size 1.3em

Put scrollbar behind form in webkit

#chat
  color #353535

.chat_content
  height 100%
  padding-top 45px

.chat_messages
  padding 10px
  padding-bottom 55px
  height 100%
  overflow auto

.chat_msg
  font-weight normal
  padding 10px 0
  border-bottom 1px solid #888
  &:last-child
    border-bottom none

.chat_user
  font-family 'montserratbold'
  margin-right 15px

.chat_form
  position absolute
  bottom 0
  height 45px
  width 100%
  -webkit-transform translate3d(0,0,0) // trick to put scrollbar behind form

.chat_input
  display block
  width 100%
  height 100%
  padding 3px 50px 3px 10px
  font-size 1.2em

.chat_send
  position absolute
  top 0
  right 0
  padding 0 10px
  width 50px
  height 100%
  background transparent
  font-size 1.3em


.hide
	display none

tr.group,
tr.group:hover
	background-color #ddd !important

h1
	font-family $miller
	margin 1em auto
	text-align center
	font-weight bold

Remove vertical space at beginning of page

.hide
	display none

tr.group,
tr.group:hover
	background-color #ddd !important

h1
	font-family $miller
	margin 0 auto 1em auto
	text-align center
	font-weight bold


#cards-list-container {
  padding: 150px 15px 15px 250px;
  position: relative;
  z-index: 1;
}

.cards-list {
  height: 100%;
  position: relative;
  width: 100%;
}

Add bottom margin to cards list.

#cards-list-container {
  margin-bottom: 15px;
  padding: 150px 15px 15px 250px;
  position: relative;
  z-index: 1;
}

.cards-list {
  height: 100%;
  position: relative;
  width: 100%;
}


button.m-add-resource-type
  >label
    padding-left 10px

#compute-resource-detail-widget pre
    max-height 350px
    overflow auto

Add pointer cursor to compute resources

button.m-add-resource-type
  >label
    padding-left 10px

#compute-resource-detail-widget pre
    max-height 350px
    overflow auto

.m-cluster-details
    cursor pointer


.subject-viewer
  min-width: 0
  max-width: 100%

  .subject-frame-pips
    .subject-frame-pip
      &.active
        font-weight: 700

  .video-speed
    white-space: nowrap
    display: inline-block
    padding: .3em 0
    line-height: .8
    vertical-align: middle

    label
      overflow: hidden
      padding: 0 .3em

      input[type=radio]
        position: absolute
        left: -50px
        height: 0
        width: 0

        &:checked + span
          color: MAIN_HIGHLIGHT

.subject
  .subject-tools
    button:not(:last-child)
      margin-right: 0.5em

Fix for responsive video player

.subject-viewer
  min-width: 0
  max-width: 100%

  .subject-frame-pips
    .subject-frame-pip
      &.active
        font-weight: 700

  video
    width: 100%

  .video-speed
    white-space: nowrap
    display: inline-block
    padding: .3em 0
    line-height: .8
    vertical-align: middle

    label
      overflow: hidden
      padding: 0 .3em

      input[type=radio]
        position: absolute
        left: -50px
        height: 0
        width: 0

        &:checked + span
          color: MAIN_HIGHLIGHT

.subject
  .subject-tools
    button:not(:last-child)
      margin-right: 0.5em


yunity-orange = #f66c41;

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

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

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

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

.multiline
  white-space: pre;

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

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

.editable-wrap
  width 100%

.editable-click
  color inherit
  border-bottom none

.editable-click:hover
  opacity 0.8
  color inherit

.footer
  opacity 0.6
  text-align center

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

.footer a:hover
  opacity 1.0

Move leaflet controls below md-dialog

yunity-orange = #f66c41;

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

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

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

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

.multiline
  white-space: pre;

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

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

.editable-wrap
  width 100%

.editable-click
  color inherit
  border-bottom none

.editable-click:hover
  opacity 0.8
  color inherit

.footer
  opacity 0.6
  text-align center

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

.footer a:hover
  opacity 1.0

// Fix: leaflet controls should be below md-dialog
.leaflet-control-container
  .leaflet-top
  .leaflet-bottom
    z-index 75 !important


.modal-form-trigger
  @extends $reset-button

.modal-form-underlay
  background: rgba(gray, 0.2)

.modal-form-pointer
  background: white
  box-shadow: 0 0 5px rgba(black 0.3)
  height: 1em
  transform: translateX(0.3em) rotate(45deg)
  width: 1em
  z-index: -1

.modal-form
  background: white
  border-radius: 3px
  box-shadow: 0 5px 15px -5px rgba(black, 0.5)
  color: black
  font-size: 14px
  margin: 0.5em 3vw
  padding: 0.5em 1em

.modal-dialog-toolbar
  bottom: 100%
  margin-bottom: 0.5em
  position: absolute
  right: 0

.modal-dialog-toolbar-button
  @extends $reset-button
  background: rgba(black, 0.5)
  border-radius: 2em
  color: white
  height: 1em
  font-size: 2em
  line-height: 1
  min-width: 1em
  text-shadow: 0 2px 4px black

  &:hover
    background: rgba(black, 0.8)

  &:active
    background: black

Fix modals on project pages

.modal-form-trigger
  @extends $reset-button

.modal-form-underlay
  background: rgba(gray, 0.2)
  z-index: 1

.modal-form-pointer
  background: white
  box-shadow: 0 0 5px rgba(black 0.3)
  height: 1em
  transform: translateX(0.3em) rotate(45deg)
  width: 1em
  z-index: -1

.modal-form
  background: white
  border-radius: 3px
  box-shadow: 0 5px 15px -5px rgba(black, 0.5)
  color: black
  font-size: 14px
  margin: 0.5em 3vw
  padding: 0.5em 1em

.modal-dialog-toolbar
  bottom: 100%
  margin-bottom: 0.5em
  position: absolute
  right: 0

.modal-dialog-toolbar-button
  @extends $reset-button
  background: rgba(black, 0.5)
  border-radius: 2em
  color: white
  height: 1em
  font-size: 2em
  line-height: 1
  min-width: 1em
  text-shadow: 0 2px 4px black

  &:hover
    background: rgba(black, 0.8)

  &:active
    background: black


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

@import 'normalizecss/normalize.css'

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

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

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

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

.bespoke-bullet-inactive
  opacity: 0

.emphatic
  background: #222
  color: white

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

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

Disable pointer events on inactive bullets

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

@import 'normalizecss/normalize.css'

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

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

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

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

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

.emphatic
  background: #222
  color: white

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

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


#entrySignIn.entryPage,
#entrySignUp.entryPage,
#changePassword
  .wrapper-auth
    .title-auth
      color: white
    .entryLogo
      margin-top: 50px
      height: 50px
      width: 50px

// TODO: Fix theming in active-entry so we don't have to do this
.entryPage .wrapper-auth .subtitle-auth
  color: white !important

Fix font colour of error messages popup

#entrySignIn.entryPage,
#entrySignUp.entryPage,
#changePassword
  .wrapper-auth
    .title-auth
      color: white
    .entryLogo
      margin-top: 50px
      height: 50px
      width: 50px

// TODO: Fix theming in active-entry so we don't have to do this
.entryPage .wrapper-auth
  color: white !important


// @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700)

default-font(style=normal, variant=normal, weight=normal, size=12px)
  font-style style
  font-variant variant
  font-weight weight
  font-size size
  font-family 'Montserrat', sans-serif
  text-transform none

label-font(style=normal, variant=normal, weight=normal, size=12px)
  default-font(style:style, variant:variant, weight:weight, size:size)
  font-family 'Museo Sans', 'Montserrat', sans-serif
  text-transform uppercase

italic-font(size=12px)
	font-family 'Museo Sans', 'Montserrat', sans-serif
	font-style italic

@font-face
	font-family Montserrat
	src url(../fonts/Montserrat-Bold.otf)
	font-weight bold
	font-style normal

@font-face
	font-family: Montserrat
	src url(../fonts/Montserrat-Regular.otf)
	font-weight  normal
	font-style normal

@font-face
	font-family Museo Sans
	src url(../fonts/MuseoSans_500.otf)
	font-weight normal
	font-style normal

@font-face
	font-family Museo Sans
	src url(../fonts/MuseoSans_500_italic.otf)
	font-weight normal
	font-style italic

Fix for broken link to font

// @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700)

default-font(style=normal, variant=normal, weight=normal, size=12px)
  font-style style
  font-variant variant
  font-weight weight
  font-size size
  font-family 'Montserrat', sans-serif
  text-transform none

label-font(style=normal, variant=normal, weight=normal, size=12px)
  default-font(style:style, variant:variant, weight:weight, size:size)
  font-family 'Museo Sans', 'Montserrat', sans-serif
  text-transform uppercase

italic-font(size=12px)
	font-family 'Museo Sans', 'Montserrat', sans-serif
	font-style italic

@font-face
	font-family Montserrat
	src url(../fonts/Montserrat-Bold.otf)
	font-weight bold
	font-style normal

@font-face
	font-family: Montserrat
	src url(../fonts/Montserrat-Regular.otf)
	font-weight  normal
	font-style normal

@font-face
	font-family Museo Sans
	src url(../fonts/MuseoSans_500.otf)
	font-weight normal
	font-style normal

@font-face
	font-family Museo Sans
	src url(../fonts/MuseoSans_500_Italic.otf)
	font-weight normal
	font-style italic


@import 'nib'

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

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

Set default scroll height to 400px; Add infinite-tree-table class

@import 'nib'

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

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


.ion-nav {
    display: inline-block;

    .ion-nav-active-state {
        border-bottom: 3px solid nav.border-color;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            transition: border 100ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

            a {
                color: nav.link-color;
                display: block;
                outline: 0;
                padding: 0 15px;
                text-decoration: none;
                text-transform: uppercase;
            }

            &:hover {
                .ion-dropdown {
                    display: block;
                }
            }
        }
    }

    .ion-dropdown {
        background: header.bg;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        display: none;
        position: absolute;

        ul {
            li {
                display: block;
            }

            li:not(:last-of-type) {
                border-bottom: 1px solid nav.border-color;
            }
        }
    }
}

Remove border and add hover effect to dropdowns

.ion-nav {
    display: inline-block;

    .ion-nav-active-state {
        border-bottom: 3px solid nav.border-color;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;

        li {
            display: inline-block;
            transition: border 100ms cubic-bezier(0.165, 0.840, 0.440, 1.000);

            a {
                color: nav.link-color;
                display: block;
                outline: 0;
                padding: 0 15px;
                text-decoration: none;
                text-transform: uppercase;
            }

            &:hover {
                .ion-dropdown {
                    display: block;
                }
            }
        }
    }

    .ion-dropdown {
        background: header.bg;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        display: none;
        position: absolute;

        ul {
            li {
                display: block;

                &:hover {
                    background-color: #eee;
                }
            }
        }
    }
}


.card {
  color: #555555;
  cursor: pointer;
  height: 222px;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
  width: 222px;

  &:hover {
    .card-actions {
      display: block;
    }
  }

  &.is-featured {
    height: 459px;
    width: 459px;
  }

  &.is-detail {
    height: auto;
    margin: 0;
    width: 100%;
  }
}

.card-info {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%
  z-index: 5;
}

.card-info-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-name {
  color: #6C6C6C;
  font-size: 14px;
}

.card-author,
.card-comments {
  color: #BBBBBB;
  font-size: 11px;
}

.card-actions {
  background: #FFFFFF;
  display: none;
  right: 10px;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 15;
}

Fix note cards text color.

.card {
  color: #555555;
  cursor: pointer;
  height: 222px;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
  position: relative;
  overflow: hidden;
  width: 222px;

  &:hover {
    .card-actions {
      display: block;
    }
  }

  &.is-featured {
    height: 459px;
    width: 459px;
  }

  &.is-detail {
    height: auto;
    margin: 0;
    width: 100%;
  }
}

.card-link {
  &, &:hover, &:focus, &:active, &:visited {
    color: #555555;
  }
}

.card-info {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%
  z-index: 5;
}

.card-info-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-name {
  color: #6C6C6C;
  font-size: 14px;
}

.card-author,
.card-comments {
  color: #BBBBBB;
  font-size: 11px;
}

.card-actions {
  background: #FFFFFF;
  display: none;
  right: 10px;
  padding: 5px;
  position: absolute;
  top: 10px;
  z-index: 15;
}


/** Stylus Styles */
@import '../../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
        primary: #44A148
        accent: $cyan.lighten-2
        secondary: $indigo.darken-2
        info: $blue.base
        warning: $amber.base
        error: $red.base
        success: $green.base
}
@import '../../node_modules/vuetify/src/stylus/main.styl'

Fix for drawer link issue

/** Stylus Styles */
@import '../../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
        primary: #44A148
        accent: $cyan.lighten-2
        secondary: $indigo.darken-2
        info: $blue.base
        warning: $amber.base
        error: $red.base
        success: $green.base
}
.navigation-drawer > .list .list__tile--active > *:first-child .icon
  color: rgba(0,0,0,0.54) !important

.navigation-drawer > .list .list__tile--active .list__tile__title
  color: rgba(0,0,0,0.87) !important

.navigation-drawer a.router-link-exact-active.list__tile--link > .list__tile__content > .list__tile__title, .navigation-drawer a.router-link-exact-active.list__tile--link > .list__tile__action > i.icon
  color: #44A148 !important
@import '../../node_modules/vuetify/src/stylus/main.styl'


@require '../stylus_lib'
@require './artist_item.styl'

.eoy-artist-feature
  padding 20px 40px
  margin 50px 0
  text-align center
  border 2px solid gray-lighter-color
  @media (max-width: 1300px)
    margin 50px 20px
  &__headline
    garamond-size('xxl-headline')
    padding-bottom 10px
  &__subheadline
    garamond-size('s-body')
    color gray-darker-color
    padding-bottom 20px
    max-width 530px
    margin 0 auto
  &__lists
    &__list
      margin-top 40px
      &__headline
        garamond-size('l-headline')
        padding-bottom 10px
      &__subheadline
        garamond-size('s-body')
        color gray-darker-color
        max-width 40%
        margin 0 auto
      &__artists
        margin-top 20px
        text-align left

Use the same color for anchors as text.

@require '../stylus_lib'
@require './artist_item.styl'

.eoy-artist-feature
  padding 20px 40px
  margin 50px 0
  text-align center
  border 2px solid gray-lighter-color
  @media (max-width: 1300px)
    margin 50px 20px
  &__headline
    garamond-size('xxl-headline')
    padding-bottom 10px
  &__subheadline
    garamond-size('s-body')
    color gray-darker-color
    padding-bottom 20px
    max-width 530px
    margin 0 auto
    a
      color gray-darker-color
  &__lists
    &__list
      margin-top 40px
      &__headline
        garamond-size('l-headline')
        padding-bottom 10px
      &__subheadline
        garamond-size('s-body')
        color gray-darker-color
        max-width 40%
        margin 0 auto
      &__artists
        margin-top 20px
        text-align left


// Wrap links so that they don't overflow their parent container.
a
  word-wrap: break-word

.navbar
  background: rgba(9, 46, 78, 1.0)
  border: 0
  border-radius: 0
  margin: 0

  .navbar-toggle
    background: transparent
    border: 1px solid white
    border-radius: 0

    .icon-bar
      background: white

    &:hover
      background: transparent

  .navbar-collapse
    border-color: transparent

  .navbar-nav > li > a, a.navbar-brand
    color: white
    font-weight: 300
    transition: color 0.1s

    &:hover
      background: lighten(mm-red, 50%)

Fix hover for navbar items.

// Wrap links so that they don't overflow their parent container.
a
  word-wrap: break-word

.navbar
  background: rgba(9, 46, 78, 1.0)
  border: 0
  border-radius: 0
  margin: 0

  .navbar-toggle
    background: transparent
    border: 1px solid white
    border-radius: 0

    .icon-bar
      background: white

    &:hover
      background: lighten(mm-red, 50%)

  .navbar-collapse
    border-color: transparent

  .navbar-nav > li > a, a.navbar-brand
    color: white
    font-weight: 300
    transition: color 0.1s
    &:hover
      background: lighten(mm-red, 50%)

  & .open > a, .nav .open > a:hover
    background: lighten(mm-red, 50%)
    cursor: pointer

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
  background: lighten(mm-red, 92%)


@import 'mixins.styl'

.chromosome
  position: relative
  &.A
    float: left
    clear: both
  &.B
    float: left
    margin-left: 80px
  .chromosome-label
    font-weight: bold
  select
    display: block
    position: absolute
    left: 50px
    top: 0
    &.horns
      top: 25px
    &.scales
      top: 50px

    &.wings
      top: 25px
    &.legs
      top: 50px
    &.tail
      top: 75px

    &.plates
      top: 25px
    &.fire
      top: 50px
    &.color1
      top: 75px
    &.color2
      top: 100px

Make chromosome pulldowns a consistent size.

@import 'mixins.styl'

.chromosome
  position: relative
  &.A
    float: left
    clear: both
  &.B
    float: left
    margin-left: 80px
  .chromosome-label
    font-weight: bold
  select
    display: block
    position: absolute
    left: 50px
    top: 0
    width: 50px
    &.horns
      top: 25px
    &.scales
      top: 50px

    &.wings
      top: 25px
    &.legs
      top: 50px
    &.tail
      top: 75px

    &.plates
      top: 25px
    &.fire
      top: 50px
    &.color1
      top: 75px
    &.color2
      top: 100px


game-width = 640px

body
  background: #444 url('../img/blackorchid.png')

.game
  bottom: 0
  color: #fff
  left: 0
  margin: auto
  position: absolute
  right: 0
  top: 0
  width: game-width

  ul
    padding: 10px
    background: #000
    border: 0
    height: 75px
    margin-top: 5px
    list-style: none
    width: game-width - @padding * 2
    overflow-y: scroll
    font: 1.4em monospace

    li
      list-style: none

    li.red
      color: FF0000

    li.green
      color: 00FF00

  .canvas-wrap
    position: relative

    .win, .lose
      background: rgba(0, 0, 0, 0.7)
      display: none
      font-size: 2em
      height: 100%
      position: absolute
      text-align: center
      top: 0
      width: 100%

      .inner
        margin: 150px 50px

        p
          margin-bottom: 20px

Fix styling of good and bad messages.

game-width = 640px

body
  background: #444 url('../img/blackorchid.png')

.game
  bottom: 0
  color: #fff
  left: 0
  margin: auto
  position: absolute
  right: 0
  top: 0
  width: game-width

  ul
    padding: 10px
    background: #000
    border: 0
    height: 75px
    margin-top: 5px
    list-style: none
    width: game-width - @padding * 2
    overflow-y: scroll
    font: 1.4em monospace

    li
      list-style: none

      &.bad
        color: #f00

      &.good
        color: #0f0

  .canvas-wrap
    position: relative

    .win, .lose
      background: rgba(0, 0, 0, 0.7)
      display: none
      font-size: 2em
      height: 100%
      position: absolute
      text-align: center
      top: 0
      width: 100%

      .inner
        margin: 150px 50px

        p
          margin-bottom: 20px


$headerTextColor = #fdfcfc
$headerHighlightColor = #555
$textColor = #666
$highlightTextColor = #333
$headerHeight = 40px

.c-header-container
  color $headerTextColor
  padding 0 12px 0 18px

  .btn-group
    margin-left 10px
    margin-top 5px

  .btn
    min-width 40px
    height 30px

.c-app-icon
  font-size 20px
  margin-right 10px

.c-app-title
  display inline-block
  line-height $headerHeight
  font-weight bold
  font-size 20px

.header-left
  float left
  i
    line-height $headerHeight
    color $headerTextColor
    cursor pointer
    border-radius 3px
    padding 5px

    &:hover
      background-color $headerHighlightColor

.header-right
  float right
  a
    line-height $headerHeight
    color $headerTextColor
    cursor pointer
    border-radius 3px
    padding 5px

    &:hover
      background-color $headerHighlightColor

.header-center
  position absolute
  width 33.33%
  margin-left 33.33%
  margin-top 5px

  input.c-search-filter.input-sm
    width 100%
    color $textColor
    border 1px solid #ddd
    border-radius 0

    &:focus
      box-shadow none
      outline none

Fix weird bootstrap styling bug on the search button tooltip

$headerTextColor = #fdfcfc
$headerHighlightColor = #555
$textColor = #666
$highlightTextColor = #333
$headerHeight = 40px

.c-header-container
  color $headerTextColor
  padding 0 12px 0 18px

  .btn-group
    margin-left 10px
    margin-top 5px

  .btn
    min-width 40px
    height 30px

.c-app-icon
  font-size 20px
  margin-right 10px

.c-app-title
  display inline-block
  line-height $headerHeight
  font-weight bold
  font-size 20px

.header-left
  float left
  i
    line-height $headerHeight
    color $headerTextColor
    cursor pointer
    border-radius 3px
    padding 5px

    &:hover
      background-color $headerHighlightColor

.header-right
  float right
  a
    line-height $headerHeight
    color $headerTextColor
    cursor pointer
    border-radius 3px
    padding 5px

    &:hover
      background-color $headerHighlightColor

.header-center
  position absolute
  width 33.33%
  margin-left 33.33%
  margin-top 5px

  button.c-search-filter-apply
    border-top-right-radius 3px !important
    border-bottom-right-radius 3px !important

  input.c-search-filter.input-sm
    width 100%
    color $textColor
    border 1px solid #ddd
    border-radius 0

    &:focus
      box-shadow none
      outline none


// #/
//
// Timeline view
#timeline
    padding 0 0 50px

    .map
        height 100px

    h1
        background #efefef
        border-bottom 1px solid #cdcdcd
        border-top 1px solid #cdcdcd
        font-size 18px
        margin .5em 0
        padding .5em
        text-align center

    .check-in
        color #fff
        font-size 18px
        margin 0 auto

    x-slidebox, x-tabbar
        margin 0 auto
        width 90%

    x-tabbar-tab.active
        background-color #00405d
        color #eaeaea
        cursor default !important

    x-slide
        display none
        &.active
            display block

    .shout
        clear both
        font-size .9em
        padding-top 1em

#check-in
    color #fff
    font-size 20px
    margin 0 auto

Fix :active tab background color

// #/
//
// Timeline view
#timeline
    padding 0 0 50px

    .map
        height 100px

    h1
        background #efefef
        border-bottom 1px solid #cdcdcd
        border-top 1px solid #cdcdcd
        font-size 18px
        margin .5em 0
        padding .5em
        text-align center

    .check-in
        color #fff
        font-size 18px
        margin 0 auto

    x-slidebox, x-tabbar
        margin 0 auto
        width 90%

    x-tabbar-tab.active
        background-color #00405d
        color #eaeaea
        cursor default !important

        &:active
            background-color #a0a0a0

    x-slide
        display none
        &.active
            display block

    .shout
        clear both
        font-size .9em
        padding-top 1em

#check-in
    color #fff
    font-size 20px
    margin 0 auto


.results
  font-size 1.1em

  .smallprint
    position relative
    top -1.4em
    font-size 0.8em

  .metric
    margin-bottom 0.7em

  .functions
    list-style none

  .function-name
    margin 1em 0 0.5em 0
    font-size 1.1em

Remove text-transform on function names.

.results
  font-size 1.1em

  .smallprint
    position relative
    top -1.4em
    font-size 0.8em

  .metric
    margin-bottom 0.7em

  .functions
    list-style none

  .function-name
    margin 1em 0 0.5em 0
    font-size 1.1em
    text-transform none


.overlay-container
  position absolute
  right 5px
  bottom 5px

// Extend this class and add content
// to its before pseudo element to use
.overlay-button
  iconfont-styling()
  display inline-block
  width 40px
  height @width
  cursor pointer
  color white
  background-color dark-gray-text-color
  background-color rgba(0, 0, 0, 0.4)
  text-align center
  font-size 16px
  line-height @height
  border-radius (@width / 2)
  opacity 1
  transition opacity 0.125s
  &:hover
    background-color black
  &[data-state='saved']
    opacity 1
    background-color highlight-color
    &:hover
      background-color bad-red-color
      &:before
        content '\e621'
      &.is-clicked
        background-color highlight-color

.overlay-button-save
  @extends .overlay-button
  &:before
    content '\e622'

.artwork-item
  &:hover
    .overlay-button-save
      opacity 1
  .overlay-button-save
    opacity 0
    &[data-state='saved']
      opacity 1

Save button on artwork_item should only appear on hover.

.overlay-container
  position absolute
  right 5px
  bottom 5px

// Extend this class and add content
// to its before pseudo element to use
.overlay-button
  iconfont-styling()
  display inline-block
  width 40px
  height @width
  cursor pointer
  color white
  background-color dark-gray-text-color
  background-color rgba(0, 0, 0, 0.4)
  text-align center
  font-size 16px
  line-height @height
  border-radius (@width / 2)
  opacity 1
  transition opacity 0.125s
  &:hover
    background-color black
  &[data-state='saved']
    opacity 1
    background-color highlight-color
    &:hover
      background-color bad-red-color
      &:before
        content '\e621'
      &.is-clicked
        background-color highlight-color

.overlay-button-save
  @extends .overlay-button
  &:before
    content '\e622'

.artwork-item
  &:hover
    .overlay-button-save
      opacity 1
  .overlay-button-save
    opacity 0
    &[data-state='saved']:hover
      opacity 1


// Footer
//
// Styles for basic footer.
//
// Markup: footerbar.twig
//
// Styleguide Layout.Footer
.footerbar
    {fontSecondary}
    clear both
    width 100%
    min-height 30px
    padding 6px 24px
    border-top 3px solid $color-footer
    background-color $color-default
    color $color-footer

    ul
        float right

    li
        display inline
        padding 0 24px
        border-left 1px solid $color-footer

        &:first-child
            padding-left 0
            border-left none

    a
        color $color-base-lighten

        &:hover
            text-decoration underline

Replace px to rem in footerbar

// Footer
//
// Styles for basic footer.
//
// Markup: footerbar.twig
//
// Styleguide Layout.Footer
.footerbar
    _pt(.5)
    _pb(.5)
    _pr(2)
    _pl(2)
    {fontSecondary}
    clear both
    width 100%
    min-height 3rem
    border-top 3px solid $color-footer
    background-color $color-default
    color $color-footer

    a
        color $color-base-lighten

        &:hover
            text-decoration underline


[data-ns="widgets/webcam"] {
    .widget-content {
        position: relative;

        .webcam-on-container {
            min-height: 240px;
            text-align: center;

            .webcam-viewport {
                max-width: 100%;
                height: auto;
            }
        }
        .webcam-off-container {
            padding: 10px;
            text-align: center;

            .icon-webcam {
                display: inline-block;
                height: 64px;
                width: 64px;
                background: url("images/64x64/webcam.png") no-repeat 0 0;
            }
        }
    }
}

Set the webcam viewport width to 100%

[data-ns="widgets/webcam"] {
    .widget-content {
        position: relative;

        .webcam-on-container {
            min-height: 240px;
            text-align: center;

            .webcam-viewport {
                width: 100%;
                height: auto;
            }
        }
        .webcam-off-container {
            padding: 10px;
            text-align: center;

            .icon-webcam {
                display: inline-block;
                height: 64px;
                width: 64px;
                background: url("images/64x64/webcam.png") no-repeat 0 0;
            }
        }
    }
}


@import '{}/node_modules/normalize-stylus/normalize.styl'

@import './mixins.styl'
@import './variables.styl'

*
  font-family: Arial, Helvetica, sans-serif

body
  background-color: $primary-grey

ol
  list-style: none
  marg-block 0
  marg-inline 0
  pad-inline 0
  pad-block 0

p
  marg-block 0
  marg-inline 0

table
  border-spacing: 0
  td
    padding: 0

.to-left
  float: left

.to-right
  float: right

.bold
  text-bold()

@import '../components/header/header.styl'
@import '../components/main/main.styl'

Create styling used by the selected bets box; Reset buttons styling.

@import '{}/node_modules/normalize-stylus/normalize.styl'

@import './mixins.styl'
@import './variables.styl'

*
  font-family: Arial, Helvetica, sans-serif

body
  background-color: $primary-grey

button
  background-color: transparent
  border: 0
  color: inherit
  cursor: pointer
  font-weight: inherit
  outline: 0
  padding: 0

ol
  list-style: none
  marg-block 0
  marg-inline 0
  pad-inline 0
  pad-block 0

p
  marg-block 0
  marg-inline 0

table
  border-spacing: 0
  td
    padding: 0

.bold
  text-bold()

.minimized
  display: none

.maximized
  display: block

.rotate-180
  transform: rotate(180deg)

.to-left
  float: left

.to-right
  float: right

@import '../components/header/header.styl'
@import '../components/main/main.styl'
@import '../components/betsSelectedBox/betsSelectedBox.styl'


// Blog Feed

.blog-feed
  margin-top global-margin * 3

.blog-feed__header
  margin-top global-margin * 2

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-feed__posts
  margin-top global-margin
  display flex
  flex-flow row wrap
  margin-left: -20px;
  margin-right: -20px;

// Blog Post

.blog-post
  flex 0 0 33.333333%
  padding 0 20px 40px

.blog-post__header
  text-decoration none

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-post__image
  height 165px
  overflow hidden
  margin-bottom 20px
  position relative

  img
    display block
    position absolute
    top 50%
    left 0
    transform translateY(-50%)

Fix display of recent blog posts after theme update

// Blog Feed

.blog-feed
  margin-top global-margin * 3

.blog-feed__header
  margin-top global-margin * 2

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-feed__posts
  margin-top global-margin
  display flex
  flex-flow row wrap
  margin-left: -20px;
  margin-right: -20px;

// Blog Post

.blog-post
  flex 0 0 33.333333%
  padding 0 20px 40px

  // Fix for unnecessary screen reader text for 'read more' link in blog feed
  .screen-reader-text
    display none

.blog-post__header
  text-decoration none

  a
    text-decoration none

  a:hover
    text-decoration underline

.blog-post__image
  height 220px
  overflow hidden
  margin-bottom 20px
  position relative

  img
    display block
    position absolute
    top 50%
    left 0
    transform translateY(-50%)


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

.sections-exclude-dlg__sections
  min-height 200px

Fix scroll for sections exclude dialog

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

.sections-exclude-dlg__sections
  min-height 200px
  overflow scroll


// Wrap in body for higher specificity
body
  .mdl-textfield--floating-label.is-invalid .mdl-textfield__label
    color                                   mdl-error

  .mdl-textfield__error
    display                                 block

  :invalid
    box-shadow                              none

  .textarea-label:after
    bottom                                  23px

Fix browser discrepancy on textarea

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

  .mdl-textfield__error
    display                                 block

  :invalid
    box-shadow                              none

  textarea
    vertical-align                          top


bgLeft = #00a86b
bgRight = #6f5499

.jumbotron
    background-color bgRight
    background-image -webkit-gradient(linear, left top, left bottom, from(bgLeft), to(bgRight))
    background-image -webkit-linear-gradient(top, bgLeft 0%, bgRight 100%)
    background-image -o-linear-gradient(top, bgLeft 0%, bgRight 100%)
    background-image linear-gradient(to right, bgLeft 0%, bgRight 100%)

.jumbotron h1, p, p a
    color white

.jumbotron p a
    border-bottom 1px dotted white

Fix text color & label position

bgLeft = #00a86b
bgRight = #6f5499

.jumbotron
    background-color bgRight
    background-image -webkit-gradient(linear, left top, left bottom, from(bgLeft), to(bgRight))
    background-image -webkit-linear-gradient(top, bgLeft 0%, bgRight 100%)
    background-image -o-linear-gradient(top, bgLeft 0%, bgRight 100%)
    background-image linear-gradient(to right, bgLeft 0%, bgRight 100%)

.jumbotron h1, .jumbotron p
    color white

.jumbotron p a
    color: white
    border-bottom 1px dotted white

label
    margin-right: 20px


.keyframeView
    display flex
    flex-flow row

.propList
    display block
    width 220px
    height 100%
    flex none

.propItem
    display flex
    justify-content space-between
    height 24px
    padding 0 4px
    line-height 24px

.propItemName
    flex 1

.propKeyframeIndicator
    flex 0
    display inline-block
    width 16px
    height 16px
    margin-right 8px

    font-size 14px
    line-height 2

    opacity .3

    &.propKeyframeIndicator--hasKeyframe
        opacity 1

    &.propKeyframeIndicator--nonAnimatable::before
        content ''
        display inline-block
        width calc(1em + 2px)
        height 1em

.keyframeContainer
    display flex
    flex 1
    height 100%

// .propItemInput
//     padding:

.keyframeGraph
    height 100%

    // .keyframe
    //     width 8px
    //     height 8px

    .keyframeInner
        transform-origin 4px 4px
        transform rotateZ(45deg)

    .keyframeLineToHandle
        stroke rgba(#fff, .2)

Fix prop value input overflowing

.keyframeView
    display flex
    flex-flow row

.propList
    display block
    width 220px
    height 100%
    flex none

.propItem
    display flex
    justify-content space-between
    height 24px
    padding 0 4px
    line-height 24px

.propItemName
    flex 1

.propItemInput
    width 5em

    :global(._drag-number-input), select
        display block
        width 100%

.propKeyframeIndicator
    flex 0
    display inline-block
    width 16px
    height 16px
    margin-right 8px

    font-size 14px
    line-height 2

    opacity .3

    &.propKeyframeIndicator--hasKeyframe
        opacity 1

    &.propKeyframeIndicator--nonAnimatable::before
        content ''
        display inline-block
        width calc(1em + 2px)
        height 1em

.keyframeContainer
    display flex
    flex 1
    height 100%

.keyframeGraph
    height 100%

    // .keyframe
    //     width 8px
    //     height 8px

    .keyframeInner
        transform-origin 4px 4px
        transform rotateZ(45deg)

    .keyframeLineToHandle
        stroke rgba(#fff, .2)


.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
    border 1px solid border_lt
    td, th
      padding .5em .75em
      height auto
      border 1px solid border_lt
    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

Fix white-space wrapping of long tables.

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

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

  .week
    margin-bottom 0 !important

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

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

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

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


.markdown
  margin 0

  > h1
    margin 0
    padding 20px 0 5px 0
    text-align left
    line-height 1.2
    @extend .ellipsis
    overflow-y hidden
    text-transform none
    a
      color text-color
      text-decoration none

  >h2,
  h3,h4,h5,h6
    color text-color
    font-weight 700
    a
      font-weight 700
      color text-color
      text-decoration none

    &.deep-link
      a
        &:before
          display inline-block
          content "#"
          color white
          margin-left -20px
          width 20px
          transition all 0.2s
          @media only screen and (max-width: mobileMaxWidth)
            display none
        &:hover
          &:before
            color text-color

  h3
    font-size 20px

  h4,h5,h6
    font-size 18px

  ol, ul
    ol, ul
      margin 0 0 0 20px

  p, li
    font-size 16px
    a
      font-weight 600

  th
    font-weight bold

  td, th
    padding 0 5px
    background #F5F5F5

  img
    max-width 100%

// Grabbed all the themes from this repo:
// https://github.com/atom/atom-light-syntax
//
@import "highlights/light-syntax"

Fix truncating long headings related issue

.markdown
  margin 0

  > h1
    margin 0
    padding 20px 0 5px 0
    text-align left
    line-height 1.2
    @extend .ellipsis
    white-space: normal
    overflow-y hidden
    text-transform none
    a
      color text-color
      text-decoration none

  >h2,
  h3,h4,h5,h6
    color text-color
    font-weight 700
    a
      font-weight 700
      color text-color
      text-decoration none

    &.deep-link
      a
        &:before
          display inline-block
          content "#"
          color white
          margin-left -20px
          width 20px
          transition all 0.2s
          @media only screen and (max-width: mobileMaxWidth)
            display none
        &:hover
          &:before
            color text-color

  h3
    font-size 20px

  h4,h5,h6
    font-size 18px

  ol, ul
    ol, ul
      margin 0 0 0 20px

  p, li
    font-size 16px
    a
      font-weight 600

  th
    font-weight bold

  td, th
    padding 0 5px
    background #F5F5F5

  img
    max-width 100%

// Grabbed all the themes from this repo:
// https://github.com/atom/atom-light-syntax
//
@import "highlights/light-syntax"


// ==========================================================================
// Base styles: opinionated defaults
// ==========================================================================

body {
    min-width: 960px;
    @media (max-width: 767px) {
        min-width: 0;
    }
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

Apply default style to the body element

// ==========================================================================
// Base styles: opinionated defaults
// ==========================================================================

body {
    margin: 0;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    color: #222222;
    text-align: left;
    background-color: #ffffff;
}

body {
    min-width: 960px;
    @media (max-width: 767px) {
        min-width: 0;
    }
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


.activity-enter
  transition all 0.5s
  transform translateX(-120%)
  max-height 0
  &.activity-enter-active
    max-height 50px
    transform translateX(0)

.activity-leave
  transition all 0.5s
  opacity 1
  max-height 50px
  &.activity-leave-active
    opacity 0
    max-height 0
    color red

Tweak animation max-height for activities

.activity-enter
  transition all 0.5s
  transform translateX(-120%)
  max-height 0
  &.activity-enter-active
    max-height 34px
    transform translateX(0)

.activity-leave
  transition all 0.5s
  opacity 1
  max-height 34px
  &.activity-leave-active
    opacity 0
    max-height 0
    color red


.fv-layout-zoom
  &.mission-backdrop
    background-image: none
    background-color: black

  #zoom-challenge-container
    position: absolute
    width: 100%
    height: 100%
    left: 0
    top: 0

    iframe
      width: 100%
      height: 100%
      border: none

Reduce the height of the iframe for protein game to make tutorial popups visible

.fv-layout-zoom
  &.mission-backdrop
    background-image: none
    background-color: black

  #zoom-challenge-container
    position: absolute
    width: 100%
    height: 100%
    left: 0
    top: 0

    iframe
      width: 100%
      height: 94%
      border: none


$stars-count = 5

.star-rating
	position relative
	display inline-block
	width @height * $stars-count
	height 30px
	background url('../images/star-rating__star-grey.svg') 0 50% repeat-x
	background-size auto 100%

	&__bar
		position absolute
		top 0
		left 0
		overflow hidden
		width 0
		height 100%
		background url('../images/star-rating__star.svg') 0 50% repeat-x
		background-size auto 100%
		white-space nowrap

Fix bug wiht stylus formatter

$stars-count = 5
$height = 30px

.star-rating
	position relative
	display inline-block
	width $height * $stars-count
	height $height
	background url('../images/star-rating__star-grey.svg') 0 50% repeat-x
	background-size auto 100%

	&__bar
		position absolute
		top 0
		left 0
		overflow hidden
		width 0
		height 100%
		background url('../images/star-rating__star.svg') 0 50% repeat-x
		background-size auto 100%
		white-space nowrap


/* List View */
.ember-list-view {
    overflow: auto;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.ember-list-item-view {
    border-bottom: 1px solid #bbb;
    height: 60px;
    position: absolute;
    width: 100%;
}

// Override some defaults
hr {
    margin: 0;
    padding: 0;
}

ul, dl, ol {
    margin: 0;
    padding: 0;
}

// Fixed header/footer
x-layout {
    > header, > footer {
        position: fixed;
        width: 100%;
    }

    > header {
        top: 0;
    }

    > section {
        padding: 45px 0;
    }

    > footer {
        bottom: 0;
    }
}

// Tabs
x-tabbar-tab a {
    color: #fff;
    text-decoration: none;
}

.my-podcasts {
    margin: 5px 0;
}

.my-podcasts li {
    display: inline-block;
    float: left;
    margin: 0 2.5% 20px;
    width: 45%;
}

.my-podcasts li img {
    display: inline-block;
    height: 100%;
    width: 100%;
}

Add enough padding for "now playing" bar

/* List View */
.ember-list-view {
    overflow: auto;
    position: relative;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.ember-list-item-view {
    border-bottom: 1px solid #bbb;
    height: 60px;
    position: absolute;
    width: 100%;
}

// Override some defaults
hr {
    margin: 0;
    padding: 0;
}

ul, dl, ol {
    margin: 0;
    padding: 0;
}

// Fixed header/footer
x-layout {
    > header, > footer {
        position: fixed;
        width: 100%;
    }

    > header {
        top: 0;
    }

    > section {
        padding: 45px 0 75px;
    }

    > footer {
        bottom: 0;
    }
}

// Tabs
x-tabbar-tab a {
    color: #fff;
    text-decoration: none;
}

.my-podcasts {
    margin: 5px 0;
}

.my-podcasts li {
    display: inline-block;
    float: left;
    margin: 0 2.5% 20px;
    width: 45%;
}

.my-podcasts li img {
    display: inline-block;
    height: 100%;
    width: 100%;
}


yunity-orange = #f66c41;

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

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

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

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

.multiline
  white-space: pre;

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

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

.editable-wrap
  width 100%

.editable-click
  color inherit
  border-bottom none

.editable-click:hover
  opacity 0.8
  color inherit

.footer
  opacity 0.6
  text-align center

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

.footer a:hover
  opacity 1.0

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

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

Revert "Move md-dialog on top of leaflet"


h1
h2
h3
h4
h5
h6
	font-family $heading-font-family
	font-weight $heading-font-weight
	margin $base-line-height 0 0
	line-height normal
	a
		&
		&:visited
			color inherit

h1
	font-size 2.25em

h2
	font-size 2em

h3
	font-size 1.75em

h4
	font-size 1.5em

h5
	font-size 1.25em

h6
	font-size 1em

Fix bug in hedings vertical spacings

h1
h2
h3
h4
h5
h6
	font-family $heading-font-family
	font-weight $heading-font-weight
	margin $base-line-height 0 0.5em
	line-height normal
	a
		&
		&:visited
			color inherit

h1
	font-size 2.25em

h2
	font-size 2em

h3
	font-size 1.75em

h4
	font-size 1.5em

h5
	font-size 1.25em

h6
	font-size 1em


@require '../vars.styl'

// The dots in the three bounce
.Spinner
  text-align center

  :global .three-bounce > div
    background-color passion-pink
    animation-duration 0.8s
    width 8px
    height 8px

    &:not(:last-child)
      margin-right 5px

Update spinner color in redux example

@require '../vars.styl'

// The dots in the three bounce
.Spinner
  text-align center

  :global .three-bounce > div
    background-color pink
    animation-duration 0.8s
    width 8px
    height 8px

    &:not(:last-child)
      margin-right 5px


// import these generic styles from any stylus file with:
// @import '{kctang:mdl-ui}/mdl-ui.styl'

list-card()
  background-color #46B6AC
  background-position center
  background-size cover

list-card-icon()
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 18px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.8);

mdl-ui-background-image(url)
  background-image url(url)
  background-position center center
  background-repeat no-repeat
  background-size cover

Add stylus mixins for BEM methodology

// import these generic styles from any stylus file with:
// @import '{kctang:mdl-ui}/mdl-ui.styl'

list-card()
  background-color #46B6AC
  background-position center
  background-size cover

list-card-icon()
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
  line-height: 18px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.8);

mdl-ui-background-image(url, background-size = cover)
  background-image url(url)
  background-position center center
  background-repeat no-repeat
  background-size background-size

// mixin to define BEM element
e(name)
  &__{name}
    {block}

// mixin to define BEM modifier
m(name)
  &--{name}
    {block}


.list-divider-pipe
    margin 0
    padding 0

    li
        display inline-block

@media screen and (min-width: 481px)
  .list-divider-pipe

      li

          + li:before
              content '|'
              padding 0 .3em 0 .1em
              color $lightgray

Optimize navigation and links on small screens

.list-divider-pipe
    margin 0
    padding 0

    li
        display inline-block

        + li:before
            content '|'
            padding 0 .3em 0 .1em
            color $lightgray

@media screen and (max-width: 480px)
    nav
        .list-divider-pipe
            margin-bottom 1rem
            overflow hidden

            li + li:before
                display none


.introjs-tooltip
    background-color transparent
    color white
    box-shadow none

.tooltipBottom
    min-width inherit
    max-width inherit
    width 200%!important // @stylint ignore

.tooltipRight, .tooltipSmallRight
    min-width 100%
    max-width 100%

.tooltipSmallBottom
    margin-top -20px
    left -10px!important // @stylint ignore
    right -10px!important // @stylint ignore

.tooltipLeft
    left -300px!important // @stylint ignore
    right -50px!important // @stylint ignore
    min-width inherit
    max-width inherit

.tooltipCenter
    top 100%!important // @stylint ignore
    left 100%!important // @stylint ignore
    width 400px

.introjs-prevbutton, .introjs-arrow, .introjs-helperNumberLayer, .introjs-skipbutton
    display none !important // @stylint ignore

.introjs-tooltipbuttons
    text-align left

.introjs-button
    margin-top 20px
    text-align center
    padding 11px 24px
    border-radius 2px
    background-color dodger-blue
    color white
    background-image none
    text-shadow inherit
    border-width 0
    font-size 14px
    text-transform uppercase

.introjs-button:focus, .introjs-button:active
    background-image none

.introjs-button:hover
    box-shadow none

Remove text on small screen :art:

.introjs-tooltip
    background-color transparent
    color white
    box-shadow none

.tooltipBottom
    min-width inherit
    max-width inherit
    width 200%!important // @stylint ignore

.tooltipRight, .tooltipSmallRight
    min-width 100%
    max-width 100%

.tooltipSmallBottom
    margin-top -20px
    left -10px!important // @stylint ignore
    right -10px!important // @stylint ignore

.tooltipLeft
    left -300px!important // @stylint ignore
    right -50px!important // @stylint ignore
    min-width inherit
    max-width inherit

.tooltipCenter
    top 100%!important // @stylint ignore
    left 100%!important // @stylint ignore
    width 400px

.introjs-prevbutton, .introjs-arrow, .introjs-helperNumberLayer, .introjs-skipbutton
    display none !important // @stylint ignore

.introjs-tooltipbuttons
    text-align left

.introjs-button
    margin-top 20px
    text-align center
    padding 11px 24px
    border-radius 2px
    background-color dodger-blue
    color white
    background-image none
    text-shadow inherit
    border-width 0
    font-size 14px
    text-transform uppercase

.introjs-button:focus, .introjs-button:active
    background-image none

.introjs-button:hover
    box-shadow none

@media (max-width: 40em)
    .introjs-tooltiptext
        div
            display none
        h1
            font-size 1.5em


body > div:first-child {
    padding-top: 60px;
}

.table td, .table th {
    vertical-align: middle;
}
body {
    background-size: cover cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

.toast-top-full-width {
    top: 60px;
}

.code {
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 120%;
}

@media (max-width: 1200px) {
    .navbar-collapse {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }
}

.form-group.required label:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: " \f621";
    color: red;
}

Set font-family of FontAwesome to Pro version

body > div:first-child {
    padding-top: 60px;
}

.table td, .table th {
    vertical-align: middle;
}
body {
    background-size: cover cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-attachment: fixed !important;
}

.toast-top-full-width {
    top: 60px;
}

.code {
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 120%;
}

@media (max-width: 1200px) {
    .navbar-collapse {
        max-height: calc(100vh - 56px);
        overflow-y: auto;
    }
}

.form-group.required label:after {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    content: " \f621";
    color: red;
}


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

Change size of current weather background

.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-top: 35px
		.btn
			text-align: center
	&.show
		opacity: 1
		transition: opacity .3s
		display: flex


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

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

.page-head
  margin-top 1.5rem
  margin-bottom 1rem

  .page-actions
    margin-top -.25rem

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

Implement user edit page in ACP

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

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

.page-head
  margin-top 1.5rem
  margin-bottom 1rem

  .page-actions
    margin-top -.25rem

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

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


.ChannelBlockGroup
  width 100%
  border-top 1px solid bordergray
  display flex
  padding (unit * 2) 0
  justify-content center

  @media (min-width:(block_width_mar * 3) + 20) and (max-width:(block_width_mar * 4) + 20)
    .Block:nth-of-type(1n+4)
      display none
  @media (min-width:(block_width_mar * 2) + 20) and (max-width:(block_width_mar * 3) + 20)
    .Block:nth-of-type(1n+3)
      display none
  @media (min-width:(block_width_mar * 1) + 20) and (max-width:(block_width_mar * 2) + 20)
    .Block:nth-of-type(1n+2)
      display none

Clean channel block group style

.ChannelBlockGroup
  width 100%
  border-top 1px solid bordergray
  padding (unit * 2) 0
  &__inner
    margin 0 auto
    display flex
    justify-content flex-start

  for i in (1..4)
    @media (min-width:(block_width_mar * i) + 20) and (max-width:(block_width_mar * (i + 1)) + 20)
      &__inner
        width (block_width_mar * i) + 20
      .Block:nth-of-type(1n+{i+1})
        display none


.search-container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-evenly
	.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

Add media screen for search in mobile

.search-container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-evenly
	.input-container
		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
		width: fit-content
		.btn
			text-align: center

	@media (max-width: 400px)
		.input-container
			margin: 15px 0
		.button-container
			margin: 12px 0


@import '../stylus_lib'

.iframed-page-modal
  .modal-backdrop
    background-color rgba(gray-lighter-color, 0.5)
  .modal-body
    height 100%
  &.is-loading > .modal-backdrop::before
    background-color black !important

  iframe
    vertical-align bottom

Switch to 20% transparent black

@import '../stylus_lib'

.iframed-page-modal
  .modal-backdrop
    background-color rgba(black, 0.2)
  .modal-body
    height 100%
  &.is-loading > .modal-backdrop::before
    background-color black !important

  iframe
    vertical-align bottom


.g-control-widget-label
  margin-bottom 2px

.g-control-widget-description
  font-size 12px
  color #666
  margin-bottom 4px

.g-control-item
    input.form-control
      height auto

Fix bottom of text cut off in select boxes

@import '~nib/index.styl'

.g-control-widget-label
  margin-bottom 2px

.g-control-widget-description
  font-size 12px
  color #666
  margin-bottom 4px

.g-control-item
    input.form-control
      height auto

    select
      appearance none


@import "{retronator:landsofillusions}/style/style.import"

.landsofillusions-items-sync-memories-components-actionspreview
  .characters
    list-style none
    padding 0

    .character
      .image
        position relative
        width 16rem
        height 64rem

  .actions-area
    &::after
      content ''
      absolute-cover()
      background linear-gradient(to bottom, atariGrey(0) 0%, transparent 50%)

    .actions
      list-style none
      padding 0

.memory.updated
  .landsofillusions-items-sync-memories-components-actionspreview
    .actions-area::after
      background linear-gradient(to bottom, atariAqua(0) 0%, transparent 50%)

  .preview:hover
    .landsofillusions-items-sync-memories-components-actionspreview
      .actions-area::after
        background linear-gradient(to bottom, atariAqua(1) 0%, transparent 50%)

.preview:hover
  .landsofillusions-items-sync-memories-components-actionspreview
    .actions-area::after
      background linear-gradient(to bottom, atariCyan(0) 0%, transparent 50%)

Fix for memory previews in Safari.

@import "{retronator:landsofillusions}/style/style.import"

.landsofillusions-items-sync-memories-components-actionspreview
  .characters
    list-style none
    padding 0

    .character
      .image
        position relative
        width 16rem
        height 64rem

  .actions-area
    &::after
      content ''
      absolute-cover()
      background linear-gradient(to bottom, atariGrey(0) 0%, transparent 50%)

    .actions
      list-style none
      padding 0

.memory.updated
  .landsofillusions-items-sync-memories-components-actionspreview
    .actions-area::after
      background linear-gradient(to bottom, atariAqua(0) 0%, rgba(atariAqua(0), 0) 50%)

  .preview:hover
    .landsofillusions-items-sync-memories-components-actionspreview
      .actions-area::after
        background linear-gradient(to bottom, atariAqua(1) 0%, rgba(atariAqua(1), 0) 50%)

.preview:hover
  .landsofillusions-items-sync-memories-components-actionspreview
    .actions-area::after
      background linear-gradient(to bottom, atariCyan(0) 0%, rgba(atariCyan(0), 0) 50%)


#imageViewerViewports
  height: calc(100% - 30px)
  width: 100%

  .viewportContainer
    float: left
    border: 2px solid #777

    &.active, &:hover.active
      border: 2px solid #9A6617

    &:hover
      border: 2px solid white

    .removable
      width: 100%
      height: 100%
      position: relative // Necessary so that the viewportOverlay is on top of the viewports

Remove active viewport orange border; just use white border on hover

#imageViewerViewports
  height: calc(100% - 30px)
  width: 100%

  .viewportContainer
    float: left
    border: 2px solid #777

    &.active
      border: 2px solid #777

    &:hover
      border: 2px solid white

    .removable
      width: 100%
      height: 100%
      position: relative // Necessary so that the viewportOverlay is on top of the viewports


@require '../../../style/colors.styl';

#overlay
  .starting-screen
    .login-links
      position absolute
      top 1.5em
      right 4em

    .h1-logo
      height 40px
      margin-top 21.440px
      margin-bottom 21.440px

    .welcome-section
      margin-top 0.5em

      .text-chunk
        position: relative;

        img
          position absolute;
          top calc(50% - 1.5em)
          width 3em
          height 3em

        p
          max-width 30em

      .text-chunk:nth-child(odd) img
        left 31em

      .text-chunk:nth-child(even) p
        position relative;
        left 4em;

    img.line-height
      position relative
      top 6px
      height 24px

Use justified text for start screen welcome text

@require '../../../style/colors.styl';

#overlay
  .starting-screen
    .login-links
      position absolute
      top 1.5em
      right 4em

    .h1-logo
      height 40px
      margin-top 21.440px
      margin-bottom 21.440px

    .welcome-section
      margin-top 0.5em

      .text-chunk
        position: relative;

        img
          position absolute;
          top calc(50% - 1.5em)
          width 3em
          height 3em

        p
          max-width 30em
          text-align justify

      .text-chunk:nth-child(odd) img
        left 31em

      .text-chunk:nth-child(even) p
        position relative;
        left 4em;

    img.line-height
      position relative
      top 6px
      height 24px