@import ../../../pillar/src/styles/_config
@import ../../../pillar/src/styles/_utils

$node-latest-thumbnail-size: 160px
$node-latest-gallery-thumbnail-size: 200px
body
	background-color: white
.page-body
	background-color: white

nav.navbar
	background-color: white

	.navbar-brand
		color: $color-text

	li a.navbar-item
		color: $color-text
		&:hover
			color: black
		&:focus
			color: black
		&.active
			color: black
	.dropdown.open
		a
			background-color: white
	.dropdown.libraries
		&:hover
			background: none
		ul.dropdown-menu
			background-color: white
			li
				a
					color: $color-text
					&:hover
						color: black
						background-color: white
	.navbar-container
		+container-behavior

	.navbar-toggle
		border: 2px solid $color-text-dark-primary
		color: $color-text

	.navbar-nav
		+media-xs
			padding: 10px

	.search-input
		display: none

.node-details-container
	max-width: 620px
	font-family: $font-body
	font-size: 1.3em
	line-height: 1.5em
	margin: 0 auto 40px auto
	padding-bottom: 40px


	p
		margin-bottom: 1.3em

header
	display: flex
	flex-direction: column   /* stack flex items vertically */
	position: relative
	img.header
		width: 100%
		flex-direction: column   /* stack flex items vertically */
		position: relative
	a.page-card-cta
		position: absolute
		left: 76%
		top: 50%
		transform: translate(-50%, -50%)
		color: white
		font-weight: bold
		background: #ff4970
		border-radius: 3px
		border: none
		box-shadow: 1px 1px 0 rgba(black, .2)
		padding: 7px 20px
		text-decoration: none
		text-shadow: none

		&:hover
			background: lighten(#ff4970, 5%)


h2
	text-align: center
	margin-bottom: 40px

section
	max-width: 1024px
	padding-top: 20px
	border-top: thin solid $color-background
	margin: 0 auto

a.btn
	margin: 20px auto
	font-size: 1.3em
	padding: 9px 18px
	border-radius: 8px
	color: $color-text-dark

.navbar-secondary
	max-width: 620px
	margin: 0 auto

	.navbar-container
		border-bottom: 1px solid #dddddd

	.navbar-collapse
		padding-left: 0

	li
		a
			padding-left: 20px
			padding-right: 20px
			color: $color-text
			&:hover
			&.active
				background: none
				color: black
				box-shadow: 0px 2px 0 rgba(red, .8)

.node-extra
	display: flex
	flex-direction: column

	//padding: 0 20px
	width: 100%


	.node-updates
		flex: 1
		font-size: 1.1em

		ul
			padding: 0
			margin: 0 0 15px 0
			display: flex
			flex-direction: row
			flex-wrap: wrap

			li
				display: flex
				flex-direction: column
				list-style: none
				padding: 5px
				cursor: pointer
				width: 33.3333%

				+media-xs
					width: 100%

				&.texture, &.group_texture
					width: 25%

				&:hover
					img
						opacity: .9
					a.title
						//color: $color-primary
						text-decoration: underline

				&.post
					.info .title
						//color: $node-type-post
						font-size: 1.1em
					a.image
						border: none
						//border-color: $node-type-post
						background-color: hsl(hue($node-type-post), 20%, 55%)

				&.asset.image a.image
					border-color: $node-type-asset_image
					background-color: hsl(hue($node-type-asset_image), 20%, 55%)
				&.asset.file a.image
					border-color: $node-type-asset_file
					background-color: hsl(hue($node-type-asset_file), 20%, 55%)
				&.asset.video a.image
					border-color: $node-type-asset_video
					background-color: hsl(hue($node-type-asset_video), 20%, 55%)

				.image
					width: 100%
					height: $node-latest-thumbnail-size
					min-height: $node-latest-thumbnail-size
					max-height: $node-latest-thumbnail-size
					background-color: $color-background
					margin: 5px auto 10px auto
					position: relative
					overflow: hidden
					border-radius: 0

					img
						max-height: $node-latest-thumbnail-size
						+position-center-translate

					i
						color: rgba(white, .9)
						font-size: 1.8em
						position: absolute
						bottom: 3px
						left: 5px
						text-shadow: 1px 1px 0 rgba(black, .2)

						&.pi-file-archive
							font-size: 1.5em
							bottom: 5px
						&.pi-newspaper
							font-size: 1.6em
							left: 7px

					.ribbon
						+ribbon

				.info
					width: 100%
					height: 100%
					display: flex
					flex-direction: column
					justify-content: space-between
					word-break: break-word

					.description
						font-size: 1em
						line-height: 1.8em
						padding-top: 8px
						color: $color-text-dark-primary

					.title
						display: block
						font-size: 1.3em
						color: $color-text-dark
						font-weight: 600
						+clearfix
						+text-overflow-ellipsis

					span.details
						width: 100%
						display: block
						font-size: 1em
						line-height: 1.2em
						padding: 5px 0
						color: $color-text-dark-secondary
						+clearfix

						.who
							margin-left: 3px
						.what
							text-transform: capitalize


$bg-color: #444
$bg-color2: #666
$yellow: rgb(249,229,89)
$almost-white: rgb(255,255,255)
$btn-transparent-color: rgba(249,229,89,1)
$btn-transparent-bg: rgba(249,229,89,0)


section.gallery
	max-width: 1024px
	margin: 60px auto 0 auto
	text-align: center
	padding-bottom: 40px

	p
		color: $almost-white
		padding: 0 40px


	.thumbnail
		float: left
		position: relative
		width: 23%
		padding-bottom: 23%
		margin: 0.83%
		overflow: hidden
		&:hover
			box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)

	.img-container
		position: absolute
		width: 100%
		height: 100%

		img
			width: 300%
			transform: translate(-20%,-10%)

		&:hover .img-caption
			top: 0
			left: 0
			.btn-trans
				background: rgba(255,255,255,0.4)

	.img-caption
		position: absolute
		width: 100%
		height: 100%
		background: rgba(0, 0, 0, 0.3)
		text-align: center

	.table
		display: table
		.table-cell
			display: table-cell
			vertical-align: bottom
			border: none

	@media screen and (max-width: 992px)
		.thumbnail
			width: 22%
			padding-bottom: 22%
			margin: 1.5%

		.img-container:hover .img-caption
				top: 0
				left: 0

		.img-caption
			position: absolute
			width: 100%
			height: 100%
			background: rgba(0, 0, 0, .7)
			text-align: center
			a
				color: $yellow

	@media screen and (max-width: 720px)
		.thumbnail
			width: 29%
			padding-bottom: 29%
			margin: 2.16%

	@media screen and (max-width: 470px)
		.thumbnail
			width: 44%
			padding-bottom: 44%
			margin: 3%