/*= Variables
-------------------------------------------------------------- */
$font-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size: 16px;
$font-size-small: 13px;
$line-height: $font-size * 1.6;
$margin: $font-size * 2;
$default-color: gray;
$dark-color: darken($default-color, 60%);
$light-color: lighten($default-color, 20%);
$white-color: #fff;
$black-color: #000;
$dark-opaque: rgba(black, .5);
$light-opaque: rgba(white, .8);
$border-color: #eee;
$yellow-color: #FFFCDD;
$green-color: #8fbc8f;

/*= Global
-------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}

a:active,
a:focus {
	outline: 0;
}

/*= Grids
-------------------------------------------------------------- */
.sell-media-row {
	display: flex; /* equal height of the children */
}

.sell-media-col {
	flex: 1; /* additionally, equal width */
}

.sell-media-two-col {
	margin: 0 10% 10% 0;
	width: 45%;
	&:nth-child(2n) {
		margin-right: 0;
	}
	&:nth-child(2n+1) {
		clear: left;
	}
}

.sell-media-three-col {
	margin: 0 5% 5% 0;
	width: 30%;
	&:nth-child(3n) {
		margin-right: 0;
	}
	&:nth-child(3n+1) {
		clear: left;
	}
}

.sell-media-four-col {
	margin: 0 4% 4% 0;
	width: 22%;
	&:nth-child(4n) {
		margin-right: 0;
	}
	&:nth-child(4n+1) {
		clear: left;
	}
}

.sell-media-five-col {
	margin: 0 2% 2% 0;
	width: 18%;
	&:nth-child(5n) {
		margin-right: 0;
	}
	&:nth-child(5n+1) {
		clear: left;
	}
}

.sell-media-main-col {
	clear: left;
	margin-right: 5%; // Legacy themes have conflicting margins. Let's make theme consistent.
	width: 65%;  // Legacy themes have conflicting widths. Let's make theme consistent.
}

.sell-media-side-col {
	width: 30%; // Legacy themes have conflicting widths. Let's make theme consistent.
}

.sell-media-two-col,
.sell-media-three-col,
.sell-media-four-col,
.sell-media-five-col,
.sell-media-main-col,
.sell-media-side-col {
	float: left;

	@media only screen and (max-width: 767px) {
		clear: both;
		float: none;
		margin: 0 0 $margin;
		width: 100%;
	}
}

.sell-media-grid-item h2 {
	font-size: $font-size;
}
.sell-media-grid-item img {
	max-width: 100%;
	height: auto;
}

/* Vertical Masonry */
.sell-media-masonry {
	margin-bottom: 10px;
}

/* Horizontal Masonry */
.sell-media-grid-item-horizontal-masonry-container {
	-ms-box-orient: horizontal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;

	.sell-media-grid-item {
		margin-right: 10px;
		margin-bottom: 10px;

		@media only screen and (max-width: 767px) {
			margin: 0 auto 10px;
			text-align: center;
		}

		img {
			height: 190px;
			width: auto;

			@media only screen and (max-width: 767px) {
				height: auto;
				width: 100%;
			}
		}
	}
}

/*= Checkout Page
-------------------------------------------------------------- */
.sell-media-cart-items {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;

	li {
		display: block;
		margin: 1em 0;

		&:after {
			@extend .cf;
		}

		.item-image,
		.item-details,
		.item-qty-total {
			@extend .sell-media-three-col;
		}

		.item-qty-total {
			text-align: right;

			.item-decrement,
			.item-increment,
			.item-quantity {
				display: inline-block;
				margin-right: 10px;

				&:last-child {
					margin-right: 0;
				}
			}

			.dashicons {
				color: $dark-color;
				display: inline;
				font-size: $font-size * .75;
				width: $font-size * .75;
				height: $font-size * .75;
				padding: $font-size * .5;
				text-align: center;
				border: 1px solid darken($border-color, 10%);
				background: $border-color;
				cursor: pointer;
				vertical-align: middle;

				&:hover {
					border-color: darken($border-color, 20%);
					background-color: darken($border-color, 10%);
				}
			}
		}

		// make into two columns
		.item-details,
		.item-qty-total {
			@media only screen and (max-width: 767px) {
				float: left;
				width: 50%;
				margin: 0 0 $margin;
				clear: none;

				.item-name,
				.item-size,
				.item-license {
					text-align: left;
				}
			}
		}
	}

	.item-name,
	.item-total {
		font-weight: bold;
	}

	.item-total {
		margin-top: 25px;
	}

}

