.package-detail {
	padding-top: 0;
	position: relative;

	.markdown-syntax pre {
		margin: 0 0 1rem;
	}


	.forum-thread {
		padding: 15px 0px;

		img {
			max-width: 60px;
			height: auto;
		}

		&:hover {
			background: rgba($color-light-grey, .88);
		}

		&:first-of-type {
			margin-top: 10px;
		}
	}

}



.package-forum-activity {
	overflow: hidden;

	.goto {
		text-align: right;
		font-size: .9rem;
		color: $color-text;
		float: right;

		&:hover {
			text-decoration: none;
			color: $color-headline;
		}
	}
}



.package-detail-sidebar {
	font-size: .9rem;
	line-height: 1.5;
	color: $color-text;
	margin-top: 2rem;

	@media (min-width: $md) {
		margin-top: 0;
	}

	.button {
		max-width: 80%;
		font-size: 1rem;
		margin: .5rem 0 2.5rem;

		display: block;

		padding: 12px 20px;
    	font-weight: bold;

		small {
			display: block;
    		font-weight: normal;

			margin-top: .3rem;

			color: white;
			font-size: .8rem;
			line-height: 1;
		}

	}

    .pre {
		overflow: auto;
		display: block;
		font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
		background-color: #333;
		color: #fff;
		font-size: 0.8rem;
		line-height: 1.4em;
		background-clip: padding-box;
		padding: 8px 15px 8px 15px;
		border-radius: 5px;
		width: 100%;
		min-width: 300px;
		text-align: left;
		border: none;
		margin: 0 auto;

		&:hover {
			background: lighten(#333, 5%);
			cursor: pointer;
		}
	}

    .pm-nuget {
		position: relative;
		display: block;
		margin: 10px auto 25px auto;
		height: 100%;
		width: auto;
		color: #fff;

		&:before {
			content:"PM>";
			display: block;
			position: absolute;
			top: 50%;
			left: 0;
			font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
			font-size: 0.8rem;
			transform: translate(15px, -46%);
			opacity: .9;
		}
        .pre {
            padding-left: 45px;
        }
	}


	h2, h3, strong, span {
		color: $color-headline;
	}


	h2 {
		font-size: 1.5rem;
		margin-bottom: 1rem;
	}


	h3 {
		margin-bottom: .3rem;
		font-size: 1.08rem;
		font-weight: bold;
	}


	ul {
		margin-bottom: .8rem;
	}


	li {
		list-style: none;
		font-size: .9rem;
		padding: .15rem 0 0;

		&:first-child {
			padding: 0;
		}
	}


	small {
		color: $color-text;
	}


	span {
		padding-right: 3px;
	}


	span, strong {
		font-weight: bold;
	}


	small, p {
		font-size: .9rem;
	}

}



.package-compatibility-versions {

	.versions {
		margin: 1rem 0;
	}

	span {
		display: block;
		font-weight: normal;
	}




	.report-compat-item {
		float: right;
		clear: both;
	}

	strong {
		margin-right: 5px;
	}
}



.package-detail-content {

	h3 {
		display: block;
		margin-bottom: .4rem;
		font-size: 1.2rem;
	}


	.package-detail-description {
		margin-bottom: 2rem;

		h1 {
			font-size: 2.1rem;
			line-height: 1.5;
			color: $color-headline;
			margin-bottom: 1rem;
			margin-top: 0;
			max-width: 95%;
			position:relative;
			z-index:1;
			font-weight: bold;
		}



		a {
			&:hover {
				text-decoration: none;
			}
		}



		.hero-image {
			max-width: 100%;
			height: auto;
			margin-bottom: 1.5rem;
		}



		p, li {
			font-size: 1rem;
			line-height: 1.5;
			color: $color-text;

			+ * {
				margin-top: 1rem;
			}



			+ h3 {
				margin-top: 1.7rem;
			}



			&.hero {
				font-size: 1.25rem !important;
				line-height: 1.4;
				color: $color-headline;
				margin-bottom: 1.5rem;
			}
		}



		ul {
			margin-left: 40px;

			li {
				margin: 0;
			}
		}



		h3 {
			display: block;
			margin-bottom: .4rem;
			font-size: 1.2rem;
		}
	}



	.tabs {
		margin: 0px;
		padding: 0px;
		list-style: none;
		margin-top: 6rem;

		li {
			background: none;
			color: $color-headline;
			display: inline-block;
			padding: 10px 15px;
			cursor: pointer;
			font-size: 1rem;

			&.current{
				background: #ededed;
				color: $color-headline;
			}

			&:hover {
				opacity: .8;
			}
		}
	}


	.tab-content{
		display: none;
		background: #ededed;
		padding: 30px;
		margin-bottom: 6rem;

		h3 {
			font-size: 1.1rem;
			margin-bottom: 1rem;
			color: $color-headline;
		}

		p {
			font-size: 1rem;
			color: $color-text;
		}

		span {
			color: rgba(#000, .4);
			font-size: .8rem;
			display: block;
			margin-top: .2rem;
		}

		&.current{
			display: inherit;
		}
	}
}


.package-creator {
	position: relative;

	h3 {
		margin: 0 0 1rem 0;
	}

	.row {
		margin-top: 0;
		margin-bottom: 0;
	}

	img {
		display: inline-block;
		border-radius: 50%;
		max-width: 80px;
		min-width: 80px;
		height: auto;
		vertical-align: middle;
	}

}


.package-creator-information {
	display: flex;
	align-items: center;
	justify-content: flex-start;


	h3 {
		margin: 0;
		font-size: 1rem;
		color:  rgba(#000, .8);

		a {
			text-decoration: none;

			&:hover {
				color: $color-our;
			}
		}
	}


	.text {
		margin: 0 0 0 1rem;
		display: inline-block;
		vertical-align: bottom;

		a {
			text-decoration: underline;

			&:hover {
				text-decoration: none;
			}
		}
	}
}


.package-creator,
.package-compatibility {
	border-bottom: 1px solid whitesmoke;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}


.package-detail-screenshots {
	overflow: hidden;

	a {
		margin-bottom: .5rem;
		display: block;
		position: relative;
		width: 23%;
		max-height: 100px;
		overflow: hidden;
		margin-right: 2%;
		float: left;
		border: 1px solid whitesmoke;
	}

	img {
		max-width: 100%;
		height: auto;

		&:hover {
			opacity: .8;
		}
	}
}



.package-misc {
	.search-all-results {
		border: none;

		li {
			border: none;
			padding: 10px;

			&:hover {
				background: rgba(255, 255, 255, .44);
			}
		}

		.type-context {
			padding-left: 10px;
		}
	}
}


.smiley {
	&.untested { color: #ccc; }
	&.unhappy, &.superUnhappy { color: #f55b6d; }
	&.neutral { color: rgba(0, 0, 0, 0.6); }
	&.happy, &.joyous { color: #2ba92d; }
	&.joyous { font-weight: bold; }
}


.vote {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	margin-bottom: 20px;

	i {
		font-size: 1.1rem;
		color: rgba(#000, .3);
		display: inline-block;
		margin-right: 5px;

		&.liked {
			color: #f64051;
		}
	}

	&:hover {
		cursor: pointer;

		i {
			color: #f64051;

			&.liked {
				color: rgba(#000, .3);
			}
		}

		a {
			color: $color-text;
		}
	}

	a {
		font-size: .9rem;
		color: rgba(#000, .4);
		text-decoration: none;
	}
}
