.dashboard-container
	+media-xs
		flex-direction: column
	display: flex
	justify-content: space-around
	align-items: flex-start
	align-content: center
	word-break: break-word

	+container-behavior

	section#main
		+container-box
		margin: 20px auto
		width: 52%

		+media-xs
			width: 100%
			border-radius: 0

	section#side
		width: 46%
		flex-direction: column
		margin-right: auto

		+media-xs
			width: 100%

	section.blog-stream,
	section.random-asset
		margin: 20px auto

		+media-xs
			border-radius: 0

		span.section-lead
			display: block
			padding: 10px 0 10px 15px
			color: $color-text-dark-secondary

	section#main,
	section#side
		h4
			padding-bottom: 5px
			margin-bottom: 20px
			position: relative

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

			a
				color: $color-text

				&:hover
					color: $color-primary
					cursor: pointer

	section#nav-tabs,
	section#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
				// font-size: 1.1em
				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

			li.create
				cursor: pointer
				display: inline-block
				float: right
				font:
					size: 1.2em
					weight: 400
				padding: 5px 10px
				margin-top: 3px

				a
					color: $color-success
					text-decoration: none

				&.disabled
					cursor: wait
					border-color: $color-success
					opacity: .8
					a
						cursor: wait

	section.stream
		background-color: white
		border-bottom: thin solid $color-background-dark
		padding: 15px 15px 0
		position: relative

		ul.activity-stream__list
			list-style: none
			margin: 0
			padding: 0

			$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-thumbnail
						background: transparent
						color: $node-type-comment
						font-size: 1.2em
						box-shadow: none

						i
							+position-center-translate
							left: 22px
							top: 19px

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

						ul.meta
							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%
					margin-right: auto
					padding: 10px 0

					+media-xs
						margin-left: 0

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

						span
							padding: 1px 50px

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

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

	ul.meta
		+list-meta
		padding: 5px 10px 0 10px
		font-size: .85em
		color: $color-text-dark-secondary
		display: flex
		white-space: nowrap

		&.extra
			margin-top: auto

		li
			padding-left: 10px
			&:before
				left: -5px
			&.where-project
				+text-overflow-ellipsis

	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.blog-stream
		+media-md
			padding-left: 10px
		+media-sm
			padding-left: 10px
		position: relative

		.feed
			position: absolute
			top: 10px
			right: 10px
			font-size: 1.4em
			color: lighten($color-text-dark-hint, 10%)

			&:hover
				color: $color-primary

		> ul
			margin: 0
			padding: 0
			list-style: none
			border-top: thin solid $color-background

			.blog_index-item
				+container-box
				display: flex
				flex-direction: column
				margin-bottom: 50px

				&:before
					height: 1px
					background-color: $color-background-dark
					position: absolute
					bottom: -26px
					left: 25px
					right: 25px
					content: ' '

				&:last-child
					margin-bottom: 0

					&:before
						display: none

				a.item-title
					font-size: 1.6em
					padding: 5px 15px
					display: block
					color: $color-text

					&:hover
						color: $color-primary

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


				&.blog-non-featured
					border-radius: 0
					margin: 0

				.item-content
					+node-details-description
					padding: 10px 15px

				.blog-stream__list-details
					.title
						color: $color-text-dark-primary
						display: block
						font-size: 1.3em

						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em
						color: $color-text-dark-secondary

						li
							padding-left: 10px
							&:before
								left: -5px

			.blog_index-header
				display: block
				position: relative

				img
					border-top-left-radius: 3px
					border-top-right-radius: 3px
					width: 100%

		.more
			text-align: center

			a
				color: $color-text
				display: block
				padding: 25px 0
				text-decoration: underline
				width: 100%

				&:hover
					color: $color-primary

	section.random-asset
		border-bottom: thin solid $color-background-dark
		margin: 40px 0

		h4
			padding-left: 15px

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

			> 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
					+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: 20px 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
			font:
				family: $font-body
				size: 1.4em
				weight: 300

			+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

			a
				+button($color-text-light, 3px)
				padding: 5px 0
				margin:
					bottom: 5px
					right: auto
					left: auto
				font-size: .9em
				opacity: 1
				flex: 1

				+media-xs
					margin: 10px auto
					width: 100%

				&:first-child
					margin-right: 15px

				&.blue
					+button(hsl(hue($color-info), 60%, 45%), 3px)

				&.orange
					+button(hsl(hue($color-secondary), 50%, 50%), 3px)
					padding: 5px 15px

				&.green
					+button(hsl(hue($color-success), 60%, 40%), 3px, true)


/* Sections for the non-logged in */
section.pricing
	padding: 50px 0
	margin-bottom: 25px
	background-color: $color-background-light
	+clearfix
	+media-xs
		padding: 0

	h2
		text-align: center
		font-size: 2.3em
		text-shadow: 1px 1px 0 white
		margin:
			top: 10px
			bottom: 50px
		padding: 0

		+media-xs
			font-size: 1.6em

	.box
		margin-top: 40px
		padding: 20px 20px 60px 20px
		border: 1px solid $color-text-dark-hint
		background-color: white
		position: relative
		text-align: center
		border-top: 3px solid rgba($color-text-dark-secondary, .5)
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px

		+media-xs
			margin-bottom: 15px

		&.yearly
			border-top: 3px solid $color-info
			transform: scale(1.1)

			+media-xs
				transform: scale(1)

			a.sign-up-now
				+button($color-primary, 3px, true)

		h3
			font:
				size: 1.8em
				family: $font-body
			padding-bottom: 0
			margin: 25px 0 0 10px

		.pricing-display
			position: relative
			color: $color-info
			padding: 10px 0

			.currency-sign,
			.digit-dec
				font-size: 1.7em
				position: relative
				top: -25px
				font-weight: 100

			.digit-int
				font-size: 4.5em
				font-weight: 100

		.pricing-caption
			color: $color-text-dark-hint
			text-align: center
			padding-bottom: 25px

			ul
				text-align: left

		+list-bullets

		ul
			color: $color-text-dark-primary
			padding-left: 10px
			margin-top: 15px

			li
				padding-bottom: 8px

		.sign-up-now
			position: absolute
			bottom: 25px
			width: 65%
			left: 50%
			transform: translateX(-50%)
			font-size: 1.2em

			+button($color-primary, 3px)
			padding: 5px 25px
			white-space: nowrap
			text-align: center

	.education
		color: $color-text-dark-primary
		font-size: 1.1em
		padding: 25px 15px 0
		text-align: center

		h3
			color: $color-primary-dark

		.btn
			margin-top: 15px
			min-width: 200px

body.homepage
	.dashboard-container
		#main
			+media-xs
				width: 100%
			width: 38%

		#side
			+media-xs
				width: 100%
			width: 60%