.sell-media-totals {
	margin: 25px 0;

	.sell-media-totals-table {
		margin: 50px 0;

		.sell-media-key {
			width: 80%;
			float: left;
			margin: 0 0 10px 0;
			text-align: right;

			@media only screen and (max-width: 767px) {
				margin-right: 5%;
				width: 45%;
			}

		}

		.sell-media-value {
			width: 20%;
			float: left;
			text-align: right;

			@media only screen and (max-width: 767px) {
				width: 50%;
				text-align: left;
			}
		}

		.total {
			font-weight: bold;
		}

	}

	.sell-media-checkout-button {
		margin: 50px 0;
		text-align: right;

		@media only screen and (max-width: 767px) {
			text-align: center;

			.sell-media-button {
				display: block;
				margin: $margin 0;
				padding: $margin;
			}
		}
	}
}

.hide {
	display: none;
}

#sell_media_payment_gateway input {
	margin-right: 10px;
}


/*= Buttons
-------------------------------------------------------------- */
input[type="submit"].sell-media-button,
.sell-media-button,
#sell-media-submit {
	border: none !important;
	background: $default-color;
	box-shadow: none;
	padding: $font-size !important;
	display: inline-block;
	width: auto;
	color: $white-color;
	text-align: center;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none;
	font-size: $font-size;
	line-height: 1;

	&:hover,
	&:focus {
		background: $dark-color;
		box-shadow: none;
		color: $white-color;
		text-decoration: none;
	}

	&:disabled {
		background: $light-color;
	}

}

#sell-media-add-to-cart{
	.sell-media-download-button{
		box-sizing: border-box;
		color: $white-color;
		border-radius: 2px;
		font-size: 16px;
		font-weight: 700;
	}
}

.sell-media-item-links {
	font-size: 11px;
}

/*= Typography
-------------------------------------------------------------- */
.sell-media-title {
	font-weight: 700;
}

.sell-media-entry-title {
	font-size: $font-size;
	text-decoration: none;
	border: none;
	margin-bottom: 6px;
}

.sell-media-caption {
	font-style: italic;
	text-align: center;
	font-size: $font-size * .75;
}

/*= Product Purchases
-------------------------------------------------------------- */
.sell-media-products {
	font-size: $font-size * .75;
	width: 100%;

	th {
		font-weight: bold;
	}

	th,
	td {
		padding: 5px;
	}

	td.sell-media-product-total,
	th.sell-media-product-subtotal,
	td.sell-media-products-grandtotal {
		text-align: right;
	}

	.text-center {
		text-align: center;
	}

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

/*= Layouts
-------------------------------------------------------------- */
// .sell-media,
// .sell-media .site-content,
// .sell-media #content {
// 	width: 100%;
// 	margin: 0 auto;
// }

.sell-media-meta:after {
	@extend .cf;
}

.sell-media-alignleft {
	float: left;
	text-align: left;
	margin: 0 20px 20px 0;
	text-align: center;
}

.sell-media-alignright {
	float: right;
	text-align: right;
	margin: 0 0 20px 20px;
	text-align: center;
}

.sell-media-aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	text-align: center;
}

.sell-media h3 a,
.sell-media-text {
	text-decoration: none;
}


/*= Breadcrumbs
-------------------------------------------------------------- */
.sell-media-breadcrumbs {
	font-size: 13px;
	text-transform: uppercase;
	margin: 20px 0;
	letter-spacing: 1px;
	display: block;
	line-height: 1;

	@media only screen and (max-width: 767px) {
		float: none;
		text-align: center;
	}

	a {
		display: inline-block;
		margin-right: 10px;
		text-decoration: none;

		&:after {
			padding-left: 10px;
			content: '/';
		}

		&:last-child:after {
			content: '';
		}
	}
}

