.title-underline
	padding-bottom: 5px
	position: relative
	margin-bottom: 20px

	&:before
		background-color: $primary
		content: ' '
		display: block
		height: 2px
		top: 125%
		position: absolute
		width: 50px


nav#nav-tabs,
nav#sub-nav-tabs
	ul#nav-tabs__list,
	ul#sub-nav-tabs__list
		margin: 0
		padding: 0
		list-style: none
		border-bottom: thin solid $color-background
		+clearfix

		li.nav-tabs__list-tab
			float: left
			border: none
			border-bottom: 3px solid transparent
			color: $color-text-dark-primary
			user-select: none

			&:hover
				border-color: rgba($color-secondary, .3)
				cursor: pointer
				color: $color-text-dark
				a
					color: $color-text-dark

			a
				display: block
				text-decoration: none
				padding: 10px 15px 5px
				color: $color-text-dark-primary

			i
				margin-right: 5px
				color: $color-text-dark-secondary
				font-size: .9em

				&.pi-blender
					margin-right: 10px

			span
				color: $color-text-dark-hint
				margin-left: 5px

			&.active
				border-color: $color-secondary
				color: $color-secondary-dark
				a, i
					color: $color-secondary-dark

			&.disabled
				border-color: $color-background-light
				color: $color-text-dark-hint
				cursor: default
				a, i
					color: $color-text-dark-hint

				&:hover
					border-color: $color-background-light
					pointer-events: none

.dashboard-container
	word-break: break-word

section.stream
	ul.activity-stream__list
		$activity-stream-thumbnail-size: 110px

		> li
			position: relative
			display: flex
			padding: 10px 0
			overflow: hidden
			border-top: thin solid $color-background-dark

			&:first-child
				border: none

			&.active .activity-stream__list-details .title
				color: $color-primary

			&:hover
				.title
					text-decoration: underline
				&.video
					a.image
						&:hover
							i
								font-size: 3.5em
							img
								opacity: .9
						img
							opacity: .7
							z-index: 0
							transition: opacity 150ms ease-in-out

						i
							+position-center-translate
							z-index: 1
							color: rgba(white, .6)
							font-size: 3em
							transition: font-size 100ms ease-in-out

			&.comment
				.activity-stream__list-details
					padding: 0
					.title
						color: $color-text-dark
						padding: 7px 10px 2px 10px
						font-size: 1em
						margin: 0

					ul.meta
						+list-meta
						font-size: .9em
						padding: 0 10px 7px 10px

						li
							&.where-parent:before
								content: '\e83a'
								font-family: 'pillar-font'

							&.what:before
								display: none

			&.post
				.activity-stream__list-thumbnail
					border-color: $node-type-post
					background-color: $node-type-post
				.activity-stream__list-details .title
					color: darken($node-type-post, 15%)
					font:
						size: 1.3em
						weight: 500

			&.asset, &.comment, &.post
				&:hover
					cursor: pointer
			&.empty
				display: none
				color: $color-text-dark-primary
				padding: 20px
				text-align: center
				span
					color: $color-primary
					&:hover
						text-decoration: underline
						cursor: pointer

			&.with-picture
				min-height: $activity-stream-thumbnail-size

				.activity-stream__list-thumbnail
					background-color: black
					width: $activity-stream-thumbnail-size * 1.69
					min-width: $activity-stream-thumbnail-size * 1.69

					.activity-stream__list-thumbnail-icon
						position: absolute
						top: 0
						left: 0
						right: 0
						bottom: 0
						font-size: 1.3em
						text-shadow: 1px 1px 0 rgba(black, .2)
						background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%)

						i
							position: absolute
							bottom: -8px
							left: 20px
							top: initial
							right: initial
							color: white

			.activity-stream__list-thumbnail
				position: relative
				display: flex
				justify-content: center
				align-items: center
				overflow: hidden
				width: 35px
				height: auto
				min-width: 35px
				min-height: auto

				+media-xs
					display: none


				&.image i
					color: $node-type-asset_image
				&.file i
					color: $node-type-asset_file
				&.video i
					color: $node-type-asset_video

				i
					+position-center-translate
					left: 23px
					top: 21px
					font-size: 1.1em

				img
					max-height: $activity-stream-thumbnail-size
					+position-center-translate

			.activity-stream__list-details
				display: flex
				flex-direction: column
				justify-content: space-around
				flex: 1
				overflow: hidden
				position: relative
				max-width: 100%
				padding: 10px 0

				+media-xs
					margin-left: 0

				.ribbon
					right: -47px
					top: 5px
					font-size: 12px

					span
						padding: 1px 50px

				.title
					padding: 0 10px
					color: $color-text-dark

					span
						@include badge(hsl(hue($color-success), 60%, 45%), 3px)
						font-size: .7em
						padding: 1px 5px
						margin-right: 5px