/*= Single Layouts
-------------------------------------------------------------- */
.sell-media-content {
	@extend .sell-media-main-col;
	position: relative;

	img,
	.wp-post-image {
		display: block;
		float: none;
		margin: auto;
		max-width: 100%;
		height: auto;
	}

	.sell-media-single-one-col & {
		@extend .cf;
		float: none;
		margin: 0 0 1.5em 0;
		width: 100%;
	}
}

.sell-media-meta {
	@extend .sell-media-side-col;
	font-size: $font-size * .75;
	line-height: 1.5;

	.sell-media-button {
		display: inline-block;
		text-align: center;

		.sell-media-single-two-col & {
			width: 100%;
		}

		@media only screen and (max-width: 767px) {
			width: 100%;
		}
	}

	ul {
		list-style-position: inside;
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;

		li {
			margin-bottom: .5em;

			.title {
				font-weight: 700;
			}
		}
	}

	.sell-media-single-one-col & {
		float: none;
		width: 100%;
		display: block;
	}
}

#sell-media-single .gallery .gallery-item a img {
	max-width: 95%;
}

/*= Galleries
-------------------------------------------------------------- */
.sell-media-gallery-page .sell-media-content {
	float: none;
	margin: 0;
	width: 100%;
}

.sell-media-gallery {
	@extend .cf;
}

.single-sell_media_item .wp-caption-text {
	display: none;
}

/*= Embeds
-------------------------------------------------------------- */
.sell-media-iframe-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 35px;
	height: 0;
	overflow: hidden;

	iframe {
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/*= Archives
-------------------------------------------------------------- */
.sell-media-grid-item-container {
	margin: $line-height 0;
	position: relative;
}

.sell-media-grid-single-video-item,
.sell-media-grid-single-audio-item{
	div.sell-media-quick-view:before{
		font-family: dashicons;
		content: "\f522";
		float: left;
		font-size: 25px;
		margin: 1px 0 0 5px;
		position: absolute;
		top: 3px;
		left: 0px;
	}

}
.sell-media-grid {
	@extend .sell-media-three-col;
}

.sell-media-item {
	box-shadow: none !important; // box-shadow on images is nasty
	position: relative;
	display: block;
	font-weight: normal;
	text-decoration: none;

	.sell-media-one-col & {
		margin-bottom: $margin;
	}

	img {
		display: block;
		margin: 0 auto;
	}

	.sell-media-quick-view,
	.sell-media-view-gallery {
		font-family: $font-sans-serif;
		font-size: $font-size * .75;
		letter-spacing: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		color: $white-color;
		background: $dark-opaque;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		padding: 10px 0;
		width: 100%;
		display: table;
		transition: all 0.5s ease;
		z-index: 1;
		opacity: 0;

		&:hover {
			background: $black-color;
		}
	}

	&:hover {

		img {
			opacity: 1;
		}

		.sell-media-quick-view,
		.sell-media-view-gallery {
			margin-bottom: 0;
			opacity: 1;
		}

	}
}

/*= Overlays
-------------------------------------------------------------- */
.item-inner, // legacy themes
.sell-media-item-wrap {
	background: $black-color;
	position: relative;

	.item-overlay, // legacy themes
	.sell-media-item-details {
		color: $white-color;
		opacity: 0;
		transition: all 0.25s ease;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		text-align: center;
		text-transform: none;
		font-size: $font-size;
		letter-spacing: 0;

		.collection-details, // legacy themes
		.sell-media-collection-details {
			font-size: $font-size;
			line-height: $font-size * 1.5;
			display: block;
			padding: 0;
			position: relative;
			width: 100%;
		}

		.collection-count, // legacy themes
		.collection-price, // legacy themes
		.sell-media-collection-count,
		.sell-media-collection-price {
			display: block;
		}
	}

	a {
		font-weight: normal;
		text-decoration: none;
		display: block;
		line-height: 0;
	}

	img {
		opacity: 1;
		transition: all 0.25s ease;
	}

	h3 {
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
		position: absolute;
			bottom: 0 !important; /* override legacy theme styles */
			top: auto !important; /* override legacy theme styles */
		text-align: left;
		text-transform: uppercase;
		margin: 0 !important; /* override legacy theme styles */
		padding: 10px !important; /* override legacy theme styles */
		width: 100% !important; /* override legacy theme styles */
		max-width: 100% !important; /* override legacy theme styles */
		box-sizing: border-box;
		background: $dark-opaque;
		color: $white-color;
		font-size:  12px !important; /* override legacy theme styles */
		letter-spacing: 1px;
		font-style: normal;
		font-weight: normal;
		line-height: $font-size !important; /* override legacy theme styles */
	}

	&:hover {

		.item-overlay, // legacy themes
		.sell-media-item-details {
			opacity: 1;
		}

		img {
			opacity: .5 !important;
		}

		h3 {
			opacity: 1;
		}
	}
}


/*= Lightbox
-------------------------------------------------------------- */
.sell-media-add-to-lightbox {
	font-size: $font-size * .75;
	margin: $font-size 0;
}

.sell-media-meta {

	.lightbox-notice.not-in-lightbox {
		display: none;
		margin: 1em 0;
	}

	.lightbox-notice.in-lightbox {
		display: block;
		margin: 1em 0;
	}
}

.sell-media .empty-lightbox {
	color: red;
	cursor: pointer;
}


/*= Pagination
-------------------------------------------------------------- */
.sell-media-pagination-container {
	clear: both;
	margin: 3em auto;
	text-align: center;

	.page-numbers {
		padding: 0 3px;
	}
}

/*= Enlarge
-------------------------------------------------------------- */

.sell-media-gallery-thumbnail {

	display: inline-block;
	width: 100%;
	margin: 0 0 1em;
	padding: 0;
	position: relative;

	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;

	&:before {
		font-family: "Dashicons";
		color: $white-color;
		color: rgba( $white-color, .8 );
		content: "\f179";
		font-size: 36px;
		width: 36px;
		height: 36px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		line-height: 1;
		opacity: 0;
		transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;

		z-index: 10;
	}

	img {
		float: left;
		opacity: 1;
		-webkit-backface-visibility: hidden;
		transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-webkit-transition: all .25s ease-in-out;
	}

	&:hover {

		&:before {
			opacity: .6;
		}

		img {
			opacity: .8;
		}
	}
}


/*= Quick View Dialog
-------------------------------------------------------------- */
.sell-media-dialog-box {
	color: $dark-color;
	font-family: $font-sans-serif;
	font-size: 13px;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.7);
	box-shadow: 0 12px 30px $dark-opaque;
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	z-index: 5000;
	opacity: 0;
	visibility: hidden;

	p,
	a,
	a:visited,
	label,
	h2 {
		color: $dark-color;
		font-family: $font-sans-serif;
		text-decoration: none;
	}

	a:hover,
	a:focus {
		color: $black-color;
	}

	p {
		margin: 0 0 $font-size;
	}

	img {
		width: auto !important;
		height: auto !important;
		max-width: 100%;
		max-height: 100vh;
	}

	fieldset {
		background-color: $white-color;
	}

	select {
		background-color: lighten( $light-color, 20% );
		color: $dark-color;
	}

	#sell-media-dialog-box-target {
		background-color: $white-color;
		position: relative;
		max-width: 1000px;
		max-width: 80vw;
		width: 80%;
		max-height: 80vh;
		margin: 4em auto;
	}

	.sell-media-quick-view-container {
		@extend .cf;
		background-color: $white-color;
		padding: $margin;

		@media only screen and (max-width : 768px) {
			padding: 0;
		}
	}

	.sell-media-quick-view-image {
		@extend .sell-media-main-col;
		margin-bottom: 0 !important; // override grid margins
	}

	.sell-media-quick-view-content {
		@extend .sell-media-side-col;
		margin-bottom: 0 !important; // override grid margins

		@media only screen and (max-width : 768px) {
			margin: 0;

			.sell-media-quick-view-content-inner {
				padding: $margin;
			}
		}

		h6 {
			font-size: $font-size;
			font-weight: bold;
			line-height: 1.4;
			margin: 0 0 24px;
			padding: 0;
		}
	}

	.close {
		color: $light-color;
		right: 0;
		top: 0;
		position: fixed;
		cursor: pointer;
		font-size: $margin;
		line-height: 1;
		text-align: center;
		width: 34px;
		height: 36px;

		.admin-bar & {
			top: 32px;

			@media only screen and (max-width : 768px) {
				top: 42px;
			}
		}

		@media only screen and (max-width : 768px) {
			color: $white-color;
		}

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

	.sell-media-button {
		background-color: lighten( $dark-color, 20% );
		color: $white-color;
		display: block;
		width: 100%;

		&:hover {
			background-color: $dark-color;
		}
	}

	.sell-media-credit {
		color: $white-color;
		font-size: 11px;
		position: absolute;
		bottom: -$margin;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;

		a {
			color: $white-color;
			text-decoration: none;
		}
	}

	&.is-visible {
		opacity: 1;
		visibility: visible;

		#sell-media-dialog-box-target {

			.sell-media-dialog-box-arrow {
				position: absolute;
				display: inline;
				z-index: 1000;
				color: rgba($white-color, 0.7);
				top: 45%;
				text-shadow: 0px 2px 3px rgba($black-color, 0.5);

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

				span {
					font-size: 35px;
					height: 40px;
					width: 40px;
				}
			}

			.sell-media-dialog-box-prev {
				left: -40px;
				float: left;
			}

			.sell-media-dialog-box-next {
				float:right;
				right: -40px;
			}
			@media only screen and (max-width : 768px) {

				.sell-media-dialog-box-next {
					float:right;
				}

			}
		}
	}

	@media only screen and (min-width: 1170px) {
		#sell-media-dialog-box-target {
			margin: 8em auto;
		}
	}
}