section.comments
	padding: 0 15px 5px

	ul
		padding: 0

	> ul
		list-style-type: none
		margin: 10px 0 0

		> li
			+text-overflow-ellipsis
			border-top: thin solid $color-background-dark
			padding: 10px 0

			&:first-child
				border: none

			> a
				+text-overflow-ellipsis
				color: $color-text
				display: block
				padding-bottom: 5px

section.random-asset
	border-bottom: thin solid $color-background-dark

	ul.random-asset__list
		list-style: none
		padding: 0

		> li
			align-items: center
			border-top: thin solid $color-background
			display: flex
			padding: 7px 0
			position: relative
			overflow: hidden

			&:first-child
				border-top: none

			.ribbon
				right: -47px
				top: 5px
				font:
					size: 12px
					weight: 500

				z-index: 1

				span
					padding: 1px 50px

			.random-asset__list-thumbnail
				background-color: $color-background
				display: block
				height: 50px
				margin-right: 15px
				min-height: 50px
				min-width: 50px
				overflow: hidden
				position: relative
				width: 50px

				img
					width: 100%

				i
					+position-center-translate
					font-size: 1.6em
					color: $color-text-light

				&.image
					background-color: $node-type-asset_image
				&.file
					background-color: $node-type-asset_file
					font-size: .8em
				&.video
					background-color: $node-type-asset_video
					font-size: .8em
				&.None
					background-color: $node-type-group

			.random-asset__list-details
				.title
					display: block
					font-size: 1em
					color: $color-text-dark-primary

					&:hover
						color: $color-primary

				ul.meta
					+list-meta
					padding-top: 5px
					font-size: .9em

					li
						&:before
							left: -5px
						&.what
							text-transform: capitalize

			&.featured
				align-items: flex-start
				flex-direction: column
				padding: 0

				a.title
					font-size: 1.1em
					padding: 10px 0 5px
					display: block
					color: $color-text

					&:hover
						color: $color-primary

				a.random-asset__thumbnail
					display: block
					position: relative

					&.video
						background-color: black
						img
							opacity: .7

					img
						transition: opacity 150ms ease-in-out
						width: 100%
						max-width: 100%

					i
						+position-center-translate
						color: white
						font-size: 3em
						text-shadow: 0 0 25px black
						transition: font-size 150ms ease-in-out

					&:hover
						i
							font-size: 3.5em
						img
							opacity: .85

				ul.meta
					+list-meta
					padding-bottom: 10px


section.announcement
	+container-box
	margin-left: 15px
	margin-right: 15px

	.header-icons
		display: flex
		align-items: center
		justify-content: center
		padding: 20px 0 5px 0

		i
			font-size: 2.5em
			color: $color-info

			&.pi-heart-filled
				color: $color-danger
				margin-left: 5px

	img.header
		width: 100%
		margin: 0 auto
		border-top-left-radius: 3px
		border-top-right-radius: 3px

	iframe
		width: 100%
		position: relative
		left: 15px
		margin: 25px auto

		+media-sm
			height: 500px
		+media-md
			height: 520px
		+media-lg
			height: 580px

	.text
		padding: 15px

		.title
			padding-bottom: 10px

			+media-xs
				font-size: 1.4em

			strong
				color: $color-primary-dark

			a
				color: $color-text-dark-primary

		.lead
			font-size: 1em
			+list-bullets

			ul
				margin-top: 10px
				padding-left: 10px

			hr
				border: none
				height: 1px
				width: 100%
				margin: 10px 0
				background-color: $color-background
				clear: both

			+media-xs
				padding-left: 10px

		.buttons
			margin: 15px auto 0 auto
			display: flex
			align-items: center
			justify-content: space-around
			flex-wrap: wrap


body.homepage
	.blog
		// Custom tweak to Bootstrap grid for the only case when
		// the post is inside a column (it's usually centered in the page).
		.col-md-9
			flex: 1
			max-width: 100%

		.jumbotron
			padding-top: 6em
			padding-bottom: 6em

			*
				font-size: $h1-font-size

			.lead
				font-size: $font-size-base