.sell-media-dialog-box-terms {
	overflow: scroll;
	#sell-media-dialog-box-target {
		max-height: 500px;
		width: 500px;
		overflow-y: scroll;

		.content{
			padding: 5px 10px;
		}
	}

	@media only screen and (max-width : 768px) {

		overflow: scroll;
		#sell-media-dialog-box-target {
			max-height: 500px;
			width: 302px;
		}

	}
}




/*= Cart Fields
-------------------------------------------------------------- */
.colors-dark .sell-media-meta .sell-media-add-to-cart-fields,
.colors-dark .sell-media-meta .sell-media-add-to-cart-fields fieldset {
	border-color: #333;
}

.sell-media-add-to-cart-fields {
	border-top: 1px solid $border-color;

	fieldset {
		@extend .cf;
		padding: $font-size * .75 0;
		border: 0;
		border-bottom: 1px solid $border-color;
		background-color: transparent;
	}

	label {
		display: inline-block;
		font-weight: normal;
		font-size: $font-size * .75;
		width: 125px;
	}

	select {
		border: 1px solid $default-color;
		font-size: $font-size * .75;
		width: 125px;

		.sell-media-meta & {
			width: auto;
		}
	}

	input[type="radio"] {
		margin-right: 5px;
	}

	.sell-media-tooltip {
		color: $light-color;
		font-size: $font-size * .75;
	}
}

.total-container,
.button-container {
	clear: both;
	margin: $font-size 0 0;
}

.total-container {
	text-transform: uppercase;
}

.price-container {
	color: green;
}

.subtotal {
	font-weight: bold;
	margin-bottom: $line-height;
}

.cart {
	padding-left: 16px;
	background: url(../images/cart.png) no-repeat 0 50%;
}

/*= Search
-------------------------------------------------------------- */
.sell-media-search {
	clear: both;
	height: 90px;
	margin: 20px 0;
	position: relative;
}
.sell-media-search-form {
	border: 1px solid #ccc;
	background-color: #ededed;
	color: #333;
	margin: 0;
	padding: 16px;
	position: absolute;
	text-align: left;
	z-index: 100;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	&.active {
		box-shadow: 0 0 10px rgba(0,0,0,.2);
	}
}

.sell-media-search-query {
	font-size: 20px;
	float: left;
	width: 70%;
}

.sell-media-search-submit {
	float: right;
	width: 30%;
}

.sell-media-search-query input[type=text],
.sell-media-search-submit input[type=submit] {
	height: 50px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.sell-media-search-query input[type=text] {
	border: 1px solid #ccc;
	border-right: 0;
}

.sell-media-search-query input[type=text],
.sell-media-search-submit input[type=submit] {
	border-radius: 0;
	width: 100%;
}

.sell-media-search-submit input[type=submit] {
	background: $default-color;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: $border-color;
	font-family: $font-sans-serif;
	letter-spacing: 1px;
	font-size: $font-size * .75;
	margin: 0;
	text-shadow: none;
	text-transform: uppercase;
}

.sell-media-search-submit input[type=submit]:hover {
	background: $black-color;
	box-shadow: none;
}

.sell-media-search-hidden {
	margin: 10px 0;
}

input.sell-media-search-text[type=text] {
	background: $white-color;
	border-radius: 0;
	color: $default-color;
	font-size: $font-size * .75;
	margin: 0;
}

.sell-media-search-field {

	input {
		padding: 6px;
		height: auto;
	}

	label {
		display: inline-block;
		font-size: $font-size * .75;
		margin-right: 10px;
		padding: 0;
		width: 150px;
	}

	select {
		border: 1px solid $default-color;
		display: inline-block;
		font-size: $font-size * .75;
		width: 100px;
	}
}

.sell-media-search-hidden {
	display: none;
	margin-top: 10px;
}

.sell-media-search-help {
	color: $default-color;
	font-size: $font-size * .75;
	margin-bottom: $font-size;
}

.sell-media-search-close {
	color: $dark-color;
	display: none;
	float: right !important;
	text-decoration: none !important;
	&:hover {
		cursor: pointer;
	}
}

.sell-media-search-results-text {
	font-size: 24px;
	margin: 48px 0;
}

/*= Shortcodes
-------------------------------------------------------------- */
/*  sell_media_shortcode_all */
.sell-media-shortcode-all h3 {
	float: left;
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	width: 70%;
	line-height: 1em;
}

.sell-media .sell-media-shortcode-all .sell-media-grid-item .sell-media-text {
	font-size: 1em;
}

/* sell_media_download_list */
.downloads {
	margin: 1em 0;
	clear:both;

	.download {
		display: block;
		clear: both;
	}

	img {
		float:left;
		margin:0 20px 20px 0;
	}
}

.sell-media-ajax-loader {
	background: url( ../images/ajax-loader.gif) no-repeat center center;
	height: 58px;
	width: 100%;
	text-align: center;
	padding-top: 100px;
	color: #BBB;
	font-size: 12px;
}

#purchase-history {
	td {
		vertical-align: top;
		border-bottom: 1px solid #DFDFDF;
		padding: 10px 0 5px 0;
	}

	th {
		border: solid #DFDFDF;
		border-width: 1px 0 1px 0;
		padding: 10px 0;
	}

	table {
		font-size: 13px;
		margin-bottom: 50px;
	}

	ul.payment-meta {
		margin: 10px 0;
		padding: 0;
		font-size: 12px;
	}
}

/*= Form styling
------------------------------------------------------------------- */
.sell-media-form input[type="number"].small-text {
	width: 40px;
}

.sell-media-tooltip {
	display: inline;
	position: relative;
	cursor: help;
	font-size: 11px;

	&:hover:after {
		background: #333;
		background: rgba(0,0,0,.8);
		border-radius: 2px;
		bottom: 26px;
		color: #fff;
		content: attr(data-tooltip);
		left: 0;
		padding: 8px 12px;
		position: absolute;
		z-index: 98;
		width: 180px;
		font-size: 12px;
		line-height: 1.5;
	}

	&:hover:before {
		border: solid;
		border-color: #333 transparent;
		border-width: 6px 6px 0 6px;
		bottom: 20px;
		content: "";
		left: 50%;
		position: absolute;
		z-index: 99;
	}
}

/*= Notifications
-----------------------------------------------------------------------*/
.sell-media-added {
	color: $dark-color;
	margin: $line-height 0;
	padding: $font-size;
	background: $yellow-color;
	text-align: center;

	a,
	a:hover {
		color: $dark-color;
	}
}

/*= Terms and Conditions
-----------------------------------------------------------------------*/
#terms-and-conditions-dialog {
	z-index: 10000;
	position: absolute;
	width: 400px;
	background: $white-color;
	color: $dark-color;
	box-shadow: 0 0 40px $black-color;
	padding: 25px;
	line-height: 1.5em;

	.close {
		cursor: pointer;
		font-size: 20px;
		position: absolute;
		right: 5px;
		text-align: center;
		top: 5px;
		width: 20px;
	}
}

#sell_media_termsdiv {
	clear: both;
}

#sell_media_terms_cb {
	margin: 5px 5px 0 0;
}

/*= Error styling
-------------------------------------------------------------- */
.sell-media-error {
	font-size: 13px;
	margin: 0 0 0 7px;
	color: #ff0000;
}

/*= Clearing Floats
-------------------------------------------------------------- */
.cf:before,
.cf:after,
.sell-media-grid-item-container:before,
.sell-media-grid-item-container:after,
.wp-advanced-search:before,
.wp-advanced-search:after {
		content: " ";
		display: table;
}
.cf:after,
.sell-media-grid-item-container:after,
.wp-advanced-search:after {
		clear: both;
}

/*= Lightbox & Checkout counters
-------------------------------------------------------------- */
.lightbox-counter,
.checkout-counter,
.checkout-price,
.checkout-counter-wrap {
	margin-left: 5px;
}

.sell-media-label,
.lightbox-counter,
.checkout-counter,
.checkout-counter-wrap {
	display: inline;
	padding: 2px 4px;
	font-size: 9px;
	line-height: 1;
	color: $white-color;
	background: #d9534f;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 2px;
	display: inline-block;
}

/*= Widgets
-------------------------------------------------------------- */

#sell-media-single-sidebar {
	float: left;
	width: 100%;
	margin-top: 1em;

	.widget {
		float: left;
		width: 100%;
		margin-right: 0;
	}
}

.sell-media-widget-area {
	.widget {
		clear: both;
	}
}

.sell-media-widget {
	&.sell-media-masonry-layout-widget {
	  -webkit-column-count: 3; /* Chrome, Safari, Opera */
	    -moz-column-count: 3; /* Firefox */
	    column-count: 3;
	}
}

.sell-media-widget-item-wrap {
	@extend .sell-media-three-col;
}

.sell-media-widget-thumb-wrap {
	float: left;
	max-width: 100%;

	img {
		float: left;
	}
}

.sell-media-recent-widget{
	overflow: hidden;
}

/*= Themes
-------------------------------------------------------------- */
.sell-media {

	.theme-twenty-thirteen &,
	.theme-photolog &,
	.theme-awesome &,
	.theme-twenty-fourteen &,
	.theme-hemingway &,
	.theme-radcliffe &,
	.theme-garfunkel &,
	.theme-fukasawa &,
	.theme-lovecraft &,
	.theme-rowling &,
	.theme-hitchcock &,
	.theme-iwata & {
		width: 90%;
		margin: 50px auto;
	}

	.theme-twenty-fourteen & {
		@media screen and (min-width: 1008px) {
			width: 78%;
			float: right;
			margin: 0 auto;
		}
	}

	.theme-garfunkel & {
		z-index: 100;
		position: relative;
	}
}

#content {

	.theme-base &,
	.theme-twenty-ten & {
		margin: 0 auto;
		width: 100%;
	}
}

// Make filters active tab integrate with theme background color
.theme-sell-photos {
	#sell-media-ajax-filter-container > ul li:hover, #sell-media-ajax-filter-container > ul li.selected-tab {
		border-bottom-color: #f5f5f5;
	}
	#sell-media-ajax-filter-container .sell-media-ajax-filter-terms {
		background-color: #f5f5f5;
	}
}

/*= Overrides
-------------------------------------------------------------- */
.sell-media-single-one-col #main {

	.sell-media-content,
	.sell-media-meta {
		width: 100%;
	}
}

/*= Ajax Filters
-------------------------------------------------------------- */
#sell-media-ajax-filter-container {
	clear: both;
	font-size: $font-size;

	> ul {
		margin: 0;
		padding: 0;
		text-align: center;

		li {
			border: 1px solid $border-color;
			display: inline-block;
			list-style: none;
			margin: 0 4px -1px;
			padding: 0;

			&:hover,
			&.selected-tab {
				color: $white-color;
				border-bottom-color: $white-color;
				position:relative;
				z-index: 2;
			}

			a {
				background-image: none;
				box-shadow: none;
				border: 0;
				color: $default-color;
				display: inline-block;
				font-size: $font-size-small;
				padding: 6px 12px;
				text-decoration: none;
				text-shadow: none;

				span.dashicons {
					vertical-align: middle;
					font-size: $font-size;
					margin-right: 5px;
				}
			}
		}
	}

	.sell-media-ajax-filter-terms {
		background-color: $white-color;
		border: 1px solid $border-color;
		border-bottom: 0;
		margin: 0;
		padding: 30px 60px 36px;
		position: relative;

		@media only screen and (max-width:1023px){
			padding: 30px;
		}

		.drop-down-close-button {
			float: right;
			position: absolute;
			top: 15px;
			right: 15px;
			width: 32px;
			height: 32px;
			opacity: .6;
			cursor: pointer;

			&:hover {
			  opacity: 1;
			}

			&:before,
			&:after {
				position: absolute;
				left: 15px;
				content: ' ';
				height: 16px;
				width: 4px;
				background-color: $light-color;
			}

			&:before {
			  transform: rotate(45deg);
			}

			&:after {
			  transform: rotate(-45deg);
			}
		}

		ul {
			clear: both;
			padding: 0;
			margin: 0 0 24px 0;
			overflow: hidden;

			&.hide {
				display: none !important; /* override themes */
			}

			li {

				display: inline-block;
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: left;
				width: 25%;
				float: left;

				@media only screen and (max-width:1023px){
					width: 33.333%;
				}

				@media only screen and (max-width:767px){
					width: 50%;
				}

				a {
					background-image: none;
					border: 0;
					box-shadow: none;
					color: $default-color;
					padding: 0;
					text-decoration: none;
					text-shadow: none;

					&:hover,
					.selected-term {
						color: darken( $default-color, 30% );
					}
				}
				a.selected-term {
					color: darken( $default-color, 30% );
				}
			}
		}

		.term-pagination {
			border-top: 1px solid $border-color;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			span {
				box-sizing: border-box;
				color: lighten( $default-color, 20% );
				cursor: pointer;
				font-size: $font-size * .8;
				display: inline-block;
				text-align: center;
				text-transform: uppercase;
				width: 50%;
				padding: 10px;

				&:last-child {
					border-left: 1px solid $border-color;
				}

				&:hover {
					background-color: $border-color;
					color: $default-color;
				}

				&.next {
					float: right;
				}

				&.prev {
					float: left;
				}
			}
		}
	}

	.sell-media-ajax-filter-result {
		border-top: 1px solid $border-color;
		padding: 40px 0;

		/* theme compatibility */
		.sell-media {
			width: 100%;
			padding: 0;
		}

		h2,
		p {
			color: $black-color;
		}

		.load-more-button {
			width: 100%;
			text-align: center;
			margin: 10px 0;

			a {
				background-image: none;
				border: 0;
				text-decoration: none;
				text-shadow: none;
				display: inline-block;
				padding: 10px 15px;
				box-shadow: none;
				background: darken( $default-color, 30% );
				color: $light-color;

				&:hover {
					background: $black-color;
					color: $white-color;
				}
			}
		}
	}
}